封装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的打开在主进程中， 不能封装在组件中打开