关于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的关上在主过程中， 不能封装在组件中关上