jQuery를 사용하여 한 페이지에서 비디오를 여러 번 재생하는 경우

Question

비디오를 통해 자동으로 비디오를 재생하는 이미지를 클릭하면 비디오 위에 커버 이미지를 보여주는 코드가 있습니다. 현재이 코드는 한 페이지에서 하나의 비디오에 대해 작동합니다 (ID를 사용하기 때문에).

코드는 Vimeo를 제어하고 재생하기 위해 Froogaloop에 기울고 있습니다. 이 페이지에 1 개 이상의 비디오와 함께 작동 할 수 있도록 나는 다음과 같은 코드를 변환하는 방법을 jQuery를 사용

(현재는 나누기) :

<div class="video-wrapper"> 
    <div class="bg-image" id="play-me"> 
     <span class="play"> 
     <i class="i-play"></i> 
     </span> 
    </div> 
    <iframe src="" id="video"></iframe> 
</div> 

:

// Control Vimeo videos 
var iframe = document.getElementById('video'); 

// $f == Froogaloop 
var player = $f(iframe); 

var playButton = document.getElementById("play-me"); 

playButton.addEventListener("click", function() { 
    player.api("play"); 
    $('.bg-image').addClass('hide-me'); 

    setTimeout(function(){ 
     $('.bg-image').css('z-index','-1'); 
    }, 1000); 
}); 

이 내 HTML입니다

Answer 1

Conver 유럽 식별자 : 이것에

<div class="video-wrapper"> 
    <div class="bg-image" class="play-me"> 
     <span class="play"> 
     <i class="i-play"></i> 
     </span> 
    </div> 
    <iframe src="" class="video"></iframe> 
</div> 

와의 js/jQuery를 수정

var playButton = $(".play-me"); 

playButton.get(0).addEventListener("click", function() { 
    var iframe = $(this).next('.video').get(0),// or use closest() based on your condition 
    player = $f(iframe); 
    player.api("play"); 
    $(this).addClass('hide-me'); 

    setTimeout(function(){ 
     $(this).css('z-index','-1'); 
    }, 1000); 
}); 

경우로 .closest()를 사용, 같은 .video-wrapper 내부에 더 많은 동영상을 추가했다 그렇지 않으면 정상적으로 댓글을 달았습니다 .next() 잘 동작합니다.

설명 : 그 코드는 단지 우리가하지 클릭 해당 요소에 변경을 할 것입니다 우리가 확신 할 $(this)을 사용하여 .

Answer 2

페이지에 복수 play-me 개의 요소가 있다고 가정하고 ID 대신 클래스를 할당하십시오. 그런 다음 기존 코드가 포함 된 클릭 핸들러를 추가하고 this을 사용하여 클릭 한 요소에서 메소드 호출이 호출되도록합니다.

시간 제한에 z-index을 설정 했으므로 그 밖의 모든 것을 넣을 수도 있습니다.

$('.play-me').on('click', function(e) { 
    var $this = $(this); 

    setTimeout(function() { 
    player.api('play'); 

    $this 
     .css('z-index', '-1') 
     .addClass('hide-me'); 
    }, 1000); 
}); 

Answer 3

비디오는 어떻게 설치 되나요? html로 하드 코딩 되었습니까? 나는 코멘트를 할 수 없다, 이것은 코멘트 여야한다 ... Btw, 왜 jquery와 일반 자바 스크립트와 혼합? 클래스에