vue接入海康萤石云npm包，开发视频模块

vue接入海康萤石云npm包，开发视频模块

因为公司项目的需要，需要接入海康萤石云平台的npm包
来开发公司的视频模块
我们目前做的是公司的视频直播模块
ui设计采用的是公司的视频窗口ui

好了，我们先看一下这个npm包的md文档

萤石云GitHub

安装和引入方式可以参考里面的，注意引用方式不同，调用的类也不同

这里我们采用npm引入的方式来调用
与文档里面的用法一致
我们需要先创建一个dom节点

注意，如果初始化视频时没有设置长度和宽度
那么就会铺满这个dom元素，所以这个dom元素一定要设置长度和宽度

  <div id="video-container"></div>

接下来就是在mounted钩子里初始化视频

       this.player =  new EZUIKit.EZUIKitPlayer({
        autoplay: true, //自动播放
        id: 'video-container', // 视频容器ID
        accessToken:accessToken ,// 视频的AccessToken
        url: "ezopen://open.ys7.com/"+imei+"/1.live", 
        template: "simple", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
      })

海康的视频url的特点是可根据url拼接，展示不同的摄像头，不同的清晰度，视频的时间段回放
视频回放的url：

const url = "ezopen://open.ys7.com/"+imei+"/1.rec?begin="+begin+"&end="+end

高清视频url

url = "ezopen://open.ys7.com/"+imei+"/1.hd.live"

切换视频url的方法

  player.play();
  // 切换播放地址场景（建议先执行stop方法停止上次取流）
  player.play({
   url: 'ezopen://open.ys7.com/203751922/1.rec?begin=202001000000&end=202001235959'
  });

我们先来看一下页面的设计

需求：
九宫格内可以随意填充视频的窗口，
但是由于萤石云初始化的方式是在dom节点内渲染出一个iframe层
所以直接修改url是不能取消的iframe层的
只能用vue的v-if结合this.$nextTick
去销毁这个小窗口内的iframe层
这也是我觉得很不方便的地方，希望海康可以提出一个好的解决方案
去销毁这个视频节点