控制滑塊內的HTML5視頻

Question

我創建了一個自定義視頻滑塊，可以循環播放4個視頻。我在每個視頻上都有一個自定義播放按鈕，還有一些覆蓋內容。播放視頻時，疊加內容和播放按鈕都會淡出，並且默認的視頻控制功能將顯現。我的問題是，無論點擊哪個視頻的播放按鈕。它只播放滑塊中的第一個視頻。我知道我需要針對每個視頻的播放按鈕並將其與該視頻關聯起來，但我不能在我的生活中找出如何去做。這裏是我的html：

<div class="video-slider"> 
     <div class="main-wrap"> 
      <div class="slides-view"> 
       <div class="slides"> 
        <div class="slide-gallery"> 
         <div class="slide"> 
          <video id="slider-video" poster=""> 
           <source src="" type="" > 
          </video> 
          <div class="overlay-content"> 
          </div> 
          <div class="play"> 
           <a class="play-button"><img src="" /></a> 
          </div> 
         </div> 
         <div class="slide"> 
          <video id="slider-video" loop poster=""> 
           <source src="" type="" > 
          </video> 
          <div class="overlay-content"> 
          </div> 
          <div class="play"> 
           <a class="play-button"><img src="" /></a> 
          </div> 
         </div> 
         <div class="slide"> 
          <video id="slider-video" loop poster=""> 
           <source src="" type="" > 
          </video> 
          <div class="overlay-content"> 
          </div> 
          <div class="play"> 
           <a class="play-button"><img src="" /></a> 
          </div> 
         </div> 
         <div class="slide"> 
          <video id="slider-video" loop poster=""> 
           <source src="" type="> 
          </video> 
          <div class="overlay-content"> 
          </div> 
          <div class="play"> 
           <a class="play-button"><img src="" /></a> 
          </div> 
         </div> 
        </div><!--end slide-gallery--> 
       </div><!--end slides--> 
      </div><!--end slides-view--> 
     </div><!--end main-wrap--> 
     <div class="slide-arrow left"> 
      <a><img src="/sites/all/themes/merge/img/video-arrow-left.png" /></a> 
     </div> 
     <div class="slide-arrow right"> 
      <a><img src="/sites/all/themes/merge/img/video-arrow-right.png" /></a> 
     </div> 
    </div><!--end video-slider--> 

而且我的JavaScript/jQuery的：

$(document).ready(function() { 

     var sliderVideo = document.getElementById('video-slider'); 
     var sliderVideo = $('#slider-video').get(0); 
     var sliderVideo = $('#slider-video'); 
     var sliderOverlay = $('.video-slider .overlay-content'); 

     $('.play-button').on('click', function() { 
      sliderVideo[0].play(); 
      sliderOverlay.fadeOut('fast'); 
      $(this).hide() 
     }); 

     sliderVideo.on('play', function(e) { 
      $(this).attr('controls', 'true'); 
     }) 

    }); 

Answer 1

我把簡化你的HTML一點點的自由：

<div class="video-slider"> 
    <!-- SLIDE 1 --> 
    <div class="slide"> 
     <video class="slider-video" poster=""> 
      <source src="" type="" /> 
     </video> 
     <div class="overlay-content"> 
      <div class="play-button"></div> 
     </div> 
    </div> 
    <!-- SLIDE 2 --> 
    <div class="slide"> 
     <video class="slider-video" poster=""> 
      <source src="" type="" /> 
     </video> 
     <div class="overlay-content"> 
      <div class="play-button"></div> 
     </div> 
    </div> 
    <!-- END OF SLIDES --> 
    <div class="slide-arrow left"></div> 
    <div class="slide-arrow right"></div> 
</div> 

這裏是做的方式是什麼你想要做（根據新的HTML結構）：

$('.play-button').on('click', function() { 
    $(this).hide(); 
    $(this).parent().fadeOut(); 
    $(this).parent().siblings('.slider-video')[0].play(); 
}); 

$('.slider-video').on('play', function() { 
    $(this).attr('controls', '1'); 
}); 

JS Fiddle Demo

注：我只找到一個可用的視頻在線託管，所以滑塊包含2個相同的視頻。

編輯

如果你要保持你的HTML，因爲它是，這應該工作：

$('.play-button').on('click', function() { 
    $(this).hide(); 
    $(this).siblings('.overlay-content').fadeOut(); 
    $(this).siblings('.slider-video')[0].play(); 
}); 

$('.slider-video').on('play', function() { 
    $(this).attr('controls', '1'); 
});