基于vue-cli3实现视频自动播放和监听播放进度

基于vue-cli3实现视频自动播放和监听播放结束

近期有个需求，大致内容是进入页面时自动播放一段视频，视频播放完毕，方可进行下一步操作，下面是我实现的过程。

视频路径一定要在public文件下，public 目录提供的是一个应急手段，当你通过绝对路径引用它时，留意应用将会部署到哪里。如果你的应用没有部署在域名的根部，那么你需要为你的 URL 配置 publicPath 前缀。
autoplay是否自动播放

<template>
<div>
<video id="media" v-if="!time"  src="视频路径" :autoplay="autoplay"></video>
<div v-else>
题目部分
</div>
</div>
</template>

在这里我判断视频是否播放完毕，来控制我答题是否显示

data () {
return {
time: false,
autoplay: true，
state: false
}
},
mounted () {
// 监听视频是否播放完毕
if (!this.state) {
document.getElementById('media').loop = false // 不设置视频循环播放
document.getElementById('media').addEventListener('ended', () => { //该视频播放是否已结束
this.time = !this.time
this.state = true
}, false)
}
},

以上是我实现过程，如有什么问题，欢迎在下面留言。

• 点赞
• 收藏
• 分享
• 文章举报