多个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()

    }

}