vue实时调用监控视频,vue实现视频播放

第一种方法使用安装的 npm install --save flv.js会出现报错的情况如flv.js播放视频时出现Failed to execute ‘appendBuffer’ on ‘SourceBuffer’ 解决方法[ 这种方法考虑了下因为不同的人去使用这个项目初始化使用的时候都要去手动改里面的代码所以使用时放弃了改方法
第二种方法使用的是下载一个稳定flv.js包 提取码r9ug然后从外部文件引入。如图:



使用flv播放视频流
页面中存在多个视频监控

如下步骤
dataList.value数据格式
如图所示

上图展示是单个但是项目中是多个dataList.value是数组function flvFn() {    let videoElement      dataList.value.map(item > {        if (flvjs.isSupported()) {            videoElement  document.getElementById(video  item.key);            player.value  flvjs.createPlayer({                type: flv, //> 媒体类型 flv 或 mp4                enableWorker: true,                enableStashBuffer: false,                autoCleanupSourceBuffer: true,                autoCleanupMaxBackwardDuration: 60,                stashInittialSize: 128,                isLive: true,                url: item.http, //> 视频流地址            });            if (videoElement) {                player.value.attachMediaElement(videoElement); //> 绑DOM            }            player.value.load();            let playPromise  player.value.play();            if (playPromise) {                playPromise.then(() > {                    console.log(加载完成)                }).catch((e) > {                    // 音频加载失败                });            }        } else {            console.log(flvjs不支持);        }    })}

页面上显示如图所示

注页面销毁或者布局切换需要以代码,不然多次切换后视频监控不显示

 if (player.value) {     player.value.pause(); //停止播放     player.value.unload(); //停止加载     player.value.detachMediaElement(); //销毁实例     player.value.destroy();     player.value  null; }