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

2023-03-04 分类：网站建设

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

视频播放

第一种情况：
当在一个页面中放置多个video标签时，点击其中一个视频，当这个视频处于播放中时，再次点击其他视频，会发现上一个视频仍然在播放。
我们要实现的需求就是在点击一个视频播放时，其他正在处理播放的视频自动停止。
只需一段js即可搞定。

第二种情况：
当点击某个视频的时候用弹窗形式播放视频，这里介绍的是用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的内容可以是整个也可以是视频地址

名称栏目：多个video视频如何控制播当前视频
新闻来源：https://www.cdcxhl.com/news/241429.html

成都网站建设公司_创新互联，为您提供品牌网站设计、搜索引擎优化、网站建设、网站排名、移动网站建设、做网站

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

猜你还喜欢下面的内容