网上查了100种方法，99种都是错的，不会看的小弟们看过来
第一步：
创建flv.js播放
itemData传的是一个数组
async dataplayer(itemData) {
let that=this
这里是每次点击左侧设备的时候，清除一下内存，以及cpu过高等问题
this.players.forEach((item) => {
item.unload();
item = null;
});
this.$nextTick(() => {
因为我这里是拿的一个数组，所以需要做循环
itemData.forEach((item, index) => {
if (item != 'null') {
if (flvjs.isSupported()) {
这里开始创建
let player = this.players;
let videoElement = document.getElementById('video' + index);
player = flvjs.createPlayer(
{
type: 'flv', //=> 媒体类型 flv 或 mp4
isLive: true,
hasAudio: false,
url: item.url //=> 视频流地址
},
{
enableWorker: false, //不启用分离线程
enableStashBuffer: false, //关闭IO隐藏缓冲区
reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
autoCleanupSourceBuffer: true //自动清除缓存
}
);
player.attachMediaElement(videoElement); //=> 绑DOM
if (item.url !== '' && item.url !== null) {
player.load();
player.play();
}
获取时间跟不上帧数的问题
setInterval(() => {
if (videoElement.buffered.length) {
let end = videoElement.buffered.end(0); //获取当前buffered值
let diff = end - videoElement.currentTime; //获取buffered与currentTime的差值
if (diff >= 0.5) {
//如果差值大于等于0.5 手动跳帧 这里可根据自身需求来定
videoElement.currentTime = videoElement.buffered.end(0); //手动跳帧
}
}
}, 2000); //2000毫秒执行一次
//定时方法是为了用户离开页面视频是实时播放的,暂停按钮无用
// setInterval(() => {
// // console.log(videoElement.buffered,"idididid");
// if (videoElement.buffered.length > 0) {
// const end = videoElement.buffered.end(0); // 视频结尾时间
// const current = videoElement.currentTime; // 视频当前时间
// const diff = end - current; // 相差时间
// // console.log(diff);
// const diffCritical = 4; // 这里设定了超过4秒以上就进行跳转
// const diffSpeedUp = 1; // 这里设置了超过1秒以上则进行视频加速播放
// const maxPlaybackRate = 4; // 自定义设置允许的最大播放速度
// let playbackRate = 1.0; // 播放速度
// if (diff > diffCritical) {
// // this.flvPlayer.load();
// // console.log("相差超过4秒，进行跳转");
// videoElement.currentTime = end - 1.5;
// playbackRate = Math.max(1, Math.min(diffCritical, 16));
// } else if (diff > diffSpeedUp) {
// // console.log("相差超过1秒，进行加速");
// playbackRate = Math.max(1, Math.min(diff, maxPlaybackRate, 16));
// }
// videoElement.playbackRate = playbackRate;
// if (videoElement.paused) {
// videoElement.play();
// }
// }
// }, 1000);
也是同样的监听，按我这么写就完了
player.on(flvjs.Events.ERROR, (errorInfo, errType, errDetail) => {
if (errorInfo.code == 404) {
this.$message.error('流媒体代理服务未找到，请检查');
}
if (player) {
that.reloadVideo(player);
}
});
这里做监听
player.on('statistics_info', function (res) {
if (this.lastDecodedFrame == 0) {
this.lastDecodedFrame = res.decodedFrames;
return;
}
if (this.lastDecodedFrame != res.decodedFrames) {
this.lastDecodedFrame = res.decodedFrames;
} else {
this.lastDecodedFrame = 0;
if (player) {
这块调用底下的两个方法去重新调用渲染组件
that.reloadVideo(player)
}
}
});
将每一个播放器都放到一个数组
this.players.push(player);
} else {
this.$message.error('不支持flv格式视频');
}
}
this.$forceUpdate();
});
});
},
reloadVideo(flvPlayer) {
this.destoryVideo(flvPlayer);
let spl = this.spilt;
if (spl == 1) {
this.dataplayer(this.firstping);
} else if (spl == 4) {
this.dataplayer(this.secendping);
} else {
this.dataplayer(this.threeping);
}
},
destoryVideo(flvPlayer) {
flvPlayer.pause();
flvPlayer.unload();
flvPlayer.detachMediaElement();
flvPlayer.destroy();
flvPlayer = null;
},
我这里使用9宫格，各位可以看看
<video
:id="'video' + i"
ref="videoElement"
style="width: 100%; height: 100%; object-fit: fill"
controls
autoplay
muted
>
<!-- <i class="el-icon-close"></i> -->
</video>
