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