vue中video标签实现视频预览

最新推荐文章于 2024-06-13 15:47:27 发布

weixin_45861491

最新推荐文章于 2024-06-13 15:47:27 发布

阅读量2.1k

点赞数

分类专栏： java 视频video vue 文章标签： java vue vue.js

本文链接：https://blog.csdn.net/weixin_45861491/article/details/126096221

版权

java 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

视频video

1 篇文章 0 订阅

订阅专栏

vue

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在 Vue.js 应用中使用 video 标签实现视频预览，包括设置视频源、控制属性及禁用右键菜单等功能。通过组件的方式展示了相关属性如 `poster`、`src` 和 `controls` 的使用，并在 `created` 生命周期钩子中调用 `getTime` 和 `getList` 方法来初始化视频操作。

摘要由CSDN通过智能技术生成

vue中video标签实现视频预览

<el-form-item label="音频" prop="" label-width="130px"/>
          <video
          ref="myVideo"
          :poster="poster"
          :src="form.willUserAudio"
          :controls="controls"
          oncontextmenu="return false"
          controlslist="nodownload"
          class="video-box"
        ></video>

props: {
      poster: {
        type: String,
        required: false,
        default: ""
      },
      src: {
        type: String,
        required: true
      },
      controls: {
        type: Boolean,
        required: false,
        default: true
      },
      control: {
        type: Boolean,
        required: false,
        default: false
      },
      videoData: {
        type: Object,
        required: true
      }
    },

    created() {
      this.getTime();
      this.getList();
    },