图片来源：HTTP-FLV直播初探
链接
github地址：GitHub - bilibili/flv.js: HTML5 FLV Player
播放flv格式视频
npm install flv.js --save
封装一个组件flvVideo
<template><div class="video"><video ref="videoElement" controls autoplay muted v-if="!error"></video><div class="error" v-else>视频播放错误！</div></div>
</template><script>
import flvjs from "flv.js";
export default {name: "flvVideo",props: ["url", "height", "destroy"], // 视频流路径，播放器高度，是否销毁播放器data() {return {flvPlayer: "",error: false,};},mounted() {this.$nextTick(() => {this.init(this.url)});},methods: {init(source) {if (flvjs.isSupported()) {this.flvPlayer = flvjs.createPlayer({type: 'flv', //flv格式isLive: true, //直播模式hasVideo: true, //视频开启url: source,// hasAudio: true, //音频开启enableStashBuffer: false, //设置启用播放缓存，只在直播起作用（降低延迟）。关闭IO隐藏缓冲区// enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.js。不启用分离线程// reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。// autoCleanupSourceBuffer: true, //自动清除缓存});this.flvPlayer.attachMediaElement(this.$refs.videoElement);this.flvPlayer.load();this.flvPlayer.play();// 加载完成this.flvPlayer.on(flvjs.Events.LOADING_COMPLETE, () => {this.error = false;});// 加载失败this.flvPlayer.on(flvjs.Events.ERROR, () => {this.error = true;},(error) => {console.log(error);});} else {this.error = true;}},// 销毁detachMediaElement() {this.flvPlayer.pause();this.flvPlayer.unload();this.flvPlayer.detachMediaElement();this.flvPlayer.destroy();this.flvPlayer = "";},// 播放play () {this.flvPlayer.play();}},watch: {// 更换流url() {this.error = false;this.flvPlayer == "" ? "" : this.detachMediaElement(); // 切换流之前，判断之前的流是否销毁this.init(this.url);},// 开关值destroy() {if (this.destroy) {this.init(this.url);} else {this.flvPlayer == "" ? "" : this.detachMediaElement();}},},beforeDestroy() {this.detachMediaElement();},
};
</script><style scoped>
.video {position: relative;height: 100%;
}
video {width: 100%;height: 100%;object-fit: fill;
}
.error {position: absolute;top: 30%;left: 50%;margin-left: -120px;text-align: center;color: #00fdff;font-weight: bold;font-size: 1.2em;
}</style>hasAudio设置为true就不展示。。。不知道为啥~
home.vue
<flv-video height="240px" :url="url" ></flv-video>import flvVideo from "@/components/flvVideo"
components: { "flv-video": flvVideo },data() {return {url:'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv'}
}参考：Vue 中使用flv.js视频播放器
