多个video视频如何控制播当前视频

随着各大电信运营商网络带宽的升级，网站中的视频已经变得越来越普遍了，在网站制作过程中经常会遇到视频播放的问题，今天给大家分享多个video视频如何控制播当前视频的方法。

第一种情况：
当在一个页面中放置多个video标签时，点击其中一个视频，当这个视频处于播放中时，再次点击其他视频，会发现上一个视频仍然在播放。
我们要实现的需求就是在点击一个视频播放时，其他正在处理播放的视频自动停止。
只需一段js即可搞定。
<script>
var videos = document.getElementsByTagName('video');
for (var i = videos.length - 1; i >= 0; i--) {
(function () {
var p = i;
videos[p].addEventListener('play', function () {
pauseAll(p);
})
})()
}
function pauseAll(index) {
for (var j = videos.length - 1; j >= 0; j--) {
if (j != index) videos[j].pause();
}
}</script>

第二种情况：
当点击某个视频的时候用弹窗形式播放视频，这里介绍的是用js动态的加载video内容具体视频内容可以通过ajax后台获取:
function add_video(ts,id){
ts.parent().find('.video-tc').show();//弹窗
that=ts.parent().find('.boxs'); //视频容器(具体看页面布局)；
$.ajax({
url: url_video,
type:"POST",
data:{"id":id},
success: function(val) {
that.append(val)//加载video内容
}
});
}
加载有了下一步要关闭视频
$(".video-tc .close").click(function () {
$(".video-tc").hide();
$(this).siblings().remove();//删除视频内容
})
这里为什么要删除视频内容如果全是video内容并且每个video都是独立的我们只需停止当前video就可以
var myVideo = document.getElementsByTagName('video')[0]; //获取视频video
if (myVideo.paused){
myVideo.play();
}else{
myVideo.pause();
}

新闻名称：多个video视频如何控制播当前视频
文章链接：https://www.cdcxhl.com/news29/241429.html

成都网站建设公司_创新互联，为您提供云服务器、网站收录、网站导航、外贸网站建设、营销型网站建设、自适应网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联