隨著各大電信運營商網(wǎng)絡帶寬的升級，網(wǎng)站中的視頻已經(jīng)變得越來越普遍了，在網(wǎng)站制作過程中經(jīng)常會遇到視頻播放的問題，今天給大家分享多個video視頻如何控制播當前視頻的方法。
 

第一種情況：

當在一個頁面中放置多個video標簽時，點擊其中一個視頻，當這個視頻處于播放中時，再次點擊其他視頻，會發(fā)現(xiàn)上一個視頻仍然在播放。
我們要實現(xiàn)的需求就是在點擊一個視頻播放時，其他正在處理播放的視頻自動停止。
只需一段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動態(tài)的加載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 關閉窗口他還是在播放，有不能控制他的播放所有替換整個內容