<!--
@name: xgPlayerVideo
@description: 通用视频组件
@author: zc
@time: 2024/7/1
@引入:

   <xgPlayerVideo v-for="(item,index) in videoList" :key="index" :videoProps="item" :style="'display: inline-block;width:'+item.width+'px;height:'+item.height+'px;'"></xgPlayerVideo>

    或

  <xgPlayerVideo :videoProps="videoProps" :style="'display: inline-block;width:'+videoProps.width+'px;height:'+videoProps.height+'px;'"></xgPlayerVideo>

  import xgPlayerVideo from '@/components/xgPlayerVideo/xgPlayerVideo.vue'

  components: {
    xgPlayerVideo,
  },

  videoProps:{
    id:50,        //(ID:非必传-默认随机生成)
    width:600,    //(宽度:非必传-默认600)
    height:338,   //(高度:非必传-默认338)
    url:""        //(视频地址:必传)
  }

-->

<template>
  <div class="xgPlayerVideo">
    <div :id="videoData.id" :ref="videoData.id"></div>
    <!--<p class="el-icon-full-screen full-screen-button" @click="fullScreen"></p>-->
  </div>
</template>
<script>
  export default {
    name: 'xgPlayerVideo',
    props: {
      videoProps:{},
    },
    data() {
      return {
        boxIdList:[],
        videoCover: localStorage.getItem('fileBrowseEnvironment') + localStorage.getItem('videoCover'),
        videoData:{},
        player: null
      }
    },
    created() {
      this.$set(this,'videoData',{
        id:this.videoProps.id?this.videoProps.id: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.initPlayer()
      })
    },
    methods: {
      initPlayer() {
        this.player = new HlsPlayer({
          id: this.videoData.id,
          url: this.videoData.url,
          isLive: true,//直播流
          autoplayMuted: true,// 是否自动静音自动播放（默认false）
          autoplay: true,//自动播放
          loop: true,//自动循环
          // controls: false,//动作条
          ignores:  ['time','play', 'progress','fullscreen', 'volume'],
          keyShortcut: 'off',//键盘操作禁用
          cssFullscreen: true,//网页样式全屏--同时会增加一个不一样的全屏按钮
          closeVideoClick: true,//禁用点击播放/暂停
          closeVideoDblclick: true,//禁用双击全屏
          enableContextmenu: true,//禁止播放器范围内右键菜单
          disableProgress: true,//禁止进度条拖动交互
          closeVideoPreventDefault: true,//关闭点击播放器video元素的阻止默认动作行为
          closeVideoStopPropagation: true,//关闭点击播放器video元素的阻止冒泡行为
          width: this.videoData.width,
          height: this.videoData.height,
          poster: this.videoCover,//封面图片
          hls: {
            retryCount: 999, // 重试 3 次，默认值
            retryDelay: 1000, // 每次重试间隔 1 秒，默认值
            loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
          }
        })
        this.player.once('ready',()=>{
          setTimeout(function () {
            console.log('ready')
          }, 1000);
        })
      },
      //窗口全屏
      fullScreen(){
        this.$refs[this.videoData.id].webkitRequestFullScreen();
      },
      //生成随机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.player.destroy();
      },
    },
    beforeDestroy() {
      let self = this;
      self.videoOff();
    },
  }
</script>
<style scoped lang="scss">
  .xgPlayerVideo {
    *{
      margin:0;
      padding:0;
    }
    position: relative;
    .full-screen-button{
      color:#fff;
      position:absolute;
      font-size:20px;
      height:30px;
      width:30px;
      line-height:30px;
      text-align: center;
      top:0;
      right:0;
      z-index: 1;
      cursor: pointer;
    }
  }
</style>
