我有一个标签菜单(三个标签页),每个标签都有一个html-video(三个视频)。
我的问题是当一个视频播放时,更改标签我可以播放另一个视频,但第一个继续播放。
当我点击标签时,我需要停止或暂停其他标签中的视频(如果正在播放)
这是标签式菜单代码:
<ul class="tabs-menu">
<li class="current"><a href="#tab-1">Video1</a></li>
<li><a href="#tab-2">Video2</a></li>
<li><a href="#tab-3">Video3</a></li>
</ul>
标签:
<div class="tab">
<div id="tab-1" class="tab-content">
<div class="video">
<video id="video01" width="640" height="480" controls>
<source src="video1.mp4" type="video/mp4">
</video>
</div>
<div id="tab-2" class="tab-content">
<div class="video">
<video id="video02" width="640" height="480" controls>
<source src="video2.mp4" type="video/mp4">
</video>
</div>
</div>
<div id="tab-3" class="tab-content">
<div class="video">
<video id="video03" width="640" height="480" controls>
<source src="video2.mp4" type="video/mp4">
</video>
</div>
</div>
有什么建议吗?提前致谢; - )
答案 0 :(得分:0)
单击选项卡时,会暂停所有选项卡的所有3个视频 ,然后启动属于实际选项卡的视频。 类似的内容:
{{1}}
答案 1 :(得分:0)
这是&#34;链接&#34;的代码。在标签页(javascript)中:
$(document).ready(function() {
$(".tabs-menu a").click(function(event) {
document.querySelector('#myvideo').pause();
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).fadeIn();
});
});
这里我介绍了一条线,当我点击另一个标签时暂停第一个视频(#myvideo)。我可以使用多个ID吗?
答案 2 :(得分:0)
我在可分页的容器部分中遇到了同样的问题。我在每个部分都使用Flowplayer视频插件。我可以用以下代码解决问题:
/* video player in carousel to pause on click on next carousel item */
jQuery("ul.vc_pagination li.vc_pagination-item").not('.vc_active').find('a').click(function() {
var vid_id = jQuery('.vc_tta-panels .vc_tta-panel.vc_active .flowplayer-video').attr('id');
flowplayer('#' + vid_id + '').pause();
});