vue2-萤石监控的使用

1.安装

npm install ezuikit-js@7.7.0 --save

2.使用

// 页面摆放几个监控就要new几个player出来，不然无法暂停销毁视频
// 重置画面宽高 this.player.reSize(width, height);

// token要通过后台接口获取
<template>
    <div class="box">
      <div id="video-container"></div>
    </div>
</template>

<script>
import  EZUIKit from 'ezuikit-js';
export default {
    name: '',
    data() {
        return {
            player:null,
            token: ''
        }
    },
    
    mounted(){
      setTimeout(() => {
        this.getVideoData()
      }, 2000);
    },
    
    beforeDestroy() {
        this.playerDestroy() //销毁并停止直播视频
    }
    
    methods:{
        getVideoData(){
           this.playerDestroy();
         // 调用前先暂停销毁视频
          this.$nextTick(() => {
            this.player = new EZUIKit.EZUIKitPlayer({
            id: "video-container", // 视频容器ID
            accessToken: this.token, // token
            url: ' ezopen://open.ys7.com/G39444019/1.live', // 地址
            audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
            autoplay: true,
            template: "security", // 显示模式
            width: this.$refs.box.offsetWidth, // 宽度
            height: this.$refs.box.offsetHeight, // 高度
          });
          window.onresize = () => {
            this.player.reSize(
              this.$refs.box.offsetWidth,
              this.$refs.box.offsetHeight
            );
         };
      });
    },
        
    // 暂停销毁视频
    playerDestroy() {
      if (this.player) {
        this.player.stop();
       }
      }
    }
}
</script>