vue3使用flv播放视频监控

最新推荐文章于 2025-02-05 12:01:07 发布

@呵呵

最新推荐文章于 2025-02-05 12:01:07 发布

阅读量1.3w

点赞数 1

CC 4.0 BY-SA版权

文章标签： 1024程序员节前端

本文链接：https://blog.youkuaiyun.com/weixin_41639609/article/details/134016396

文章介绍了在网页中使用flv.js播放视频流时遇到的问题，包括安装方法导致的错误，以及如何通过外部文件引入稳定版本并处理多个视频监控的代码实现。还提到页面销毁或布局切换时的正确操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种方法使用安装的 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不支持");
        }
    })
}

页面上显示如图所示
在这里插入图片描述
注页面销毁或者布局切换需要以代码,不然多次切换后视频监控不显示

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