多個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視頻如何控制播當前視頻
新聞來源：http://m.kartarina.com/news/241429.html

成都網站建設公司_創新互聯，為您提供品牌網站設計、搜索引擎優化、網站建設、網站排名、移動網站建設、做網站

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容