需求
接入了视频监控，提供了.m3u8格式的视频播放地址，需要在自研的系统中接入播放地址，实现播放，且支持切换展示不同的监控视频
实现
方案
通过video.js实现，通过watch监听传入的url变化实现切换
代码
<template>
<div>
<video id="my-player" ref="videoRef" class="my-video" autoplay controls muted></video>
</div>
</template>
<script setup lang="ts">
import "video.js/dist/video-js.css";
import Videojs, { VideoJsPlayer, VideoJsPlayerOptions } from "video.js";
const props = defineProps<{
url: string;
options: VideoJsPlayerOptions;
}>();
let myPlayer: VideoJsPlayer;
const videoRef = ref();
const setUrl = (url?: string) => {
if (url) {
myPlayer?.src([
{
src: url
}
]);
}
};
onMounted(() => {
myPlayer = Videojs("my-player", { autoplay: true });
setUrl(props.url);
});
onBeforeUnmount(() => {
myPlayer?.dispose();
});
watch(
() => props.url,
v => {
setUrl(v);
}
);
</script>
<style lang="scss" scoped>
.my-video {
width: 100%;
height: 100%;
}
</style>
问题：H265格式不支持播放
实现比较简单，过程毫无痛点，在我以为万无一失的时候，不出意外的意外来了
项目经理说：一个列表中两个视频不支持播放，一个可以播放，不支持播放的视频在VLC播放其中可以播放
继而开始了痛苦的排查
承认是我的知识匮乏，尝试了n种不同播放器，发现一个都不行，终于开始怀疑是不是视频有问题，开始换方向搜索，百度说是有些视频不支持跨域需要加请求头，oh no，视频地址都是厂商提供的，按理来说肯定是支持播放的，这个答案被毙了
也不知道是不是脑子开了光还是啥，突然闪过m3u8是不是也有不同的格式，搜了一下，果然
解决方案
网上的思路大致分这几种：转码、安装插件等，也搜索了一些目前的解决方案（目前还没有尝试，是否有效） 如果还有什么其他好用方法欢迎大佬们留言
- github上也看到了相关的问题：看到别人的回答，编写一个 video.js 插件来播放 HEVC。请参阅#6811和github.com/coffe1891/v…
- EasyPlayer.js H5播放器，是一款能够同时支持HTTP、HTTP-FLV、HLS（m3u8）、WS视频直播与视频点播等多种协议，支持H.264、H.265、AAC等多种音视频编码格式，支持mse、wasm等多种解码方式，支持Windows、Linux、Android、iOS全平台终端的H5播放器，使用简单, 功能强大。
啊，美好的一天又结束了
