播放直播流视频（声音自动关闭，添加控件，多个视频播放）
实例使用
引入最新的ezuikit.js
//npm
npm install ezuikit-js
//index.html
<script src="./ezuikit.js"></script>
获取地址js和demo地址：https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm
官网地址：open.ys7.com/help/31
（1）无法关闭声音
audio:0即可，或者使用自定义的控件之后
（2）播放器模板
文档上面显示只有使用内置的播放器样式，组件 simple：极简版;standard：标准版;security：安防版;vioce：语音版，这几种类型，但是我们看demo上面就发现还有pcLive,pcRec。（具体demo文件下载地址在上面）。而且这两个属性还是很好用的那种，样式也是好看的
pcLive模式控件是这样的。
（3）pcLive模式去除多余控件
在上面我们看到，这个模式下的控件有个头部设备名称的展示，如果我们想去除或者修改，就发现文档里面好像没有说明
然后我们看demo文件里面有个方法就是自定义的属性，添加控件themeData: themeData,,themeData的内容如下，引入这个我们可以添加或者删除不想要的控件了。功能有播放暂停、截图、录制、云台控制、语音对讲、放大、全屏等等
const themeData = {
header: {
color: '#1890ff',
activeColor: '#FFFFFF',
backgroundColor: '#000000',
btnList: [
{
iconId: 'deviceID',
part: 'left',
defaultActive: 0,
memo: '顶部设备序列号',
isrender: 0,//不添加控件
},
{
iconId: 'deviceName',
part: 'left',
defaultActive: 0,
memo: '顶部设备名称',
isrender: 0,
},
{
iconId: 'cloudRec',
part: 'right',
defaultActive: 0,
memo: '云存储',
isrender: 0,
},
{
iconId: 'rec',
part: 'right',
defaultActive: 0,
memo: 'SD卡回放',
isrender: 0,
},
],
},
footer: {
color: '#FFFFFF',
activeColor: '#1890FF',
backgroundColor: '#00000021',
btnList: [
{
iconId: 'play',
part: 'left',
defaultActive: 1,
memo: '播放',
isrender: 1,
},
{
iconId: 'capturePicture',
part: 'left',
defaultActive: 0,
memo: '截屏按钮',
isrender: 1,
},
{
iconId: 'sound',
part: 'left',
defaultActive: 0,
memo: '声音按钮',
isrender: 1,
},
{
iconId: 'pantile',
part: 'left',
defaultActive: 0,
memo: '云台控制按钮',
isrender: 1,
},
{
iconId: 'recordvideo',
part: 'left',
defaultActive: 0,
memo: '录制按钮',
isrender: 1,
},
{
iconId: 'talk',
part: 'left',
defaultActive: 0,
memo: '对讲按钮',
isrender: 1,
},
{
iconId: 'zoom',
part: 'left',
defaultActive: 0,
memo: '电子放大',
isrender: 1,
},
{
iconId: 'hd',
part: 'right',
defaultActive: 0,
memo: '清晰度切换按钮',
isrender: 1,
},
{
iconId: 'webExpend',
part: 'right',
defaultActive: 0,
memo: '网页全屏按钮',
isrender: 1,
},
{
iconId: 'expend',
part: 'right',
defaultActive: 0,
memo: '全局全屏按钮',
isrender: 1,
},
],
},
};
具体实例代码
//首先创建一个容器DOM
<div id="video-container"></div>
//然后初始化,在合适的地方调用函数即可
const ysyPlayer: any = ref([]);//多个视频
init(){
//多个视频循环赋值ysyPlayer.value[index]= new EZUIKit.EZUIKitPlayer
ysyPlayer = new EZUIKit.EZUIKitPlayer({
id：'video-container',// 视频容器ID
autoplay: true,//footer: ['talk','broadcast','hd','fullScreen'], // 如果template参数不为simple,该字段将被覆盖
// template: 'pcLive', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；有themeData了template就可以不用写了
url:playUrl, //播放地址'ezopen://open.ys7.com/F75902575/1.hd.live'
accessToken:accessToken, ////'at.d0x91u3sbf8rzu1v0oscip9nasksbprp-4uaawr1e3m-1v9407r-h08iewckx', //accessToken
width: 780,
height: 360,
handleError: that.handleError(),
handleSuccess: that.handleSuccess(),
//splitBasis:1, //旧版本3.5有个自带的分屏功能，现在没有了
plugin: ['talk'],//对讲功能
audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
themeData, //上面的themeData内容
});
that.playerVideo = player;
}
//停止播放
onBeforeUnmount(() => {
ysyPlayer.value.forEach((item: any, index) => {
item.stop();
let video: any = document.getElementById(`my_video${index}`);
video.innerHTML = '';
});
});
对讲要调用这个方法getUserMedia()
要求 getUserMedia() 只能从 HTTPS 或者 localhost 发起请求，其他协议的页面将无法调用该方法。因此，如果您需要使用 getUserMedia() 方法，请确保所在的页面来源是 HTTPS 或者 localhost
多个视频播放的话，demo里面也有说明的，就是new多个实例，但是按照demo里面的用法，其实我们实际使用是感觉不行的，所以只能说按照demo的思路走
demo的用法
var playr;
var playr2;
fetch('https://open.ys7.com/jssdk/ezopen/demo/token')
.then(response => response.json())
.then(res => {
var accessToken = res.data.accessToken;
playr = new EZUIKit.EZUIKitPlayer({
id: 'video-container', // 视频容器ID
accessToken: accessToken,
url: 'ezopen://open.ys7.com/G39444019/1.live',
template: 'pcLive', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；
plugin: ['talk'], // 加载插件，talk-对讲
width: 600,
height: 400,
});
playr2 = new EZUIKit.EZUIKitPlayer({
id: 'video-container2', // 视频容器ID
accessToken: "at.e0mnhu50d7bwohb40358mchq13aobjm2-6m2v78jd7m-1g22scv-lcn0rdqm1",
url: 'ezopen://open.ys7.com/G39444019/1.live',
template: 'pcLive', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；
plugin: ['talk'], // 加载插件，talk-对讲
width: 600,
height: 400,
});
});
通过demo发现，主要是区别就是容器盒子的ID不一样，至于声明多个变量只是为了在其他方法里面进行一些操作，我这里是暂时用不到，因为常用的控件都自带了，就不需要额外的方法去进行操作了
实际使用代码
//html
<div id="liveVideoDivHKMode" :class="[(this.current + 1)==1 ? '':'grid__' + (this.current + 1) + 'k']">
</div>
//js
//后端视频列表
list
let html = '';
for (let i = 0; i < list.length; i++) {
html += `<div id="${list[i].pk}"></div>` //id唯一值，看个人想用什么来做
// let element = list[i];
setTimeout(function () {
let player1 = new EZUIKit.EZUIKitPlayer({
id:list[i].pk,
// autoplay: false,
url:list[i].playUrl,
accessToken:list[i].accessToken,
// decoderPath: '../../static/js/mode',
width: width,
height: height,
handleError: that.handleError(),
handleSuccess: that.handleSuccess(),
themeData: themeData,
audio:0,
});
that.ezvizHkVideoListPlay.push(player1) //添加到一个数组里面方便后面关闭页面的时候关闭视频销毁
}, 10)
setTimeout(function () {
document.getElementById("liveVideoDivHKMode").innerHTML = html;
},50)
}
