图片来源：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文章来源：https://www.toymoban.com/news/detail-628147.html
<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视频播放器文章来源地址https://www.toymoban.com/news/detail-628147.html
到了这里，关于【Vue】播放flv格式视频（flv.js视频播放器）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
