zhgdyun/src/components/videoModule/videoModule.vue

<template>
<!-- 下拉框选择视频，需传入视频列表 -->
  <div class="fullHeight videoOverview" id="videoOverview">
    <leCheng v-if="pluginType=='lecheng'"  :url='urls' :token="lcToken"></leCheng>
    <iscPlugin v-else-if="pluginType=='isc'" :type="type" :isIframe="isIframe" :devList="devList" :class="{'isDockingToWoer': isDockingToWoer, 'isLongguangIframe': isIframe, 'isFullScreen': isFullScreen}" :style="{left:worMenuWidth+'px'}"></iscPlugin>
    <div v-else
      :class="!bottomMod?'oneVideoContent videoContent'+winNum:'videoContent videoContent'+winNum"
    >
      <div
        class="videoItem"
        v-for="item in initDivNum"
        :key="item"
        :class="{'active': activeWinIndex==item}"
        @click="activeWinIndex=item"
        v-show="item<=winNum"
      >
        <ysyPlayAndPlayback :ref="'ysy'+item" v-if="pluginType=='ysy'" :ysyParams="ysyParams"></ysyPlayAndPlayback>
        <ckPlayer @selectWin="selectWin" :showSelectBtn="true" v-if="pluginType=='ckPlayer'" :url='urls[item]' :index="item"></ckPlayer>
        <div class="videoInner2" v-if="pluginType=='videojs'">
          <div class="top">
            <span
              class="winNumName"
            >{{$t('message.videoManage.video')}}{{$t('message.videoManage.window')}}{{item}}</span>
            <img src="@/assets/images/overview3/close.png" class="close" @click="clocseVideo(item)" />
          </div>
          <div class="noVideoBox noVideoBox1">
            <img src="@/assets/images/overview3/noVideo.png" class="close" />
            <p>{{$t('message.videoManage.no')}}{{$t('message.videoManage.video')}}</p>
          </div>
          <div class="noVideoBox noVideoBox2" style="display:none;">
            <img src="@/assets/images/longguang/loading.png" class="close" v-if="company=='longguang'" />
            <img src="@/assets/images/overview3/loading.png" class="close" v-else />
            <p>{{$t('message.videoManage.video')}}{{$t('message.videoManage.loading')}}...</p>
          </div>
          <div class="videoInner">
            <video
              width="100%"
              height="100%"
              :id="'myPlayer'+item"
              autoplay="autoplay"
              class="videoClass"
              controls="controls"
            >
              <source type="application/x-mpegURL" src />
            </video>
          </div>
        </div>
      </div>
    </div>
    <div @mousemove="DisplayCoord" @click="getPlaybackTime" class="timeLineBox" id="timeLineBox">
      <div class="timeItem" v-for="item in 24" :key="item">
        <span class="time" v-show="item!=24">{{item}}:00</span>
      </div>
      <div class="mouseLine" id="mouseLine"></div>
    </div>
    <div class="videoControl" v-if="bottomMod">
      <div>
        <!-- <el-autocomplete v-if="!hiddenSelectBox"
          class="selectDev"
          size="medium"
          popper-class="my-autocomplete"
          v-model="selectDev"
          :fetch-suggestions="querySearch"
          placeholder="请选择视频"
          @select="handleSelect"
          @focus="selectDev=''"
        >
          <i class="el-icon-caret-bottom el-input__icon" slot="suffix"></i>
          <template slot-scope="{ item }">
            <div class="devDetail" :class="{'active':item.winNum!=0}">
              <div class="name">{{ item.value }}</div>
              <span
                class="addr"
                v-show="item.winNum!=0"
              >{{$t('message.videoManage.video')}}{{$t('message.videoManage.window')}}{{ item.winNum }}{{$t('message.videoManage.playing')}}......</span>
            </div>
          </template>
        </el-autocomplete> -->
        <span
          v-show="showPlayback"
          class="videoType"
          :class="{'active':videoType==1}"
          @click="videoType=1"
        >{{$t('message.videoManage.live')}}</span>
        <span
          v-show="showPlayback"
          class="videoType"
          :class="{'active':videoType==2}"
          @click="videoType=2;winNum=1;activeWinIndex=1;"
        >{{$t('message.videoManage.playback')}}</span>
      </div>
      <div class="historyDate" v-show="videoType==2">
        <img src="@/assets/images/overview3/forward.png" class="forward forward-l" srcset />
        <i class="el-icon-caret-left"></i>
        <el-date-picker
          size="medium"
          class="selectDev"
          v-model="time"
          type="datetime"
          placeholder="选择日期时间"
          value-format="yyyy-MM-dd hh:mm:ss"
        ></el-date-picker>
        <i class="el-icon-caret-right"></i>
        <img src="@/assets/images/overview3/forward.png" class="forward" srcset />
      </div>
      <div class="operateBar">
        <i
          v-show="videoType==1&&showMoreWin"
          class="one"
          :class="{'active':winNum==1}"
          @click="changeWinNum(1)"
        ></i>
        <i
          v-show="videoType==1&&showMoreWin&&videoWinNum>1"
          class="four"
          :class="{'active':winNum==4}"
          @click="changeWinNum(4)"
        ></i>
        <i
          v-show="videoType==1&&showMoreWin&& videoWinNum>4"
          class="nine"
          :class="{'active':winNum==9}"
          @click="changeWinNum(9)"
        ></i>
        <i v-show="showCaptrue&& videoWinNum>4" class="img"></i>
        <i
          v-show="videoType==1&&showControl&& videoWinNum>4"
          class="control"
          :class="{'active':showControlBox}"
          @click="showControlBox=!showControlBox"
        ></i>
      </div>
    </div>
    <div class="controlBox" v-show="showControlBox">
      <div class="top">
        <img src="@/assets/images/overview3/controlBG.png" alt srcset />
        <img src="@/assets/images/overview3/arrow.png" class="arrow arrow1" />
        <img src="@/assets/images/overview3/arrow.png" class="arrow arrow2" />
        <img src="@/assets/images/overview3/arrow.png" class="arrow arrow3" />
        <img src="@/assets/images/overview3/arrow.png" class="arrow arrow4" />
        <img src="@/assets/images/overview3/arrow.png" class="arrow arrow5" />
        <img src="@/assets/images/overview3/arrow.png" class="arrow arrow6" />
        <img src="@/assets/images/overview3/arrow.png" class="arrow arrow7" />
        <img src="@/assets/images/overview3/arrow.png" class="arrow arrow8" />
      </div>
      <div class="bar">
        <span>{{$t('message.videoManage.changeTimes')}}</span>
        <el-slider class="slider" v-model="bar1"></el-slider>
      </div>
      <div class="bar">
        <span>{{$t('message.videoManage.focus')}}</span>
        <el-slider class="slider" v-model="bar2"></el-slider>
      </div>
      <div class="bar">
        <span>{{$t('message.videoManage.aperture')}}</span>
        <el-slider class="slider" v-model="bar3"></el-slider>
      </div>
    </div>
  </div>
