两个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() });
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() } } 标签：视频,video1,video2,value,videod,const,播放 From： https://www.cnblogs.com/fenxiangboke/p/16968726.html