使用jQuery get（0）索引暂停和播放多个HTML5video？

我有几个video的页面。 可以单击缩略图来播放每个video。 问题是对于超过2个video，点击第3个缩略图不会暂停第2个video，所以我同时播放了2个video。 我还使用fadeOut()切换每个video的可见性，无论video数量多少，这都可以正常工作。 因此，我认为问题在于代码的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：

 
 
cadillac
  
 
 
nike
  
 
 
russian standard
   

Answer 1

执行以下操作时：

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

“get（0）”返回与选择器匹配的第一个元素 – 在这种情况下，只是匹配“.video_2”的第一个元素。 其余video将被忽略。 要对所有选定的元素执行操作，请查看jQuery的“ each（） ”方法。 此外，您可以通过执行以下操作将代码简化为更通用的方法：

 Video 1 Video 2   

然后通过做这样的事情来连接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，我按照你所说的关于重置所有video和制作更通用的解决方案，对于有兴趣的人请看下面的工作jsfiddle： http ： //jsfiddle.net/trpeters1/EyZdy/52

Answer 3

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

 $(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); }); });