videoDialog.vue

<template>
  <!--新增弹框-->
  <el-dialog
    custom-class="party-dialog"
    title="视频详情"
    width="400px"
    :visible.sync="dialogVisible"
    :before-close="close"
    @contextmenu.prevent
  >
  <template v-if="videoList && videoList.length > 0"> 
  <span v-for="(item,index) in videoList" :key="index">
      <video
        :preload="preload"
        :poster="item.cover"
        :height="height"
        :width="width"
        align="center"
        controls controlsList='nodownload noremote footbar'
      >
        <source :src="item.fileUrl"  />
      </video>
      <span>&nbsp;&nbsp;&nbsp;&nbsp; </span>
    </span>
  </template>
  <template v-else>
    <div style="text-align:center;font-size:14px">未关联视频</div>
  </template>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      videoList:[],
      dialogVisible: false,
      // videoSrc: 'https://video.pearvideo.com/mp4/short/20200209/cont-1650197-14888002-hd.mp4',
      // videoImg: 'https://sm.ms/image/ueRFCZfk2xTONGb',
      videoSrc: "",
      videoImg: "",
      playStatus: "",
      muteStatus: "",
      isMute: true,
      isPlay: false,
     width: "320", // 设置视频播放器的显示宽度（以像素为单位）
      height: "200", // 设置视频播放器的显示高度（以像素为单位）
      preload: "auto", //  建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
      controls: true, // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
      autoplay: "",
    };
  },
  methods: {
    // 新增关闭
    close() {
      // 为防止关闭后继续播放
      this.videoList = []
      this.dialogVisible = false;
    },
  },
};
</script>

<style>
</style>