<!--实验室配置-视频-->
<template>
  <div class="subject-video">
    <p class="max-title-p">视频查看</p>
    <div class="max-video-for-box">
      <div class="video-for-box" v-for="(item,index) in propsVideoList" :key="index">
        <div class="video-for-title-box">
          <img src="@/assets/ZDimages/icon_24.png">
          <p class="color_one">{{item.name}}</p>
          <img src="@/assets/ZDimages/icon_25.png" @click="videoFullScreen(index)">
        </div>
        <div class="video-min-box">
          <video :id="item.divId" ref="videoRef" autoplay controls  muted width="498px" height="308px"></video>
        </div>
      </div>
    </div>
    <i class="right-top-button el-icon-close" @click="backPage"></i>
  </div>
</template>

<script>
  import flvjs from 'flv.js'
  export default {
    props:{
      videoData:{},
    },
    name: 'subject-video',
    data() {
      return {
        propsVideoList:[],
        videoList:[],
      }
    },
    created() {

    },
    mounted(){
      console.log(this.videoData)
      this.propsVideoList = this.videoData;
      let self = this;
      setTimeout(function(){
        self.videoFunction();
      },500);
    },
    methods: {
      //返回按钮
      backPage(){
        this.leftVideoFunctionOff();
        this.$parent.pageSwitchOff();
      },
      //视频方法
      videoFunction(){
        let self = this;
        self.videoList = [];
        for(let i=0;i<self.propsVideoList.length;i++){
          let obj = {
            player :{},
            flvPlayer:{}
          };
          obj.player = document.getElementById(self.propsVideoList[i].divId);
          // if (flvjs.isSupported()) {
          obj.flvPlayer = flvjs.createPlayer(
            {
              // isLive: true, //=> 是否为直播流
              // hasAudio: false, //=> 是否开启声音
              type: self.propsVideoList[i].videoType, //媒体类型 flv 或 mp4
              url: self.propsVideoList[i].url //视频流地址
            },
            {
              enableStashBuffer: true,//启用 IO 存储缓冲区。 如果您需要实时流播放（最小延迟），请设置为 false，但如果存在网络抖动，则可能会停止。
              stashInitialSize: 128,//IO 存储缓冲区初始大小。 默认值为 384KB。 指示合适的大小可以改善视频加载/搜索时间。
              isLive: true,//是否是直播
              lazyLoadRecoverDuration: 30,//指示以秒为单位的lazyLoad 恢复时间边界。
              autoCleanupSourceBuffer: true,//进行自动清理
              autoCleanupMaxBackwardDuration: 3 * 60,//3 * 60 当向后缓冲持续时间超过这个值（以秒为单位）时，对 SourceBuffer 进行自动清理
              autoCleanupMinBackwardDuration: 2 * 60,//2 * 60 指示在执行自动清理时为后向缓冲区保留的持续时间（以秒为单位）。
            }
          );
          self.videoList.push(obj);
          // }
          console.log("i",i)
        }

        for(let i=0;i<self.videoList.length;i++){
          self.videoList[i].flvPlayer.attachMediaElement(self.videoList[i].player);
          self.videoList[i].flvPlayer.load(); //加载
          self.videoList[i].flvPlayer.play(); //加载
        }
      },
      //视屏全屏方法
      videoFullScreen(index){
        this.$refs.videoRef[index].webkitRequestFullScreen();
      },
      //数据中心视频关闭
      leftVideoFunctionOff(){
        let self = this;
        for(let i=0;i<self.videoList.length;i++){
          self.videoList[i].flvPlayer.pause();
          self.videoList[i].flvPlayer.unload();
          self.videoList[i].flvPlayer.detachMediaElement();
          self.videoList[i].flvPlayer.destroy();
          self.videoList[i].flvPlayer = null;
        }
        self.videoList = [];
      },
    }
  }
</script>

<style lang="scss" scoped>
  .subject-video{
    flex:1;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
    margin:20px 20px;
    position: relative;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    p{
      margin:0;
    }
    .max-title-p{
      margin: 0 20px;
      padding:0 20px;
      line-height: 80px;
      font-size: 18px;
      color: #0045AF;
      border-bottom: 2px solid #E0E0E0;
    }
    .max-video-for-box{
      flex:1;
      padding:20px 0;
      .video-for-box{
        height:353px;
        width:500px;
        display: inline-block;
        margin:0 0 20px 20px;
        border:1px solid #0045af;
        .video-for-title-box{
          display: flex;
          /*border-top:1px solid #0045af;*/
          /*border-left:1px solid #0045af;*/
          /*border-right:1px solid #0045af;*/
          img:nth-child(1){
            width:16px;
            height:16px;
            margin:13px;
          }
          p{
            line-height:43px;
            flex:1;
            font-size:16px;
          }
          img:nth-child(3){
            width:16px;
            height:16px;
            cursor:pointer;
            margin:13px;
          }
        }
        .video-min-box{
          width:498px;
          height:308px;
          background: #0045af;
        }
      }
    }
    .right-top-button{
      height:30px;
      width:30px;
      font-size:20px;
      line-height:30px;
      text-align: center;
      color:#999;
      border-radius:50%;
      position: absolute;
      top:10px;
      right:10px;
    }
    .right-top-button:hover{
      background: #999;
      color:#fff;
      cursor:pointer;
    }
  }
</style>
