Vue-vedio实现自定义自动播放

一般情况下，vedio标签自动播放只需要添加autoplay属性即可，添加autoplay属性的vedio，视频在就绪后就马上播放

<video autoplay >
   <source src="@/assets/example.mp4" type="" />
</video>

自定义自动播放

需求描述：添加一个播放按钮，在点击按钮后按钮消失，视频自动播放

初步想法：动态控制autoplay属性

<el-button plain icon="el-icon-caret-right" @click="isOpen = true" v-show="!isOpen">
</el-button>
<video :autoplay="isOpen" >
   <source src="@/assets/example.mp4" type="" />
</video>


<script>
export default {
data(){
    return{
        isOpen:false
    }
}
}
</script>

测试结果：点击后按钮消息，但视频没有自动播放 

最终想法：动态控制control，点击按钮后直接使用play()方法让vedio播放

<el-button
   plain
   icon="el-icon-caret-right"
   @click="openVedio"
   v-show="!isOpen"
></el-button>
<video :controls="isOpen" ref="videoPlayer">
   <source src="@/assets/example.mp4" type="" />
</video>

<script>
export default {
  data() {
    return {
        isOpen:false
    }
  },
  methods:{
    openVedio() {
      this.isOpen = true;
      this.$refs.videoPlayer.play();
    },
  }
}

测试成功！