vue3数据大屏对接乐橙云监控_vue3 乐橙云接入-CSDN博客

本文链接：https://blog.csdn.net/zcc88999/article/details/142332133

效果如下：

乐橙云提供的播放地址是m3u8格式：

然后我就根据vue3对接m3u8格式的方案开始处理了：

说一下踩的坑：

使用了vue3VideoPlay插件：Vue3VideoPlay

根据文档的安装使用说明：

不能播放，把type改为application/x-mpegURL能播放了时长是有，但是没有画面黑屏。

最后发现好像是因为这个视频格式的问题：乐橙云提供的是H265，浏览器目前不支持。需要H264才可以。

随后 video.js 、 hls.js 、 videojs-contrib-hls，都试了到最后还是不行。

浏览器测试m3u8格式能否播放地址：阿瑞工具2.0

变更方案：使用乐橙云SDK

资源下载 | 乐橙云开发文档

下载引入到项目中

根据官方文档及实例使用：轻应用组件 | 乐橙云开发文档

可根据大佬教程使用postman获取token进行测试：

vue项目乐橙云（imouplayer.js）--轻应用直播SDK demo案例（保姆级）_vue 乐橙云播放-CSDN博客

文件放置目录：

html中引入css及js文件：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="icon" href="/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Loading...</title>
        <link href="/imou-player.css" rel="stylesheet" />

    </head>
    <body>
        <div id="app"></div>
        <script type="module" src="/src/main.ts"></script>
        <script src="/imou-player.js"></script>
        <!-- <script src="/imou-player.css"></script> -->
    </body>
</html>

如果控制拦不显示说明css引入有问题

修改css文件中引入图标的路径：

使用代码：

function createVideo (token) {
    for(var i = 0 ; i < 6; i++){
        const player = new imouPlayer({
            // 容器挂载 Id
            id : `player${i}`,
            // 设备序列号
            deviceId:'xxxxxxxxxxxx',
            // kitToken
            token:token,
            // 设备通道号
            channelId: i,
            // 清晰度 0 高清  1 标清  默认
            streamId: 0,
            // 录播 1 本地录像 localRecord 默认 云录像
            recordType: 'cloudRecord',
            // 播放类型： 1 直播（实时预览）； 2 录像回放；
            type: 1,
        })
        player.on('play', (res) => {
            console.log('开始播放 play', res)
        })
        player.on('pause', (res) => {
            console.log('播放器暂停 pause', res)
        })
        player.on('error', (res) => {
            console.log('播放器错误 error', res)
        })
    }
}