多個videod視訊同步播放
阿新 • • 發佈：2022-12-09
兩個video標籤
<video :src="vodelurl1.url" controls style="width: 100%; height: 230px;object-fit: cover;" id="videoid1" ></video>
state1.value = video1.value.readyState //0 = 沒有關於音訊/視訊是否就緒的資訊，1 = 關於音訊/視訊就緒的元資料 state2.value = video2.value.readyState //2 = 關於當前播放位置的資料是可用的，但沒有足夠的資料來播放下一幀/毫秒， //3 = 當前及至少下一幀的資料是可用的，4 = 可用資料足以開始播放 //播放 video1.value.addEventListener("play",function(e){ // video2.value.play() endPausePlay() }) video2.value.addEventListener("play",function(e){ // video1.value.play() endPausePlay() })
//暫停 video1.value.addEventListener("pause",function(e){ video2.value.pause() }) video2.value.addEventListener("pause",function(e){ video1.value.pause() })
//結束 video1.value.addEventListener("ended", function () { endPausePlay() }); video2.value.addEventListener("ended", function () { endPausePlay() });
interval.value = setInterval(cogradientPlay, "1000", "1"); } //同步播放視訊方法 const cogradientPlay=()=>{ if (state1.value == 4 && state2.value == 4) { video1.value.play() video2.value.play() if ( interval.value != "") { clearInterval( interval.value); } } } //播放完一個視訊,其它視訊每播放完繼續播放 const endPausePlay=()=>{ //判斷播放是否結束 if (!video1.value.ended) { //視訊沒播放完繼續播放 video1.value.play() }else{ //視訊播放完成暫停播放 video1.value.pause() }
if (!video2.value.ended) { //視訊沒播放完繼續播放 video2.value.play() }else{ //視訊播放完成暫停播放 video2.value.pause() } }
<video :src="vodelurl2.url" controls style="width: 100%; height: 230px;object-fit: cover;" id="videoid2" ></video>
js方法
//---video視訊同步播放----- const interval = ref()//定時器 const video1 = ref() //視訊1 const video2 = ref() //視訊2 const state1 = ref(0) //視訊1的readyState狀態值 const state2 = ref(0) //視訊2的readyState狀態值 //獲取vidoe標籤屬性方法 const videoTogetherPlay=()=>{ video1.value = document.getElementById("videoid1") video2.value = document.getElementById("videoid2")state1.value = video1.value.readyState //0 = 沒有關於音訊/視訊是否就緒的資訊，1 = 關於音訊/視訊就緒的元資料 state2.value = video2.value.readyState //2 = 關於當前播放位置的資料是可用的，但沒有足夠的資料來播放下一幀/毫秒， //3 = 當前及至少下一幀的資料是可用的，4 = 可用資料足以開始播放 //播放 video1.value.addEventListener("play",function(e){ // video2.value.play() endPausePlay() }) video2.value.addEventListener("play",function(e){ // video1.value.play() endPausePlay() })
//暫停 video1.value.addEventListener("pause",function(e){ video2.value.pause() }) video2.value.addEventListener("pause",function(e){ video1.value.pause() })
//結束 video1.value.addEventListener("ended", function () { endPausePlay() }); video2.value.addEventListener("ended", function () { endPausePlay() });
interval.value = setInterval(cogradientPlay, "1000", "1"); } //同步播放視訊方法 const cogradientPlay=()=>{ if (state1.value == 4 && state2.value == 4) { video1.value.play() video2.value.play() if ( interval.value != "") { clearInterval( interval.value); } } } //播放完一個視訊,其它視訊每播放完繼續播放 const endPausePlay=()=>{ //判斷播放是否結束 if (!video1.value.ended) { //視訊沒播放完繼續播放 video1.value.play() }else{ //視訊播放完成暫停播放 video1.value.pause() }
if (!video2.value.ended) { //視訊沒播放完繼續播放 video2.value.play() }else{ //視訊播放完成暫停播放 video2.value.pause() } }