vue 项目中点击弹窗后实现视频播放（包含关闭弹窗视频暂停）

背景

vue 项目使用 antd vue 的 Modal 弹窗 ，点击事件触发后，弹窗播放视频，播放视频使用 video 标签

video相关属性

---

补充：

video 标签内可以添加 source 标签

Source标 签用于媒体（因为audio标签同样可以包含此标签，所以这儿用媒体，而不是视频）指定多个可选择的（浏览器最终只能选一个）文件地址，且只能在媒体标签没有使用 src 属性时使用。

浏览器按 source 标签的顺序检测标签指定的视频是否能够播放（可能是视频格式不支持，视频不存在等等），如果不能播放，换下一个。此方法多用于兼容不同的浏览器。Source 标签本身不代表任何含义，不能单独出现。

代码实现

简单思路

通过ref的使用得到video标签身上的属性及方法，然后加以控制（播放和暂停）

template

 // 我是给图片标签绑定点击事件，这个大家根据自己的需求更改
<img :src="record.video "  @click="SeeVideo"  width="200">
 <a-modal
    title="预览视频"
    :width="600"
    :visible="viewVideo"
    :footer="null"
    @cancel="handleCancel"
 >
// videoUrl 为视频链接
      <video
          :src="this.videoUrl"
           width="500"
           autoplay="autoplay"
           controls="controls"
           :state="viewVideo"
           ref="vueRef"
      ></video>
 </a-modal>

script

  // data
  // 弹窗展示状态 默认false
    viewVideo:false,
  // 视频链接   这个大家可以写上自己的视频地址
   videoUrl:'',


  // methods
   // 预览视频
    SeeVideo(){
     this.viewVideo = true
     this.$refs.vueRef.play();//播放  
    },

    // 取消预览
    handleCancel(e) {
      this.viewVideo = false;
      this.$refs.vueRef.pause();//暂停
    },

---

 像这样就可以实现点击之后，打开弹窗实现视频播放了

---

文章如有错误，恳请大家提出问题，本人不胜感激 。 不懂的地方可以评论，我都会 一 一 回复

文章对大家有帮助的话，希望大家能动手点赞鼓励，大家未来一起努力     长路漫漫，道阻且长