![flowplayer]( "flowplayer")
本文介绍了单击选项卡时将视频暂停/停止到选项卡中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个标签菜单(三个标签)，每个标签都有一个 html 视频(三个视频).
我的问题是当一个视频正在播放时，更改标签我可以播放另一个视频，但第一个继续播放.
当我点击一个标签时，我需要停止或暂停其他标签中的视频(如果正在播放)
这是选项卡式菜单代码:
<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>
和标签:
<div id="tab-1" class="tab-content"><div class="视频"><video id="video01" width="640" height="480" 控件><source src="video1.mp4" type="video/mp4"></视频>
<div id="tab-2" class="tab-content"><div class="视频"><video id="video02" width="640" height="480" 控件><source src="video2.mp4" type="video/mp4"></视频>
<div id="tab-3" class="tab-content"><div class="视频"><video id="video03" width="640" height="480" 控件><source src="video2.mp4" type="video/mp4"></视频>
有什么建议吗?提前致谢;-)
解决方案
我在可分页容器部分遇到了同样的问题.我在每个部分都使用了 Flowplayer 视频插件.我可以用以下代码解决这个问题:
/* 轮播中的视频播放器在点击下一个轮播项目时暂停*/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();});
I have a tabs menu (three tabs) with a html-video into each tab (three videos).
My problem is when one video is playing, changing tab I can play another video but the first continues playing.
When I click on a tab I need to stop or pause the videos from the other tabs (if are playing)
This is the tabbed menu code:
<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>
And the tabs:
<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>
Any suggestions? Thanks in advance ;-)
解决方案
I was facing the same problem within pageable container section's. I was using the Flowplayer video plugin within each section. I could solve the issue with following code:
/* 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();
});
这篇关于单击选项卡时将视频暂停/停止到选项卡中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！