多个videod视频同步播放
两个video标签
<video :src="vodelurl1.url" controls style="width: 100%; height: 230px;object-fit: cover;" id="videoid1" ></video>
<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()
});
//使用事件监听方式捕捉事件， 此事件可作为实时监测video 播放状态
video1.value.addEventListener("timeupdate",function(){
var durantion_lng=Math.floor(video1.value.duration) //获取视频时长(秒)
var timeDisplay = Math.floor(video1.value.currentTime); //当前播放时间(秒)
},false);
video2.value.addEventListener("timeupdate",function(){
var durantion_lng= Math.floor(video2.value.duration)
var timeDisplay = Math.floor(video2.value.currentTime);
},false);
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()
}
}
