多个video视频如何控制播当前视频(多个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的内容可以是整个也可以是视频地址
还有一种用内嵌的iframe 关闭窗口他还是在播放，有不能控制他的播放所有替换整个内容
以上就是关于多个video视频如何控制播当前视频(多个video视频只允许播放一个)，希望对你有帮助，更多内容关注蓝港网络。

　　非常感谢您读完蓝港网络的这篇文章："多个video视频如何控制播当前视频(多个video视频只允许播放一个)"，仅为提供更多信息供用户参考使用或为学习交流的方便。我们公司提供：网站建设、网站制作、官网建设、SEO优化、小程序制作等服务，欢迎联系我们提供您的需求。