vue播放flv视频流
简介：flv.js是 HTML5 Flash 视频（FLV）播放器，纯原生 JavaScript 开发，没有用到 Flash。由 bilibili 网站开源。
开源地址: https://github.com/Bilibili/flv.js/
1、安装依赖
npm install --save flv.js
2、页面引入插件
import flvjs from 'flv.js'
3、完整代码
<!-- flv格式 -->
<template><div><videoid="myPlayer"class="video-js vjs-default-skin"controlspreload="auto"></video></div>
</template><script>
import flvjs from "flv.js";
export default {name: "videoFlv",data() {return {url: "/flv/source.flv",videoExample: null,};},created() {},mounted() {this.$nextTick(() => {this.getVideo();});},beforeDestroy() {this.videoDestroy();},methods: {getVideo() {if (flvjs.isSupported()) {const videoElement = document.getElementById("myPlayer");this.videoExample = flvjs.createPlayer({type: "flv", //类型isLive: true, //是否实时流// url: '/flv/source.flv', //路径url: this.videoUrl, //路径// segments: [], //多段播放});this.videoExample.attachMediaElement(videoElement);this.videoExample.load();this.videoExample.play();}},// 销毁实例videoDestroy() {if (this.videoExample) {this.videoExample.pause();this.videoExample.unload();this.videoExample.detachMediaElement();this.videoExample.destroy();this.videoExample = null;}},},
};
</script><style lang="less" scoped></style>
参考：
https://blog.csdn.net/weixin_43883951/article/details/131065700
https://blog.csdn.net/weixin_51714170/article/details/128060019?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_baidulandingword~default-0-128060019-blog-127852222.235v43control&spm=1001.2101.3001.4242.1&utm_relevant_index=3