anKeYuan-largeScreen-1080/src/components/fullH5PlayerVideo/fullH5PlayerVideo.vue

<template>
  <div class="fullH5PlayerVideo">
    <div style="height:100%;width:100%;" :id="videoData.id+'full'" :ref="videoData.id"></div>
    <p class="full-failed-button" @click="outFullScreen"></p>
  </div>
</template>

<script>
import { iotCameraGetPreviewURLs } from '@/api/index'
  export default {
    name: 'fullH5PlayerVideo',
    props: {
      fullVideoProps: {}
    },
    data() {
      return {
        fullScreenType:false,
        videoCover: localStorage.getItem('fileBrowseEnvironment') + localStorage.getItem('videoCover'),
        videoData: {},
        //全屏相关
        innerWidth:window.innerWidth,
        innerHeight:window.innerHeight,
      }
    },
    created() {
    },
    mounted() {
      this.iotCameraGetPreviewURLs();
    },
    methods: {
      iotCameraGetPreviewURLs(){
        let obj = {
          streamType:0,
          cameraIndexCode:this.fullVideoProps.cameraIndexCode,
          protocol: window.location.href.indexOf('https') !== -1 ? 'wss' : 'ws',
        }
        iotCameraGetPreviewURLs(obj).then(response => {
          this.$set(this, 'videoData', {
            id: 'video_' + this.generateRandomString(),
            url: response.data
          })
          this.$nextTick(() => {
            this.initH5Player(1)
            let type = response.data.indexOf('wss') !== -1?1:0;
            this.initPlayer(this.videoData.url, 0,type)
          })
        })
      },
      //全屏
      fullScreen() {
        let self = this;
        if(this.$parent.stopTime){
          this.$parent.stopTime(JSON.parse(JSON.stringify(this.fullVideoProps)));
        }else{
          this.myPlugin.JS_FullScreenDisplay(true).then(
            (res) => {
              // console.info('JS_FullScreenDisplay success');
              // do you want...
            },
            (err) => {
              // console.info('JS_FullScreenDisplay failed');
              // do you want...
            }
          );
          self.$set(self,'fullScreenType',true);
        }
      },
      //退出全屏
      outFullScreen() {
        this.$parent.outFullScreen();
      },
      initH5Player(split) {
        this.myPlugin = new window.JSPlugin({
          szId: this.videoData.id+'full', //需要英文字母开头，唯一性，必填
          szBasePath: '/h5player/', // 必填,与h5player.min.js的引用目录一致 填写的是pulblic下的路径！！！
          bSupporDoubleClickFull: false,//是否支持双击全屏，默认true
          openDebug: true,
          oStyle: {
            borderSelect: '#000'
          },
          // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
          // iWidth: this.innerWidth,
          // iHeight: this.innerHeight,
          // 分屏播放，默认最大分屏4*4
          iMaxSplit: split,
          iCurrentSplit: split
        })
        let iWndNum = 1;
        let InterruptTime = 5;
        this.myPlugin.JS_SetInterruptTime(iWndNum, InterruptTime).then(
          () => {
            // console.info('JS_SetInterruptTime success');
            // do you want...
          },
          (err) => {
            // console.info('JS_SetInterruptTime failed');
            // do you want...
          }
        );
        // 事件回调绑定
        this.myPlugin.JS_SetWindowControlCallback({
          windowEventSelect: function (iWndIndex) {  //插件选中窗口回调
            // console.log('windowSelect callback: ', iWndIndex)
          },
          pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {  //插件错误回调
            // console.log('pluginError callback: ', iWndIndex, iErrorCode, oError)
          },
          windowEventOver: function (iWndIndex) {  //鼠标移过回调
            //console.log(iWndIndex);
          },
          windowEventOut: function (iWndIndex) {  //鼠标移出回调
            //console.log(iWndIndex);
          },
          windowEventUp: function (iWndIndex) {  //鼠标mouseup事件回调
            //console.log(iWndIndex);
          },
          windowFullCcreenChange: function (bFull) {  //全屏切换回调
            // console.log('fullScreen callback: ', bFull)
          },
          firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {  //首帧显示回调
            // console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight)
          },
          performanceLack: function () {  //性能不足回调
            // console.log('performanceLack callback: ')
          }
        })
      },
      initPlayer(url, index, type) {
        this.myPlugin.JS_Play(url,
          {
            playURL: url, // 流媒体播放时必传
            mode: type?type:0 // 解码类型：0=普通模式; 1=高级模式 默认为0
            // ...
          },
          index //当前窗口下标
        ).then(
          () => {
            // console.info('JS_Play success')
            // do you want...
            //开启声音
            this.myPlugin.JS_OpenSound().then(
              () => {
                console.log('openSound success')
              },
              e => {
                console.error('声音开启失败',e)
              }
            )
          },
          (err) => {
            // console.info('JS_Play failed:', err)
            // do you want...
          }
        )
      },
      //生成随机ID
      generateRandomString() {
        let chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
        let randomString = ''
        for (let i = 0; i < 24; i++) {
          let randomIndex = Math.floor(Math.random() * chars.length)
          randomString += chars.charAt(randomIndex)
        }
        return randomString
      },
      videoOff() {
        this.myPlugin.JS_StopRealPlayAll().then(
          () => {
            // console.info('JS_StopRealPlayAll success')
            // do you want...
          },
          (err) => {
            // console.info('JS_StopRealPlayAll failed')
            // do you want...
          }
        )
      }
    },
    beforeDestroy() {
      let self = this
      self.videoOff()
    }
  }
</script>

<style scoped lang="scss">
  .fullH5PlayerVideo {
    margin: 0;
    padding: 0;
    display: inline-block;
    z-index:11;
    height: 100%;
    width:100%;
    position: fixed;
    top:0;
    left:0;
    * {
      margin: 0;
      padding: 0;
    }
    /*position: relative;*/
    .full-failed-button {
      background: url("../../assets/icon_1.png");
      background-size: 100%;
      position: fixed;
      font-size: 20px;
      height: 50px;
      width: 50px;
      line-height: 30px;
      text-align: center;
      top: 40px;
      right: 40px;
      z-index: 12;
      cursor: pointer;
    }
  }
</style>