控制滑块内的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'); 
});