Using TcPlayer in vue3 to realize video monitoring-code

1. Import the js file

Introduce the cdn of the player in the head of index.html

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

 2. Main code

This is mainly to switch the layout of the monitoring screen by clicking the button and using the grid layout, and the initialization of tcplayer.js will not be displayed

<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. Video surveillance - renderings