实例代码:
<template>
<div>
<video ref="videoPlayer" :src="currentVideo" autoplay controls @ended="playNextVideo"></video>
</div>
</template>
data() {
return {
videoList: [
"视频地址1",
"视频地址2",
"视频地址3"
],
// 视频下标的索引
currentIndex: 0,
// 定时器
timer: null
};
},
computed: {
// 返回当前视频的信息。
//访问videoList数组和currentIndex变量来获取当前视频的信息
currentVideo() {
// 视频的下标
return this.videoList[this.currentIndex];
}
},
mounted() {
this.startPlayback();
},
destroyed() {
clearTimeout(this.timer);
},
methods: {
// 用于播放下一个视频
playNextVideo() {
// 当前视频的索引。它会递增1,表示要播放下一个视频。
this.currentIndex++;
/*
,如果currentIndex超过了videoList中视频的数量,即currentIndex >= videoList.length,
说明已经播放到了最后一个视频,此时将currentIndex置为0,表示重新从第一个视频开始播放。
*/
if (this.currentIndex >= this.videoList.length) {
this.currentIndex = 0;
}
// 获取视频标签
const videoElement = this.$refs.videoPlayer
// 把视频标签 里的 视频地址清空
videoElement.src = ''
// 添加事件监听器
// ended 事件是 HTML5 视频元素(<video>)的一个事件,它在视频播放结束时触发。 可以实现 移动端自动循环播放
videoElement.addEventListener('ended', () => {
this.startPlayback()
})
},
startPlayback() {
// 取消定时器
clearTimeout(this.timer)
// 获取当前视频元素
const videoElement = this.$refs.videoPlayer
// 添加判断 如果里边没数据则重新加载
if (videoElement !== undefined) {
videoElement.addEventListener('canplay', () => {
this.timer = setTimeout(() => {
this.playNextVideo()
}, videoElement.duration * 1000)
console.log('视频已加载完成')
})
// 清除原始源
videoElement.src = ''
// 在清除原始源后重新加载视频
videoElement.load()
// 在加载完成后播放视频
videoElement.addEventListener('loadeddata', () => {
videoElement.play()
})
} else {
console.log('未找到视频元素')
}
}
};