vue3使用flv播放视频监控

第一种方法使用安装的 npm install --save flv.js，会出现报错的情况，如flv.js播放视频时出现Failed to execute ‘appendBuffer’ on ‘SourceBuffer’ 解决方法[https://www.cnblogs.com/melancholys/p/14085804.html](https://www.cnblogs.com/melancholys/p/14085804.html)
这种方法考虑了下，因为不同的人去使用这个项目初始化使用的时候都要去手动改里面的代码，所以使用时放弃了改方法
第二种方法使用的是下载一个稳定flv.js包，https://pan.baidu.com/s/1g7LsHdNU_hZ6sm3bgrBU0A 提取码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不支持");
        }
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

页面上显示如图所示

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

 if (player.value) {
     player.value.pause(); //停止播放
     player.value.unload(); //停止加载
     player.value.detachMediaElement(); //销毁实例
     player.value.destroy();
     player.value = null;
 }
1
2
3
4
5
6
7