vue中使用h5 video标签实现弹窗播放本地视频

参考h5 < video >标签的用法

在开发过程中主要涉及到以下几个需要关注的点

1.弹窗的打开关闭

父组件中使用.sync绑定visible属性，可直接在子组件中关闭弹窗更新父组件传入的visible值；

// 父组件中引用子组件
<video-modal :visible.sync="showVideoModal">

// 子组件中
<el-dialog :visible="visible" @close="closeModal"> 

// 子组件中关闭弹窗方法
closeModal() {
    this.$emit("updata:visible", false);
} 

不过这样使用会导致每次重新打开视频弹窗进度条都会留在上一次打开的位置，所以需要在引用子组件外再嵌套一个div，利用v-if使其每次打开都重新渲染，从而解决进度条缓存的问题；

<div v-if="showVideoModal">
    <video-modal :visible.sync="showVideoModal">
</div> 

2. 本地视频资源路径的引入

需要播放的视频是项目中的静态资源，由于弹窗组件需要支持可复用，所以视频路径不可写死，下面示例为视频名称自定义；

<video
    ref="video"
    class="play-video"
    controls="controls"
    autoplay="autoplay"
>
    <source :src="require('@/assets/videos/' + videoName + '.mp4')" type="video/mp4" />
</video>