anKeYuan-largeScreen-1080/src/components/H5PlayerVideoTime/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>
    <timeInput ref="progressBarTime"></timeInput>
  </div>
</template>

<script>
  import timeInput from "@/components/H5PlayerVideoTime/timeInput.vue";
  export default {
    name: 'fullH5PlayerVideo',
    components: {
      timeInput,
    },
    props: {
      fullVideoProps: {}
    },
    data() {
      return {
        fullScreenType:false,
        videoCover: localStorage.getItem('fileBrowseEnvironment') + localStorage.getItem('videoCover'),
        videoData: {},
        //全屏相关
        innerWidth:window.innerWidth,
        innerHeight:window.innerHeight,
      }
    },
    created() {
      this.$set(this, 'videoData', {
        id: 'video_' + this.generateRandomString(),
        url: this.fullVideoProps.url
      })
    },
    mounted() {
      this.$nextTick(() => {
        this.initH5Player(1)
        let type = this.videoData.url.indexOf('wss') !== -1?1:0;
        this.initPlayer(this.videoData.url, 1,type)
      })
    },
    methods: {
      //全屏
      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) {
        let newUrl = url.split("?")[0]
        let list = url.split("?")[1].split("&");
        let timeData = {};
        list.forEach((item) => {
          timeData[item.split("=")[0]] = item.split("=")[1];
        })
        let startTime = timeData.beginTime +".000+08:00";
        let endTime = timeData.endTime + ".000+08:00";
        this.myPlugin.JS_Play(newUrl,
          {
            playURL: newUrl, // 流媒体播放时必传
            mode: type?type:0 // 解码类型：0=普通模式; 1=高级模式 默认为0
            // ...
          },
          index, //当前窗口下标
          startTime,
          endTime
        ).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...
          }
        )
        // 初始化进度条（示例时间）
        this.$refs.progressBarTime.init(
          timeData.beginTime,
          timeData.endTime
        );
      },
      //生成随机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...
          }
        )
      },
      //定位时间
      seeTo(time1,time2){
        let seekStart = time1 +".000+08:00";
        let endTime = time2 + ".000+08:00";
        this.myPlugin.JS_Seek(this.myPlugin.currentWindowIndex, seekStart, endTime).then(
          () => { console.log('seekTo success') },
          e => { console.error(e) }
        )
      },
      //暂停
      playbackPause() {
        this.myPlugin.JS_Pause(this.myPlugin.currentWindowIndex).then(
          () => { console.log('playbackPause success') },
          e => { console.error(e) }
        )
      },
      //恢复
      playbackResume() {
        this.myPlugin.JS_Resume(this.myPlugin.currentWindowIndex).then(
          () => { console.log('playbackResume success') },
          e => { console.error(e) }
        )
      },
    },
    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:1px;
    left:1px;
    * {
      margin: 0;
      padding: 0;
    }
    /*position: relative;*/
    .full-failed-button {
      background: url("../../assets/ZDimages/basicsModules/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>