一、安装依赖，执行一下命令
npm install --save flv.js
二、使用方法
1、html部分
<template>
<div>
<video id="videoElement" controls autoplay muted width="300px" height="200px">
</video>
<button @click="play">播放</button>
</div>
</template>
2、js部分
为方便大家复制，这里把JS部分的代码粘贴到这里：
import flvjs from 'flv.js'
export default {
data () {
return {
flvPlayer:null
}
},
mounted() {
if (flvjs.isSupported()) {
let videoElement = document.getElementById('videoElement'); //获取video的dom元素
if(videoElement){//添加一些必要的属性
videoElement.muted = true
videoElement.controls = true;
}
let flvPlayer = flvjs.createPlayer({
type: 'flv',
isLive: true,
hasAudio: false,
url: 'flv视频地址'// 自己的flv视频流
});
if(flvPlayer){
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load()
let playPromise = flvPlayer.play()
if(playPromise){
playPromise.then(()=>{
setTimeout(()=>{
flvPlayer.play()
},flvPlayer.lazyLoadMaxDuration*1000)
}).catch((e)=>{
flvPlayer.play()
})
}
}
}
},
methods:{
play () {
this.flvPlayer.play();
}
}
}
注意：
加载过程中可能会报错：Failed to read the ‘buffered’ property from ‘SourceBuffer’: This SourceBuffer has been removed
解决办法：
找到依赖：flv.js/src/core/mse-controller.js
找到appendMediaSegment(),_needCleanupSourceBuffer ()这两个方法,在方法中加入以下代码
if (!this._mediaSource || this._mediaSource.readyState !== 'open') { return; }
如下图所示：
