[英]pausing and playing multiple HTML5 videos using jQuery get(0) indexing?
我有幾個視頻的頁面。 可以單擊縮略圖來播放每個視頻。 問題是對於超過 2 個視頻,點擊第 3 個縮略圖不會暫停第 2 個視頻,所以我同時播放了 2 個視頻。 我還使用fadeOut()
來切換每個視頻的可見性,無論視頻數量如何,它都可以正常工作。 因此,我認為問題出在代碼的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>
當您執行以下操作時:
$('.video_2,.video_3,.video_4,.video_5,.video_6').get(0)
“get(0)”返回匹配選擇器的第一個元素——在本例中,只是匹配“.video_2”的第一個元素。 視頻的 rest 被忽略。 要對所有選定元素執行操作,請查看 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();
});
我剛剛從腦海中輸入了這個,但希望它能讓你朝着正確的方向前進。
謝謝 P1aincloth3sM4n,我按照你所說的重置所有視頻並制定更通用的解決方案,對於那些感興趣的人,請參閱以下工作 jsfiddle: http://jsfiddle.net/trpeters1/EyZdy/52
使用 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);
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.