vue+萤石云ezuikit.js播放直播流视频（声音自动关闭，添加控件，多个视频播放）

实例使用

引入最新的ezuikit.js

//npm
npm install ezuikit-js
//index.html
<script src="./ezuikit.js"></script>
获取地址js和demo地址：https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm

看过官网的文档都知道萤石云的文档是多么的‘善解人意’哈，懂得都懂，很多东西没有说清楚的，只能靠自己去摸索或者看他们的demo来一点点测试实现

官网地址：https://open.ys7.com/help/31

坑

（1）无法关闭声音

看官网文档的属性是添加audio:0即可，但是发现根本没有反应。然后还有就是说把autoplay: false,，但是最后发现，都没有反应。但是使用了自定义的控件之后，就可以实现了，就很尴尬

（2）播放器模板

文档上面显示只有使用内置的播放器样式，组件 simple：极简版;standard：标准版;security：安防版;vioce：语音版，这几种类型，但是我们看demo上面就发现还有pcLive,pcRec。（具体demo文件下载地址在上面）。而且这两个属性还是很好用的那种，样式也是好看的

pcLive模式控件是这样的。

（3）pcLive模式去除多余控件

在上面我们看到，这个模式下的控件有个头部设备名称的展示，如果我们想去除或者修改，就发现文档里面好像没有说明

然后我们看demo文件里面有个方法就是自定义的属性，添加控件themeData: themeData,,themeData的内容如下，引入这个我们可以添加或者删除不想要的控件了。功能有播放暂停、截图、录制、云台控制、语音对讲、放大、全屏等等

var themeData = {
      "header": {
        "color": "#1890ff",
        "activeColor": "#FFFFFF",
        "backgroundColor": "#000000",
        "btnList": [
          {
            "iconId": "deviceID",
            "part": "left",
            "defaultActive": 0,
            "memo": "顶部设备序列号",
            "isrender": 1
          },
          {
            "iconId": "deviceName",
            "part": "left",
            "defaultActive": 0,
            "memo": "顶部设备名称",
            "isrender": 1
          },
          {
            "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>
//然后初始化,在合适的地方调用函数即可
init(){
	player =  new EZUIKit.EZUIKitPlayer({
      id：'video-container',
      autoplay: true,
      url:playUrl, //播放地址
      accessToken:accessToken, //token
      width: 780,
      height: 360,
      handleError: that.handleError(),
      handleSuccess:  that.handleSuccess(),
      //splitBasis:1, //旧版本3.5有个自带的分屏功能，现在没有了
      audio:0,
      themeData: themeData, //上面的对象内容
    });
    that.playerVideo = player;
}

多个视频播放的话，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)
}