v3-lab-web/src/components/H5PlayerVideo/H5PlayerVideo.vue

<template>
  <div class="H5PlayerVideo">
    <div :id="videoData.id" :ref="videoData.id"></div>
    <p class="full-screen-button" @click="fullScreen"></p>
    <!--<p class="full-failed-button" v-if="fullScreenType" @click="outFullScreen"></p>-->
  </div>
</template>

<script>
  export default {
    name: 'H5PlayerVideo',
    props: {
      videoProps: {}
    },
    data() {
      return {
        fullScreenType:false,
        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
      })
    },
    mounted() {
      this.$nextTick(() => {
        this.initH5Player(1)
        this.initPlayer(this.videoData.url, 0)
      })
    },
    methods: {
      //全屏
      fullScreen() {
        let self = this;
        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() {
        let self = this;
        this.myPlugin.JS_FullScreenDisplay(false).then(
          (res) => {
            console.info('JS_FullScreenDisplay success');
            // do you want...
          },
          (err) => {
            console.info('JS_FullScreenDisplay failed');
            // do you want...
          }
        );
        self.$set(self,'fullScreenType',false);
      },
      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) {
        this.myPlugin.JS_Play(url,
          {
            playURL: url, // 流媒体播放时必传
            mode: 0 // 解码类型：0=普通模式; 1=高级模式 默认为0
            // ...
          },
          index //当前窗口下标
        ).then(
          () => {
            console.info('JS_Play success')
            // do you want...
          },
          (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">
  .H5PlayerVideo {
    margin: 0;
    padding: 0;
    display: inline-block;
    * {
      margin: 0;
      padding: 0;
    }
    position: relative;
    .full-screen-button {
      background: url("../../assets/ZDimages/basicsModules/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: 999;
      cursor: pointer;
    }
    .full-failed-button {
      background: url("../../assets/ZDimages/basicsModules/icon_0.png");
      background-size: 100%;
      position: fixed;
      font-size: 20px;
      height: 30px;
      width: 30px;
      line-height: 30px;
      text-align: center;
      bottom: 0;
      right: 0;
      z-index: 999999;
      cursor: pointer;
    }
  }
</style>