javascript 使用 jQuery get(0) 索引暂停和播放多个 HTML5 视频？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10019379/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
pausing and playing multiple HTML5 videos using jQuery get(0) indexing?
提问by Adam
I have a page of several videos. One can click a thumbnail to play each video. The problem is for that for greater than 2 videos, the clicking on the 3rd thumbnail doesn't pause the 2nd video so I get 2 videos playing at the same time. I'm also using a fadeOut()to toggle the visibility of each video and this works fine regardless of the number of videos. Therefore, I think the issue is with the get(0)part of the code.
我有一个包含多个视频的页面。可以单击缩略图来播放每个视频。问题是对于 2 个以上的视频，点击第三个缩略图不会暂停第二个视频，所以我同时播放 2 个视频。我还使用 afadeOut()来切换每个视频的可见性，无论视频数量如何，这都可以正常工作。因此，我认为问题get(0)出在代码部分。
here's a jsfiddle that displays the problem: http://jsfiddle.net/trpeters1/EyZdy/28/
这是一个显示问题的 jsfiddle：http: //jsfiddle.net/trpeters1/EyZdy/28/
Additionally, here's a more verbose block of code that should make the problem clear:
此外，这里有一个更冗长的代码块，应该可以清楚地说明问题：
$(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();
});
});
});
and the html:
和 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>
回答by Scott Hamper
When you do the following:
当您执行以下操作时：
$('.video_2,.video_3,.video_4,.video_5,.video_6').get(0)
the "get(0)" returns the first element that matches the selector - in this case, just the first element that matches ".video_2". The rest of the videos are ignored. To do an action on all of the selected elements, check out jQuery's "each()" method. Also, you can simplify your code down to a more generic approach by doing something like this:
“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>
And then hooking up JS by doing something like this:
然后通过执行以下操作来连接 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();
});
I've just typed this from my head, but hopefully it will put you in the right direction.
我刚刚从我的脑海中输入了这个，但希望它能让你朝着正确的方向前进。
回答by tim peterson
thanks P1aincloth3sM4n, i followed what you said about reseting all videos and making a more generalizable solution, for those interested please see the following working jsfiddle: http://jsfiddle.net/trpeters1/EyZdy/52
感谢 P1aincloth3sM4n，我按照您所说的重置所有视频并制作更通用的解决方案，对于那些感兴趣的人，请参阅以下工作 jsfiddle：http: //jsfiddle.net/trpeters1/EyZdy/52
回答by eudard
Easy solution to play only one HTML5 video element on page using JQUERY:
使用 JQUERY 在页面上仅播放一个 HTML5 视频元素的简单解决方案：
$(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);
});
});
