当前位置：首页 > article >正文

Vue：加载本地视频

article 2024/9/23 10:25:07

封装视频弹框

<template>
  <el-dialog class="videoBox" :title="title" :visible.sync="visible" width="40%" :before-close="handleOnClose" :close-on-click-modal="false" :close-on-press-escape="false">
    <video id="video" controls preload autoplay="autoplay" style="width: 100%">
      <source :src="videoUrl" type="video/mp4">
    </video>
  </el-dialog>
</template>
<script>

export default {
  name: 'videoData',
  data() {
    return {
      // 标题
      title: null,
      // 是否显示弹框
      visible: false,
      // 视频地址
      videoUrl: null
    }
  },
  methods: {
    /**
     * 初始化视频
     */
    initVideo(){
      this.$nextTick(() => {
        let myVideo = document.getElementById('video')
        myVideo.pause()
        myVideo.load()
      });
    },
    /**
     * 取消
     */
    handleOnClose() {
      this.videoUrl = null
      this.visible = false
    },
  }
}
</script>
<style>
.videoBox .el-dialog__header {
  background-color: #000000;
}
.videoBox .el-dialog__header .el-dialog__title {
  color: #fff;
}
.videoBox .el-dialog__body {
  padding: 0 !important;
}
</style>

调用视频组件

/**
 * 视频查看
 * @param row
 */
handleVideo(row){
  this.$refs.videoData.title = '视频详情'
  this.$refs.videoData.visible = true
  this.$refs.videoData.videoUrl = row.wzsp + '?t=' + new Date().valueOf()
  this.$refs.videoData.initVideo()
},