vue3环境下修改我的代码,让他播完第一个视频继续播放第二个视频,播完第二个视频继续播放第三个视频
时间: 2023-08-05 08:39:43 浏览: 69
你可以通过以下的代码实现你的需求:
```
<template>
<div>
<video ref="videoPlayer" @ended="playNextVideo">
<source :src="currentVideoSrc" type="video/mp4">
</video>
</div>
</template>
<script>
export default {
data() {
return {
currentVideoIndex: 0, // 当前播放的视频索引
videoList: [ // 视频列表
{
src: 'video1.mp4'
},
{
src: 'video2.mp4'
},
{
src: 'video3.mp4'
}
]
}
},
computed: {
currentVideoSrc() {
return this.videoList[this.currentVideoIndex].src
}
},
mounted() {
this.$refs.videoPlayer.play()
},
methods: {
playNextVideo() {
this.currentVideoIndex++
if (this.currentVideoIndex >= this.videoList.length) {
this.currentVideoIndex = 0
}
this.$refs.videoPlayer.src = this.currentVideoSrc
this.$refs.videoPlayer.play()
}
}
}
</script>
```
以上代码通过监听视频的 `ended` 事件来判断当前视频播放完成后自动播放下一个视频,当播放到最后一个视频时,重新从第一个视频开始播放。
在模板中使用 `video` 标签来播放视频,通过 `ref` 属性来获取视频元素的引用,通过 `v-bind:src` 动态绑定视频源地址。在 `mounted` 钩子函数中,调用 `play` 方法来播放视频。
在 `playNextVideo` 方法中,首先判断当前视频是否是最后一个,如果是,将 `currentVideoIndex` 重置为 0,否则将 `currentVideoIndex` 自增 1。然后将 `video` 标签的 `src` 属性设置为当前视频的源地址,最后调用 `play` 方法来播放视频。
这样就可以实现连续播放多个视频的需求了。