使用jQuery获取（0）索引来暂停和播放多个HTML5视频？

Question

我有一个页面的几个视频。您可以点击缩略图来播放每个视频。问题在于，对于超过2个视频，点击第3个缩略图不会暂停第2个视频，因此我可以同时播放2个视频。我还使用​​来切换每个视频的可见性，无论视频数量多少，此功能都可以正常工作。因此，我认为问题在于代码的get(0)部分。

这里显示的问题的jsfiddle： http://jsfiddle.net/trpeters1/EyZdy/28/

此外，这里的代码更详细的块，应该使这一问题清晰：

$(function(){ 
     $('#video_1,#video_2,#video_3,#video_4,#video_5,#video_6').hide(); 

     $('.icon_1').click(function(){ 
      $('#video_2,#video_3,#video_4,#video_5,#video_6').fadeOut(function(){ 
        $('#video_1').fadeIn(); 
      $('.video_2,.video_3,.video_4,.video_5,.video_6').get(0).pause(); 
      $('.video_2,.video_3,.video_4,.video_5,.video_6').get(0).currentTime = 0; 
      $('.video_1').get(0).play(); 
      }); 
     }); 


     $('.icon_2').click(function(){ 
      $('#video_1,#video_3,#video_4,#video_5,#video_6').fadeOut(function(){ 
        $('#video_2').fadeIn(); 
      $('.video_1,.video_2,.video_4,.video_5,.video_6').get(0).pause(); 
      $('.video_1,.video_2,.video_4,.video_5,.video_6').get(0).currentTime = 0; 
      $('.video_2').get(0).play(); 
      }); 
     }); 

     $('.icon_3').click(function(){ 
      $('#video_1,#video_2,#video_4,#video_5,#video_6').fadeOut(function(){ 
        $('#video_3').fadeIn(); 
      $('.video_1,.video_2,.video_4,.video_5,.video_6').get(0).pause(); 
      $('.video_1,.video_2,.video_4,.video_5,.video_6').get(0).currentTime = 0; 
      $('.video_3').get(0).play(); 
      }); 
     }); 
}); 

和HTML：

<div id="video_1"> 
<div id="mediaplayer">cadillac</div> 
    <video class="video_1" width="100%" height="100%" controls="controls"> 
     <source src="videos/cadillac_x264.mp4" type="video/mp4" /> 
    <object data="videos/cadillac_x264.mp4" width="100%" height="100%"> 
</object> 
</video> 
</div> 

<div id="video_2"> 
<div id="mediaplayer2">nike</div> 
    <video class="video_2" width="100%" height="100%" controls="controls"> 
    <source src="videos/Nike_Pretty - Computer_x264.mp4" type="video/mp4" /> 
<object data="videos/Nike_Pretty - Computer_x264.mp4" width="100%" height="100%"> 
</object> 
</video> 
</div> 

<div id="video_3"> 
<div id="mediaplayer3">russian standard</div> 
    <video class="video_3" width="100%" height="100%" controls="controls"> 
    <source src="videos/Russian_Standard.mp4" type="video/mp4" /> 
<object data="videos/Russian_Standard.mp4" width="100%" height="100%"> 
</object> 
</video> 
</div> 

Answer 1

当您执行以下操作时：

$('.video_2,.video_3,.video_4,.video_5,.video_6').get(0) 

“get（0）”返回匹配选择器的第一个元素 - 在这种情况下，只是匹配“.video_2”的第一个元素。其他视频被忽略。要对所有选定的元素执行操作，请查看jQuery的“each()”方法。

<a href="#" class="video-thumbnail" data-video-id="video-1">Video 1</a> 
<a href="#" class="video-thumbnail" data-video-id="video-2">Video 2</a> 

<video id="video-1"> ... </video> 
<video id="video-2"> ... </video> 

然后通过做这样的事情挂钩JS：

$('.video-thumbnail').on('click', function() { 
    // Just go ahead and pause/reset all the video elements 
    $('video').each(function() { 
     this.pause(); 
     this.currentTime = 0; 
    }); 

    $('#' + $(this).data('video-id')).get(0).play(); 
}); 

我刚刚输入的这个此外，您还可以通过做这样的事情简化你的代码到一个更通用的方法从我的头上，但希望它会把你放在正确的方向。

Answer 2

感谢P1aincloth3sM4n，我跟着你说，大约正在重置所有视频和制作更一般化的解决方案，对于那些有兴趣请参见下面的工作的jsfiddle什么：http://jsfiddle.net/trpeters1/EyZdy/52

Answer 3

简单的解决方案使用页面上只播放一个HTML5视频元素JQUERY：

$(function() { 
$("video").each(function() { 
    this.pauseOthers = function(event) { 
     $('video').addClass('stopvideo'); 
     $(this).removeClass('stopvideo'); 
     $('.stopvideo').each(function() { 
      this.pause(); 
     }); 
    }; 
    this.addEventListener("play", this.pauseOthers.bind(this), false); 
}); 
});