【知识分享】Vue实现视频的不同分屏切换并播放流

代码部分：

<template>

  <div>

    <el-row>

      <el-col :span="4" style="height: 100%">

        <h4>视频列表</h4>

        <el-divider style="width: 75%; margin: 10px 0; overflow-y: auto" />

        <el-tree

          style="max-height: 660px; overflow: auto"

          :data="data"

          default-expand-all

          node-key="id"

          :props="defaultProps"

          :check-on-click-node="true"

          :check-strictly="true"

          @check="treeCheck"

          ref="treeForm"

        ></el-tree>

      </el-col>

      <el-col :span="20">

        <el-row v-if="true" style="margin-bottom: 16px">

          <el-button @click="changeScreen(1)">大屏</el-button>

          <el-button @click="changeScreen(4)">四分屏</el-button>

          <el-button @click="changeScreen(9)">九分屏</el-button>

        </el-row>

        <div v-if="screenNumber == 1">

          <el-row>

            <el-col style="height: 660px">

              <VideoComponent :code="cameraCode" />

              <!-- <el-image style="width: 100%; height: 100%" :src="image1src" alt="图片丢失了" /> -->

            </el-col>

          </el-row>

        </div>

        <div v-if="screenNumber == 4">

          <el-row :gutter="20">

            <el-col :span="12" style="height: 340px">

              <VideoComponent :code="cameraFour1Code" />

            </el-col>

            <el-col :span="12" style="height: 340px">

              <VideoComponen