</template>
<script>
import ysyPlayAndPlayback from "./ysyPlayAndPlayback";
import iscPlugin from "./isc_plugin/isc_plugin";
import ckPlayer from "./ckPlayer";
import leCheng from "./leCheng";
import {resizeFn, setOffset,hidePluginWindow,showPluginWindow} from './isc_plugin/video_isc_plugin.js'
import { getVideoItemInfoApi } from "@/assets/js/api/equipmentCenter/cameraList";
export default {
  props: ["value", "displayBottomMod", "winNumBer", "autoplay","hiddenSelectBox","type","scrrenPosition"],
  components: { ysyPlayAndPlayback,ckPlayer,leCheng,iscPlugin },
  watch: {
    //监听value的变化，进行相应的操作即可
    value: function (a, b) {
      console.log('新的值',a)
      this.devList = a;
      if(this.isDockingToWoer){
        this.pluginType='isc'
      }else{
        this.getPlayType()
      }
      
    },
  },
  data() {
    return {
      bottomMod: false, //是否显示 底部 选择框 和 窗口选择器 false 不显示； true 显示
      videoWinNum: 1, // 窗口选择器 数量  1 1个窗口  4 4个窗口 9 九个窗口
      showAutoplay: false, //自动播放

      devList: [],
      videoType: 1,
      selectDev: "",
      winNum: 1,
      activeWinIndex: 1,
      showControlBox: false,
      bar1: 20,
      bar2: 20,
      bar3: 20,
      time: "",
      videoObject1: "",
      videoObject2: "",
      videoObject3: "",
      videoObject4: "",
      videoObject5: "",
      videoObject6: "",
      videoObject7: "",
      videoObject8: "",
      videoObject9: "",
      showMoreWin: true, //是否显示多窗口切换
      showCaptrue: false, //是否显示截图按钮
      showControl: false, //是否显示控球按钮
      showPlayback: false, //是否显示视频回放按钮
      pluginType: "", //ysy:萤石云   videojs     ckPlayer  lecheng  isc
      initDivNum: 9,
      ysyParams: {
        url: "",
        accessToken:
          "at.3goo7ob2dic9amkg5ycg4n5yak9jtpf2-2dn1vwm6z3-134xqr4-td1bh38w2",
      },
      urls:['','','','','','','','',''],
      lcToken:'',
      isDockingToWoer: false,
      worMenuWidth:0,//用于和沃尔对接时定位插件
      company:'',
      isIframe: false,
      isFullScreen: false
    };
  },
  destroy(){
    hidePluginWindow()
  },
  created() {
    this.company = COMPANY;
    this.devList = this.$props.value;
 
    // this.bottomMod = this.$props.displayBottomMod;
    this.videoWinNum = this.$props.winNumBer;
    this.showAutoplay = this.$props.autoplay;

    this.showCaptrue = this.$props.showCaptrue;
    this.showControl = this.$props.showControl;
    this.showPlayback = this.$props.showPlayback;
    // if(this.$props.hiddenSelectBox){
    //   this.hiddenSelectBox = this.$props.hiddenSelectBox;
    // }
    this.isDockingToWoer=isDockingToWoer
    // lgzbdp
    if(window.localStorage.getItem('isIframe')){
      if(window.localStorage.getItem('isIframe') == '1'){
        this.isIframe = true
        // this.$nextTick(()=>{
        //   setOffset(2180,360)
        // })
        
      }
      console.log(window.localStorage.getItem('isIframe'))
    }
    if(this.isIframe && this.scrrenPosition){
      this.worMenuWidth = this.scrrenPosition;
    //  this.worMenuWidth = 2160
    }
    if(this.isDockingToWoer){
      this.worMenuWidth=(parseInt(document.body.clientWidth)*0.025  )+10
      // this.pluginType='isc'
    }else{
      // this.getPlayType()
    }
  },

  mounted() {
    if (this.pluginType == "ysy"||this.pluginType == "isc") {
      this.showMoreWin = false;
      this.showCaptrue = false;
      this.showControl = false;
      this.showPlayback = false;
      this.bottomMod = false;
      this.initDivNum = 1;
    } else if(this.pluginType=='videojs'){
      this.$nextTick(() => {
        this.initVideo();
      });
    }else if(this.pluginType=='lecheng'){
      this.bottomMod = false;
    }
    // window.addEventListener('keydown',this.fullScreen)
    // console.log(document.getElementById('videoOverview'))

  },
  destroyed() {
    if (this.pluginType == "videojs") {
      for (let index = 1; index <= 9; index++) {
        this["videoObject" + index].dispose();
      }
    }
     window.removeEventListener('keydown',this.fullScreen)
  },
  methods: {
    fullScreen(e){
      var e = event || window.event || arguments.callee.caller.arguments[0];
      if(e && e.keyCode == 122){//捕捉F11键盘动作
        console.log(e.keyCode)
        this.isFullScreen = !this.isFullScreen
        if(this.isFullScreen){
          resizeFn(1);
        }else{
          // hidePluginWindow()
          // showPluginWindow()
        }
        // setOffset(2180,360)
        
      }
    },
    //改变窗口分割数量
    changeWinNum(num){
      this.winNum=num;
      this.activeWinIndex=1;
      console.log('this.activeWinIndex',this.activeWinIndex)
      if(this.pluginType=='ysy'){
        this.$refs.ysy1.init2('')
        // this.$refs['ysy'+this.activeWinIndex].init()
      }
      
    },
    //判断视频播放方式
    getPlayType(){
      console.log(this.devList, 123)
      if(this.devList.length==0){
        return
      }
      //videoType    1萤石云，2乐橙，3ISC，4大华，5宇视，6国标
      switch (Number(this.devList[0].videoType)) {
        case 1:
          this.ysyParams = this.devList[0];
          //playType 播放方式，1高清RTMP,2流畅RTMP,3高清HLS,4流畅HLS,5高清轻量级插件，6流畅轻量级插件
          var videoType = this.devList[0].videoType
          var playType = this.devList[0].playType
          switch (Number(videoType)) {
            case 1:
              if(playType==1||playType==2){
                this.bottomMod=true
                this.pluginType='ckPlayer'
                // console.log(this.devList[0].url)
                this.urls[this.activeWinIndex]=this.devList[0].url
                // console.log(this.urls)
                // this.bottomMod=true
              }
              if(playType==3||playType==4){
                this.bottomMod=true
                this.pluginType='videojs'
                this.$nextTick(() => {
                  this.initVideo();
                  this.playVideoWithVideojs(this.devList[0].url)
                });
              }
              if(playType==5||playType==6){
                this.bottomMod=false
                this.pluginType='ysy'
              }
              break;
            case 2:
              this.pluginType='videojs'
              break;
            case 3:
              this.pluginType='videojs'
              break;
            case 4:
              this.pluginType='videojs'
              break;
            case 5:
              this.pluginType='videojs'
              break;
            case 6:
              this.pluginType='videojs'
              break;
          }
          break;
        case 2:
          // this.urls.push({
          //   url:this.devList[0].url,
          //   kitToken:this.devList[0].accessToken
          // })
          this.bottomMod = false;
          // if(this.$props.type=='company'){
          //   this.bottomMod=false
          // }else{
          //   this.bottomMod=true
          // }
          this.$nextTick(() => {
            this.initVideo();
            this.devList[0].winNum=1
            this.playVideoWithVideojs(this.devList[0].url)
          });
          this.pluginType='videojs'
          break;
        case 3:
          this.bottomMod=false
            // if(this.$props.type=='company'){
            //   this.bottomMod=false
            // }else{
            //   this.bottomMod=true
            // }
            this.pluginType='isc'
          break;
      }
      console.log(this.pluginType)
    },
    selectWin(data){
      this.activeWinIndex=data
    },
    //初始化视频插件
    initVideo() {
      console.log(this.devList);
      // 
      for (let index = 1; index <= 9; index++) {
        if (this["videoObject" + index] == "") {
          this["videoObject" + index] = videojs(
            "myPlayer" + index,
            {
              textTrackDisplay: false,
              controlBar: false,
              autoplay: this.showAutoplay,
              muted: this.showAutoplay ? true : false,
            },
            function onPlayerReady() {
              this.on("error", function () {
                // 报错信息
                var mediaError = this.error();
                console.log("mediaError", mediaError);
              });
            }
          );

          if(!this.bottomMod){
            this["videoObject"+ 1].src([
              {
                type: "application/x-mpegURL",
                src: this.devList[0].url,
              },
            ]);
            this["videoObject" + 1].play();
          }
        }
      }
    },
    querySearch(queryString, cb) {
      var restaurants = this.devList;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    clocseVideo(item) {
      //   console.log(item);
      var obj = this["videoObject" + item];
      //   console.log(obj);
      if (obj) {
        this["videoObject" + item].dispose();
        this.devList.forEach((element) => {
          if (element.winNum == item) {
            element.winNum = 0;
          }
        });
        // console.log(this.devList);
      }
      document.getElementsByClassName("noVideoBox2")[item - 1].style.display =
        "none";
      document.getElementsByClassName("noVideoBox1")[item - 1].style.display =
        "block";
      this.$emit('closeVideoDialog',false)
    },
    handleSelect(item) {
      console.log(item);
      
      this.urls[this.activeWinIndex]=item.url
      this.devList.forEach((element) => {
        if (element.value == item.value) {
          element.winNum = this.activeWinIndex;
        }
        if (
          element.value != item.value &&
          element.winNum == this.activeWinIndex
        ) {
          element.winNum = 0;
        }
      });
      console.log(this.devList);
      this.selectDev = "";
      if (this.pluginType == "ysy"){
        this.getVideo(item)
      }
      if (this.pluginType != "videojs") {
        return;
      }
      //   var obj = this["videoObject" + this.activeWinIndex];
      //   console.log(obj)
      this.playVideoWithVideojs(item.url)
    },
    //使用videojs播放视频
    playVideoWithVideojs(url){
      var el = document.getElementById("myPlayer" + this.activeWinIndex);
      if (!el) {
        var pEl = document.getElementsByClassName("videoInner")[
          this.activeWinIndex - 1
        ];
        var idName = "myPlayer" + this.activeWinIndex;
        var div2 =
          '<video width="100%" height="100%" id="' +
          idName +
          '" autoplay="autoplay" class="videoClass" controls="controls" > <source type="application/x-mpegURL" src /> </video>';
        pEl.innerHTML = div2;
        this["videoObject" + this.activeWinIndex] = videojs(
          "myPlayer" + this.activeWinIndex,
          {
            textTrackDisplay: false,
            controlBar: false,
          }
        );
      }
      this["videoObject" + this.activeWinIndex].src([
        {
          type: "application/x-mpegURL",
          src: url,
        },
      ]);
      this["videoObject" + this.activeWinIndex].play();
      
      document.getElementsByClassName("noVideoBox1")[
        this.activeWinIndex - 1
      ].style.display = "none";
      document.getElementsByClassName("noVideoBox2")[
        this.activeWinIndex - 1
      ].style.display = "block";
    },
    getX(obj) {
      var parObj = obj;
      var left = obj.offsetLeft;
      while ((parObj = parObj.offsetParent)) {
        left += parObj.offsetLeft;
      }
      return left;
    },
    getY(obj) {
      var parObj = obj;
      var top = obj.offsetTop;
      while ((parObj = parObj.offsetParent)) {
        top += parObj.offsetTop;
      }
      return top;
    },
    getPlaybackTime(event) {},
    DisplayCoord(event) {
      var top, left, oDiv;
      // oDiv = document.getElementById("timeLineBox");
      // top = getY(oDiv);
      // left = this.getX(oDiv);
      //  + document.documentElement.scrollLeft
      console.log(event.clientX);
      document.getElementById("mouseLine").style.left =
        event.clientX - 1 + "px";
      // document.getElementById("mp_y").innerHTML = (event.clientY - top + document.documentElement.scrollTop) - 2 +
      //     "px";
    },
     //获取视频播放url
    getVideo(item){
      //videoType    1萤石云，2乐橙，3ISC，4大华，5宇视，6国标
      //playType 播放方式，1高清RTMP,2流畅RTMP,3高清HLS,4流畅HLS,5高清轻量级插件，6流畅轻量级插件
      getVideoItemInfoApi({
        itemId: item.itemId
      }).then((res) => {
        var result = res.result
        var url = ''
        if(item.videoType==1){
          switch (Number(result.projectVideoConfig.playType)) {
            case 1:
              url=result.videoInfo.rtmpHd
              break;
            case 2:
              url=result.videoInfo.rtmp
              break;
            case 3:
              url=result.videoInfo.hdFlvAddress
              break;
            case 4:
              url=result.videoInfo.flvAddress
              break;
            case 5:
              url=`ezopen://open.ys7.com/${result.videoInfo.deviceSerial}/${result.videoInfo.channelNo}.hd.live`
              break;
            case 6:
              url=`ezopen://open.ys7.com/${result.videoInfo.deviceSerial}/${result.videoInfo.channelNo}.live`
              break;
            default:
              url=`ezopen://open.ys7.com/${result.videoInfo.deviceSerial}/${result.videoInfo.channelNo}.live`
              break;
          }
          this.ysyParams.url = url;
          this.ysyParams.accessToken = result.accessToken
          // this.$emit('playParams',{accessToken:result.accessToken,url:url,videoType:videoType,playType:result.projectVideoConfig.playType})
        }
        
        // if(videoType==2){
        //   // url=`imou://open.lechange.com/${item.serialNumber}/${item.channelId}/1?streamId=1`
        //   // this.$emit('playParams',{accessToken:result.accessToken,url:url,videoType:item.videoType})
        //   this.$emit('playParams',{accessToken:result.accessToken,url:item.liveRadioUrl,videoType:item.videoType})
        // }
        // console.log('视频播放url',url)
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import "./videoModule.less";
.isDockingToWoer{
  position: relative;
  left: 58px;
  top: 83px;
}
.isLongguangIframe{
  position: relative;
  left: 2180px;
  top: 276px;
}
// .isFullScreen{
//   left: 2160px;
//   top: 226px;
// }
</style>