1.以前有个老项目用的flash，由于现在谷歌不支持flash故而更改用http流，采用flv.js来加载 .flv。由于视频长期播放会出现视频延时或者卡顿断流，本文就解决此问题。
2.引入flv.js
import flv from 'flv.js'
3.根据github.com中flv.js的介绍，以及相关配置，可以配置相关一些内容：地址：https://github.com/bilibili/flv.js/blob/master/docs/api.md，可根据项目自行配置。以下是个人配置：
let flvPlayer
let videoElement = window.document.getElementById(id)//video的id
flvPlayer = flv.createPlayer({
type: 'flv',// 指定视频类型
url: relUrl, // 指定流链接
"isLive": isLive,// 开启直播
hasAudio: false, // 关闭声音
cors: true, // 开启跨域访问
duration:0,
currentTime:0,
},{
autoCleanupSourceBuffer:true,//对SourceBuffer进行自动清理
autoCleanupMaxBackwardDuration:12,// 当向后缓冲区持续时间超过此值（以秒为单位）时，请对SourceBuffer进行自动清理
autoCleanupMinBackwardDuration:8,//指示进行自动清除时为反向缓冲区保留的持续时间（以秒为单位）。
enableStashBuffer: false, //关闭IO隐藏缓冲区
isLive: true,
lazyLoad: false,
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
4.上面配置好后，我们可以正常开始直播，但是由于视频会延时，为保证实时性，可以做跳帧操作
//用于视频延时，超过1分钟，就关闭当前流且重新拉流； 每2s循环监听一次
let timer =setInterval(() => { // ->注意：这里的定时器，在中断视频时，要清理哦
if (flvPlayer.buffered && flvPlayer.buffered.length) {
let end = flvPlayer.buffered.end(0);//获取当前buffered值
let diff = end - flvPlayer.currentTime;//获取buffered与currentTime的差值
if (diff >= 60) {//如果差值大于等于60s 手动跳帧 这里可根据自身需求来定
//单个视频用
// flvPlayer.currentTime = end;//手动跳帧
// flvPlayer.currentTime = flvPlayer.buffered.end(0);//手动跳帧
//多个视频用
clearInterval(timer)
flvPlayer.pause();
flvPlayer.unload();
flvPlayer.detachMediaElement();
flvPlayer.destroy();
flvPlayer= null;
//重新加载当前停止的视频流，根据个人的方法来配置
player(id ,relUrl ,isLive, cameraId)
}
}
}, 2000); //2000毫秒执行一次
5.延时的问题通过跳帧的方法解决了，但是如果视频卡顿导致流断了，那就重连，如下
flvPlayer.on(flv.Events.ERROR, (errorType, errorDetail, errorInfo) => {
//视频出错后销毁重新创建
if (flvPlayer) {
clearInterval(timer)
flvPlayer.pause();
flvPlayer.unload();
flvPlayer.detachMediaElement();
flvPlayer.destroy();
flvPlayer= null;
//重新加载当前停止的视频流，根据个人的方法来配置
player(id ,relUrl ,isLive, cameraId)
}
});
