VUE集成

接口说明

以下介绍vue集成视频插件接口。

1、使用前加载插件文件

集成说明

（1）将cmsv6player.min.js 、libcmsv6decode.wasm 文件放入 /public目录下

（2）在index.html文件中引入 cmsv6player.min.js 文件

操作示例：

2、在vue模板中设置div标签作为播放器的容器

<div id="cmsv6player"></div>

3、初始化插件

let videoOption = {
        domId: 'cmsv6player', // id
        isVodMode: false, // 显示进度条,直播 false 回放 true
        width: 400, // 窗口宽度
        height: 400,// 窗口高度
        lang: 'zh', // 语言类型
}
// 初始化播放器
let swfobject = new Cmsv6Player(videoOption)

4、集成实时播放操作示例

//校验jsession
let jsession = '36FD49EE0B23EFA8A77EA1ECC312B6F2';
//设备号
let devIdno = '200115000002';
//指定第几通道
let chnNum = 0;
//设置视频插件的服务器ip
let serverIp = '127.0.0.1';
//登录服务器端口
let serverPort = '6605';
// 主或子码流,0:主码流,1:子码流
let stream = 1;
// 窗口数量
let winNum = 4;
// 窗口下标
let winIndex = 0;
//配置当前显示的窗口数目
swfobject.setWindowNum(winNum);
//设置视频插件的服务器ip和登录服务器端口
swfobject.setServerInfo(serverIp, serverPort);

//停止播放
swfobject.stopVideo(winIndex);
// 播放视频 序号,会话号，设备号，通道号，码流
swfobject.startVideo(winIndex, jsession, devIdno, chnNum, stream, true);
// 插件回调事件
swfobject.addEventListener('onTtxVideoMsg', (index, type) => {

});

5、测试实时播放示例代码

见文档附件下载文件《ttx-vue.zip》