基于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)
    }
  },

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