vue前端对接监控视频（分屏）

引用文件
首先先把showVideo的文件夹放到根目录下

在页面中引用相关文件

<link rel="stylesheet" href="showVideo/showVideo.min.css">
<script src="showVideo/showVideo-base.min.js"></script>
<script src="showVideo/showVideo.min.js"></script>

初始化播放器的相关配置
showVideo.setVideoOption({})
本播放器集成了公司业务的接口，包含了实播，回放，云台控制和回放速度控制，截图和全屏功能
可以根据type直接初始化接口地址
如果是第三方业务对接，也可以单独配置接口地址
url 是接口前缀，配置统一地址

    showVideo.setVideoOption({
        type: 2,
        // show++接口为 1
        // 畅联/中台接口为 2
        // 网关接口为 3
        // 门户接口为 4
        url: 'http://qulink.24hlink.cn',
        token: ''
        // sPlayUrl: 'api/getPlayMsg', // 播放地址
        // sPlayBackUrl: '', // 回放地址
        // sControllerUrl: '', // 云台控制地址
        // sMonthFileListUrl: '', // 录像按月
        // sDayFileListUrl: '', // 录像按天
        // tokenName: 'accessToken' // token在接口的属性名
    })

初始化播放器

new showVideo.createVideo({})

开始播放
oVideo.setVideoData({},{})
可以传两个对象，第一个传的是播放用到的参数，第二个穿的是接口调用后返回的数据
其中第一个对象传的是设备的参数，根据业务接口传
streamKind：默认码流1（1.子码流，0主码流）
fileLocation：默认回放文件地址（2.集中录像， 3.设备录像）

        oVideo.setVideoData({
            deviceId: '',
            channelIndex: '',
            // cameraNum: '',
            // channelId: '',
            // channelNum: '',
            // deviceChannelId: '',
            // cameraId: '',
            streamKind: 1, // 默认播放码流
            fileLocation: 3 // 回放文件地址
        }, {
            // fPlayFun: function (err) {console.log(err)}, // 播放接口返回的数据
            // fPlayController: function (err) {console.log(err)}, // 云台控制接口返回的数据
            // fReplayControl: function (err) {console.log(err)}, // 回放倍速接口返回的数据
        })

销毁播放器

oVideo.dispose()

提供直接播放地址

oVideo.playVideoUrl(url);

播放器分屏

<template>
  <div ref="videoBox" class="video-box hasChange">
    <ul class="video-box-ul">
      <li
        v-for="item in videoList"
        :key="item.index"
        :class="{'hover': nVideoIndex === item.index}"
        :style="{height: divBox, width: divBox}"
        @click="fClickVideo($event, item)"
      >
        <play-video
          ref="PlayVideo"
          :div-id="divId + item.divId"
          :play-back="item.playBack"
          :control="item.control"
        />
      </li>
    </ul>
    <div class="video-box-btn">
      <template v-if="!noChange">
        <el-button v-for="item in aBtnList" :key="item.key" class="not-min" :class="{'hover': item.key === nVideoNum}" :disabled="bAutoPlay" @click="fChangeNum(item.key)"><svg-icon :icon-class="`btn${item.key}`" /></el-button>
        <el-button class="not-min" :disabled="bAutoPlay" @click="fDisposeAll"><svg-icon icon-class="closeAll" /></el-button>
      </template>
      <el-button v-if="bShow" class="not-min"><screenfull :elem="$refs.videoBox" /></el-button>
    </div>
  </div>
</template>

<script>
import Screenfull from '@/components/Screenfull'
export default {
  name: 'VideoBox',
  components: {
    Screenfull
  },
  props: {
    noChange: {
      type: Boolean,
      default: false
    },
    divId: { // 播放器id
      type: String,
      default: 'now'
    },
    bAutoPlay: {
      type: Boolean
    }
  },
  data() {
    const aBtnList = []
    for (let i = 0; i < 6; i++) {
      const key = i + 1
      aBtnList.push({
        key,
        name: key
      })
    }
    return {
      aBtnList,
      aVideoData: [],
      nVideoNum: 0,
      nVideoIndex: 0,
      nGroupIndex: 0,
      nDeviceIndex: 0,
      bShow: false,
      oAutoPlayTimer: null,

      autoPlay: false
    }
  },
  computed: {
    // ...mapGetters([
    //   'socketData'
    // ]),
    videoList() {
      return this.aVideoData.slice(0, this.nVideoNum * this.nVideoNum)
    },
    divBox() {
      return parseFloat(100 / this.nVideoNum) + '%'
      // return `calc(${parseFloat(100 / this.nVideoNum)}%)`
    },
    videoHeight() {
      return parseFloat(825 / this.nVideoNum)
    }
  },
  watch: {
    autoPlay(val) {
      this.$emit('update:bAutoPlay', val)
    }
  },
  created() {
    this.fChangeNum(2)
  },
  mounted() {
    this.bShow = true
  },
  beforeDestroy() {
    this.fCloseAutoPlayVideo()
  },
  methods: {
    fPlayVideo(camera) {
      // console.log(this.videoList)
      // console.log()
      this.aVideoData[this.nVideoIndex].control = camera.hasPtz === 1
      this.aVideoData[this.nVideoIndex].oCamera = camera
      this.$refs.PlayVideo[this.nVideoIndex].fPlayVideo({
        ...camera
      })
      if (this.nVideoIndex + 1 < (this.nVideoNum * this.nVideoNum)) {
        this.nVideoIndex++
      }
    },
    fPlayVideoAll(arr) {
      const length = arr.length
      const num = this.fPlayVideoAllMaxNum(length)
      const max = length > (num * num) ? (num * num) : length
      const NewArr = arr.slice(0, max)
      this.fChangeNum(num)
      this.nVideoIndex = 0
      this.$nextTick(() => {
        NewArr.forEach(camera => {
          this.fPlayVideo(camera)
        })
      })
    },
    fPlayVideoAllMaxNum(length) {
      let max = 1
      for (let i = 0; i < this.aBtnList.length; i++) {
        const num = this.aBtnList[i].key
        max = num
        if (length <= num * num) {
          break
        }
      }
      return max
    },
    fChangeNum(num) { // 切换画面数
      if (this.nVideoNum === num) {
        return
      }
      // const oldNum = this.nVideoNum

      this.nVideoNum = num
      for (let i = this.aVideoData.length; i < (num * num); i++) {
        this.aVideoData.push({
          index: i,
          control: false,
          playBack: false,
          divId: 'playerVideo' + i
        })
      }
      // for (let i = num * num; i < oldNum * oldNum; i++) {
      //   this.aPlayData[i] = null
      // }
    },
    fClickVideo(event, item) {
      this.nVideoIndex = item.index
      this.$emit('fClickVideo', item.oCamera || {})
    },




    fDisposeAll() { // 关闭所有画面
      for (let i = 0; i < this.videoList.length; i++) {
        this.$refs.PlayVideo[i].dispose()
        // this.aPlayData[i] = null
      }
      this.nVideoIndex = 0
    }
  }
}
</script>

秀++视频开放平台（www.showplusplus.cn）专注于音视频信号的接入、管理及AI集成，由杭州美畅物联技术有限公司精心打造，通过提供云、中台、边、旁路、端等一系列产品，为客户提供视频能力底座支撑以及全栈式解决方案。