关于vue.js:封装h5-video-视频播放器vue-组件弹框的形式弹出子组件video

h5 video 标签只能播放三种视频格式：
MP4 = MPEG 4 文件应用 H264 视频编解码器和 AAC 音频编解码器
WebM = WebM 文件应用 VP8 视频编解码器和 Vorbis 音频编解码器
Ogg = Ogg 文件应用 Theora 视频编解码器和 Vorbis 音频编解码器
*

* 通过下面的信息咱们会发现只有 h264 编码的 MP4 视频（MPEG-LA 公司）、VP8 编码的 webm 格局的视频（Google 公司）和 Theora 编码的 ogg 格局的视频（iTouch 开发）能够反对 html5 的 <video> 标签。*

*
1. 封装的子组件：

<template> 

  <div style="width:100%;height: 300px;">
  <!-- MP4    WebM  Ogg -->
    <video controls style="width:100%;height:100%;"  v-if="okPlay"> 
      <source :src="previewVideoUrl" @error="loadError" />
      您的浏览器不反对播放。</video>
    <div v-else style="width:100%;height:100%;">
      <p><a :href="previewVideoUrl"> 点击查看 </a></p>
      <!-- <div class="player-error"></div> -->
      <el-image 
        style="width:100%;height:90%;overflow-x:scroll"
        src="@assets/images/player-error.png"
        fit="contain"
        >
      </el-image>
    </div>
  
  </div>

</template>
<script>
import {ref} from "vue";

export default {
  name: "HyVideoPlayer",
  props:{previewVideoUrl: String},
  setup(props, context){const okPlay = ref(true)
    const loadError = ()=>{   // 管制加载失败时，显示默认图片
      console.log("load audio error")
      okPlay.value = false
    }
    return {
      okPlay,
      loadError
    }

  },
 </script>

当浏览器不反对 video 时，会提醒 ” 您的浏览器不反对播放。”
当视频文件不存在或不反对播放时 (如 flv 格局)，在 @error 事件上抓取到

2. 父组件调用：

 <el-dialog
    v-model="showPreviewVideo"
    width="33%"
    destroy-on-close
    >
    <hy-video-player 
      :preview-video-url="previewVideoUrl"
    /> 
  </el-dialog> 

el-dialog 在敞开是销毁外面的元素，destroy-on-close 属性，必须保障 dialog 的关上在主过程中，不能封装在组件中关上