vue3中使用TcPlayer实现视频监控-代码

1、引入js文件

在index.html头部引入引入播放器的cdn

<script src="https://cloudcache.tencent-cloud.com/open/qcloud/video/vcplayer/TcPlayer- 2.3.2.js"charset="utf-8"></script>

 2、主要代码

这里主要是监控画面的布局通过点击按钮使用grid布局进行切换，tcplayer.js的初始化就不展示了

<template>
  <div class="videoGroup">
    <div class="top">
      <span>监控画面</span>
      <div>
        <el-button @click="proportionSumbit('1')">1*1</el-button>
        <el-button @click="proportionSumbit('2')">2*2</el-button>
        <el-button @click="proportionSumbit('6')">2*3</el-button>
        <el-button @click="proportionSumbit('3')">3*3</el-button>
      </div>
    </div>
    <!-- 视频组 -->
    <div
      class="VideoGirus"
      :style="`grid-template-columns:${videoProps.autoNumber};`"
    >
      <div
        v-for="(item, index) in videoProps.Proportion"
        :key="index"
        :class="item.classname"
      >
        <div class="colvideo">
          <div class="bgvideo">
            <div class="titlevideo">
              <span>
                <el-icon><VideoCamera /></el-icon>
                {
   
   { item.title }}
              </span>
              <div style="width: 60px">
                <span style="margin-right: 15px" @click="seeVideo(item)"
                  ><el-icon><FullScreen /></el-icon
                ></span>
                <span @click="closeVideo(item)"
                  ><el-icon><CircleCloseFilled /></el-icon
                ></span>
              </div>
            </div>
            <cviewplayer
              class="cviewplayer"
              :key="videoProps.freshDom"
              :videoUrl="item.videoUrl"
              :index="item.index"
              :tcPlayerType="item.id"
              :isPlay="videoProps.isPlay"
              :data="videodata"
              @PlayClose="PlayClose"
            ></cviewplayer>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
//视频列表接口
import { getVideoList } from '@/api/system/video'
import { ref, onMounted, reactive} from 'vue'
//始化化直播播放器组件
import cviewplayer from './components/cviewplayer'
//video
const videoProps = reactive({
  //赋值时间戳达到刷新的效果
  freshDom: '',
  //数据的数组
  Proportion: [],
  //判断比例
  autoNumber: 'auto auto',
  //是否播放
  isPlay: false,
})
//videdata
const videodata = reactive([])
//videodisplayScale
const displayScale = ref('2')
//是否查看视频showVideo
const showVideo = reactive({})
//获取监控列表
const videoList = async () => {
  const res = await getVideoList()
  console.log(res.data, '---')
}
//接收子级传来的是否播放状态
const PlayClose = () => {
  videoProps.isPlay = false
}
//初始化
const fun_into = () => {
  proportionSumbit('2')
}
//播放事件
const VideoPlay = () => {
  videoProps.isPlay = true
}
//视频比例
const proportionSumbit = (val) => {
  //grid赋值比例的
  displayScale.value = val
  proportion(val)
  videoProps.Proportion = []
  videoProps.freshDom = +new Date()
  if (val == 6) {
    val = 6
  } else {
    val = val * val
  }
  for (var i = 0; i < val; i++) {
    videoProps.Proportion.push({
      id: videodata[i]?.id,
      status: videodata[i]?.status,
      title: videodata[i]?.title,
      videoUrl: videodata[i]?.videoUrl,
      index: i,
      classname: val == 6 && i == 0 ? 'video1' : '',
    })
  }
}
//查看视频
const seeVideo = (item) => {
  if (displayScale.value == 1) {
    return
  }
  proportion('1')
  videoProps.Proportion = []
  videoProps.freshDom = +new Date()
  videoProps.Proportion = [
    {
      id: item?.id,
      status: item?.status,
      title: item?.title,
      videoUrl: item?.videoUrl,
      index: 1,
      classname: '',
    },
  ]
}
//关闭视频
const closeVideo = (item) => {
  if (displayScale.value == 1) {
    return
  }
  proportionSumbit(displayScale.value)
  proportion(displayScale.value)
}
//grid赋值比例的
const proportion = (val) => {
  switch (val) {
    case '1':
      videoProps.autoNumber = 'auto'
      break
    case '2':
      videoProps.autoNumber = 'auto auto'
      break
    case '3':
      videoProps.autoNumber = 'auto auto auto'
      break
    case '4':
      videoProps.autoNumber = 'auto auto auto auto'
      break
    default:
      videoProps.autoNumber = 'auto auto auto'
      break
  }
}

onMounted(() => {
  videoList()
  fun_into()
})
</script>
<style lang="scss" scoped>
.videoGroup {
  height: 100%;
  .top {
    height: 54px;
    line-height: 54px;
    font-size: 16px;
    padding-left: 20px;
    display: flex;
    justify-content: space-between;
    .el-button {
      margin-right: 10px;
    }
  }
  .VideoGirus {
    width: 100%;
    overflow: hidden;
    height: calc(100% - 140px);
    display: grid;
    grid-gap: 10px;
    box-sizing: border-box;
    padding-top: 10px;
    div {
      width: 100%;
      height: 100%;
      .colvideo {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        position: relative;
        .bgvideo {
          padding: 20px;
          padding-top: 0;
          background: rgba(0, 160, 233, 0.1);
        }
        .titlevideo {
          height: 40px;
          line-height: 40px;
          font-size: 16px;
          justify-content: space-between;
          display: flex;
        }
        .cviewplayer {
          position: absolute;
          width: calc(100% - 40px);
          height: calc(99% - 50px);
        }
      }
    }
    .video1 {
      grid-column-start: 1;
      grid-row-start: 1;
      grid-row-end: 3;
      grid-column-end: 3;
    }
  }
  .bottom {
    height: 86px;
    padding-left: 20px;
    line-height: 86px;
  }
}
</style>

 3、视频监控-效果图