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

这篇具有很好参考价值的文章主要介绍了vue 项目中点击弹窗后实现视频播放（包含关闭弹窗视频暂停）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

背景

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

video相关属性

vue 项目中点击弹窗后实现视频播放（包含关闭弹窗视频暂停）,vue,vue.js,javascript,前端

补充：

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();//暂停
    },

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

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

文章对大家有帮助的话，希望大家能动手点赞鼓励，大家未来一起努力长路漫漫，道阻且长文章来源地址https://www.toymoban.com/news/detail-580323.html

到了这里，关于vue 项目中点击弹窗后实现视频播放（包含关闭弹窗视频暂停）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！