flv.js加载视频墙切换时报错如下
分析原因:
切换显示时报错例如:从图1切换到图2时,前四个视频流已经加载过一次,切换时,视频资源会二次加载
图1
图2
解决方案:
如下
export default {
data () {
return {
videoshow:4,//屏幕可显示的视频数量(1,4,6,9)
videoElementId:[], //video标签的id集合
videoClass:'video1',//分屏显示的video的样式
videoUrlShow:[],//显示在页面中的视频流的url
flvPlayer:[],//视频的flvPlayer对象的集合
videoUrl:[//后台请求的视频流的url
'ws://192.168.1.88/live/cam00001.flv',
'ws://192.168.1.88/live/cam00002.flv',
'ws://192.168.1.88/live/cam00004.flv',
'ws://192.168.1.88/live/cam00003.flv',
'ws://192.168.1.88/live/cam00001.flv'
],
}
},
mounted(){
let _this=this;
if(_this.videoUrl.length>0){//默认只显示第一个视频
_this.videoUrlShow[0]=_this.videoUrl[0];
}
setTimeout(() => {
for(let i=0;i<_this.videoUrlShow.length;i++){
_this.videoElementId[i]=document.querySelector("#videoElement"+i)
for(let i=0;i<_this.videoUrlShow.length;i++){
_this.videoElementId[i]=document.querySelector("#videoElement"+i)
}
}
_this.isplaysd();
},100)
},
methods:{
qhmenu(indexd){
let _this=this;
_this.videoUrlShow=[]//清空显示出来的的视频流路径
_this.videoshow=indexd;
_this.videoClass= 'video'+indexd;//视频样式的class名称
if(indexd==1){//确定显示出来的的视频流路径
if(_this.videoUrl.length>0){
_this.videoUrlShow[0]=_this.videoUrl[0];
}
}else if(indexd==4){
if(_this.videoUrl.length>0 && _this.videoUrl.length<4 ){
for(let i=0;i<_this.videoUrl.length;i++){
_this.videoUrlShow[i]=_this.videoUrl[i];
}
}else if(_this.videoUrl.length>0 && _this.videoUrl.length>4 ){
for(let i=0;i<4;i++){
_this.videoUrlShow[i]=_this.videoUrl[i];
}
}
}else if(indexd==6){
if(_this.videoUrl.length>0 && _this.videoUrl.length<6 ){
for(let i=0;i<_this.videoUrl.length;i++){
_this.videoUrlShow[i]=_this.videoUrl[i];
}
}else if(_this.videoUrl.length>0 && _this.videoUrl.length>6 ){
for(let i=0;i<6;i++){
_this.videoUrlShow[i]=_this.videoUrl[i];
}
}
}else if(indexd==9){
if(_this.videoUrl.length>0 && _this.videoUrl.length<9 ){
for(let i=0;i<_this.videoUrl.length;i++){
_this.videoUrlShow[i]=_this.videoUrl[i];
}
}else if(_this.videoUrl.length>0 && _this.videoUrl.length>9 ){
for(let i=0;i<9;i++){
_this.videoUrlShow[i]=_this.videoUrl[i];
}
}
}
for(let i=0;i<_this.flvPlayer.length;i++){//卸载已经加载的视频资源
_this.flvPlayer[i].unload();
_this.flvPlayer[i].detachMediaElement();
_this.flvPlayer[i]=null;
}
_this.flvPlayer=[];
_this.$nextTick(function(){//将视频渲染到页面
for(let i=0;i<_this.videoUrlShow.length;i++){
_this.videoElementId[i]=document.querySelector("#videoElement"+i)//视频标签对应的ID
_this.videoPlay(_this.videoUrlShow[i],_this.videoElementId[i]);//显示视频的方法参数 url 和html对象
}
})
},
isplaysd(){
let _this=this
if (flvjs.isSupported()) {
setTimeout(() => {
for(let i=0;i<_this.videoUrlShow.length;i++){
_this.videoPlay(_this.videoUrlShow[i],_this.videoElementId[i]);
}
},1000)
}
},
videoPlay(url,ele){
let _this=this;
var videoElement = ele;
// console.log(ele,"121212121");
let flvPlayer = flvjs.createPlayer({
type: 'flv',
isLive:true,
url: url
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
setTimeout(function(){
flvPlayer.play();
},200)
flvPlayer.on(flvjs.Events.METADATA_ARRIVED, () => {
// console.log('--== meta data arrived ==--');
});
flvPlayer.on(flvjs.Events.MEDIA_SOURCE_ENDED, () => {
// console.log('--== media source ended, normally means server stop push stream ==--');
});
flvPlayer.on(flvjs.Events.MEDIA_SOURCE_CLOSE, () => {
// console.log('--== media source close, show no source view ==--');
});
_this.flvPlayer.push(flvPlayer)
setInterval(() => { // 定时追帧
if(!videoElement.buffered || !videoElement.buffered.length)
return
const end = videoElement.buffered.end(0)
const current = videoElement.currentTime
const diff = end - current
if (diff<0)
return
const diffCritical = 3 // 这里设定了超过2秒以上就进行跳转
const diffSpeedUp = 1 // 这里设置了超过1秒以上则进行视频加速播放
const maxPlaybackRate = 2 // 自定义设置允许的最大播放速度
let playbackRate = 1.0 // 播放速度
if (diff > diffCritical) {
videoElement.currentTime = end - 0.45
playbackRate = Math.max(1, Math.min(diffCritical, 16))
} else if (diff > diffSpeedUp) {
playbackRate = Math.max(1, Math.min(diff, maxPlaybackRate, 16))
}
videoElement.playbackRate = playbackRate
//if (videoElement.paused) _this.flvPlayer.play()
}, 1000)
}
},
destroyed(){//离开组件销毁视频流
console.log('xiaohui121')
let _this=this;
for(let i=0;i<_this.flvPlayer.length;i++){//卸载已经加载的视频资源
_this.flvPlayer[i].pause();
_this.flvPlayer[i].unload();
_this.flvPlayer[i].detachMediaElement();
_this.flvPlayer[i].destroy();
_this.flvPlayer[i]=null;
}
}
}