(vue项目)ezuikit-js萤石组件的封装

//html部分
<video
      :id="id"
      ref="fullscreen"
      poster="../../../assets/videoDemo.png"
      style="width: 100%;object-fit: cover;"
      >
/>

//js部分
<script>
import EZUIKit from 'ezuikit-js'
export default {
  name: 'HelloWorld',
  data() {
    return {
      player: null,
      // 弹窗
      Visiable: false,
      // 全屏
      isFullscreen: false,
      // 设置按钮
      themeData: {
        poster:'../../../../src/assets/videoDemo.png',
        header: {
          color: '#fff',
          activeColor: '#FFFFFF',
          backgroundColor: '#000000',
          btnList: [
            {
              iconId: 'deviceID',
              part: 'left',
              defaultActive: 0,
              memo: '顶部设备序列号',
              isrender: 1,
            },
            {
              iconId: 'deviceName',
              part: 'left',
              defaultActive: 0,
              memo: '顶部设备名称',
              isrender: 1,
            },
          ],
        },
        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,
            },
          ],
        },
      },
      widthBox: null,
      heightBox: null,
      fullUrl:'',
      token:'',
      //监控页面
      windowHeight:0,
      windowWidth:0,
      id:'',
      tokenv:'',
      channelNO:0,
      deviceSerial:'',
      buttonClick:false
    }
  },
  props: {
    ysData:{
        type: Object,
        default: () => {
        return {
          tokenv:'',
          id: "", 
          channelNO:0,
          deviceSerial:''
        };
      },
      },
    show: {
      type: Boolean,
    },
    autoplay: {
      type: Boolean,
    },
  },
  watch:{
    //获取props数据更新的时候
    ysData:{
      deep: true,
      immediate: true,
      handler(val) {
        console.log('更新ys组件的值',val)
        this.$nextTick(() => {
          let width =document.getElementsByClassName('BoxFourref')[0].offsetWidth
          let height =document.getElementsByClassName('BoxFourref')[0].offsetHeight
          this.widthBox = width
          this.heightBox = height 
          this.id=val.id
          this.tokenv=val.tokenv
          this.channelNO=val.channelNO
          this.deviceSerial=val.deviceSerial
          console.log('2更新ys组件的值',val)
          this.createVideo(val.tokenv,val.id,val.channelNO,val.deviceSerial);
        });
      },
    }, 
  },
  created() {
        console.log('获取父盒子宽高',document.getElementsByClassName('BoxFourref')[0])
        let width =document.getElementsByClassName('BoxFourref')[0].offsetWidth
        let height =document.getElementsByClassName('BoxFourref')[0].offsetHeight
        this.widthBox = width
        this.heightBox = height 
        console.log('萤石当前传的宽高创建时候',this.widthBox,this.heightBox)
        
  },
  mounted() {
    // 监控页面
    window.onresize = () => {
      return (() => {
          this.windowHeight = document.documentElement.clientHeight // 高
          this.windowWidth = document.documentElement.clientWidth // 宽
          console.log('萤石监控当前页面',this.windowHeight,this.windowWidth)
        
      })()
    }
  },
  methods: {
    // 创建视频
    createVideo(tokenv,id,channelNO,deviceSerial){
      console.log('3萤石的值',tokenv,id,channelNO,deviceSerial)
        var accessToken = tokenv
        this.token=tokenv
        var url=''
        if(deviceSerial){
          url = 'ezopen://open.ys7.com/'+deviceSerial+'/'+channelNO+'.hd.live'
          this.fullUrl='ezopen://open.ys7.com/'+deviceSerial+'/'+channelNO+'.hd.live'
        }else{
          url = ''
          this.fullUrl=''
        }
        console.log('当前萤石的创建视频的值',this.id,this.widthBox,this.heightBox)

        this.player = new EZUIKit.EZUIKitPlayer(
          // this.option
          {
            id: this.id, // 视频容器ID
            accessToken: accessToken,
            url: url,
            autoplay: true,
            // simple - 极简版; pcLive-pc直播；pcRec-pc回放；mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
            //template: 'theme',
            // poster:'../../../assets/img/蒙版组 12.png',
            plugin: ['talk'], // 加载插件，talk-对讲
            themeData: this.themeData,
            width: this.widthBox,
            height: this.heightBox,
            landleError:(data) => {
              console.log('视频播放失败',data);
            }
            // footer: ['talk','broadcast','hd',],
          }
        )
        // this.play()
        window.player = this.player
    },
    play() {
      var playPromise = player.play();
      playPromise.then((data) => {
        console.log("promise 获取 数据", data)
      })
    },
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose
      this.timer=null
    }
    
  },
}
</script>

注意：在npm之后发现视频无法正常播放，可以将官网demo的ezuikit-js复制到自己的项目里面