FE-miniProgramDependency/src/components/H5PlayerVideoTime/H5PlayerVideoTime.vue

<template>
  <div class="H5PlayerVideoTime">
    <div :id="videoData.id" :ref="videoData.id"></div>
    <p class="full-screen-button" @click="fullScreen"></p>
    <timeInput ref="progressBar"  class="timeInput-max-big-box"></timeInput>
  </div>
</template>

<script>
  import timeInput from "@/components/H5PlayerVideoTime/timeInput.vue";
  export default {
    name: 'H5PlayerVideoTime',
    components: {
      timeInput,
    },
    props: {
      videoProps: {}
    },
    data() {
      return {
        videoCover: localStorage.getItem('fileBrowseEnvironment') + localStorage.getItem('videoCover'),
        videoData: {},
      }
    },
    created() {
      this.$set(this, 'videoData', {
        id: 'video_' + this.generateRandomString(),
        width: this.videoProps.width ? this.videoProps.width : 600,
        height: this.videoProps.height ? this.videoProps.height : 338,
        url: this.videoProps.url
      })
      console.log('videoData',this.videoData)
    },
    mounted() {
      this.$nextTick(() => {
        this.initH5Player(1)
        let type = this.videoData.url.indexOf('wss') !== -1?1:0;
        this.initPlayer(this.videoData.url, 0,type)
      })
    },
    methods: {
      //全屏
      fullScreen() {
        if(this.$parent.$parent.stopTimeBack){
          this.$parent.$parent.stopTimeBack(this.videoProps);
        }else if(this.$parent.stopTimeBack){
          this.$parent.stopTimeBack(this.videoProps);
        }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...
            }
          );
        }
      },
      initH5Player(split) {
        this.myPlugin = new window.JSPlugin({
          szId: this.videoData.id, //需要英文字母开头，唯一性，必填
          szBasePath: '/h5player/', // 必填,与h5player.min.js的引用目录一致 填写的是pulblic下的路径！！！
          bSupporDoubleClickFull: true,//是否支持双击全屏，默认true
          openDebug: true,
          oStyle: {
            borderSelect: '#000'
          },
          // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
          iWidth: this.videoData.width,
          iHeight: this.videoData.height,
          // 分屏播放，默认最大分屏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...
          },
          (err) => {
            // console.info('JS_Play failed:', err)
            // do you want...
          }
        )
        // 初始化进度条（示例时间）
        this.$refs.progressBar.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>
  * {
    margin: 0;
    padding: 0;
  }
  .H5PlayerVideoTime {
    margin: 0;
    padding: 0;
    display: inline-block;
    position: relative;
  }
  .full-screen-button {
    background: url("../../assets/icon_0.png");
    background-size: 100%;
    position: absolute;
    font-size: 20px;
    height: 30px;
    width: 30px;
    line-height: 30px;
    text-align: center;
    top: 0;
    right: 0;
    z-index: 1;
    cursor: pointer;
  }
  .full-failed-button {
      background: url("../../assets/icon_1.png");
      background-size: 100%;
      position: fixed;
      font-size: 20px;
      height: 30px;
      width: 30px;
      line-height: 30px;
      text-align: center;
      bottom: 10px;
      right: 10px;
      z-index: 999999;
      cursor: pointer;
  }
  .timeInput-max-big-box {
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 1;
      width:100%;
      /*width: 379px;*/
      height: 40px;
      background: rgba(0, 0, 0, 0.4);
      display: flex;
  }
</style>