随着各大电信运营商网络带宽的升级，网站中的视频已经变得越来越普遍了，在网站制作过程中经常会遇到视频播放的问题，今天给大家分享多个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的内容可以是整个也可以是视频地址
还有一种用内嵌的iframe 关闭窗口他还是在播放，有不能控制他的播放所有替换整个内容
