基于videojs和vue2写的视频播放器

基于videojs和vue写的视频播放器

视频带149分屏，主要是没做到响应式布局，不支持rstp的直播，需要后台转流，左侧树带拖拽功能！下面是代码片段

<template>
  <div class="main">
    <div class="left">
      <el-input
        class="selectInput"
        placeholder="输入通道名"
        :clearable="true"
        v-model="filterText"
      >
      </el-input>
      <el-tree
        ref="tree"
        :data="treeData"
        :props="props"
        node-key="id"
        :default-expanded-keys="['S4NbecfYA1DQ1HUOF0KP14']"
        check-strictly
        highlight-current
        :filter-node-method="filterNode"
        @node-click="nodeClick"
      >
        <template #default="{ node }">
          <div class="custom-tree-node" style="user-select: none">
            <span class="name" @mousedown="onMousedown(node)">{{
              node.label
            }}</span>
          </div>
        </template>
      </el-tree>
    </div>

    <div class="right">
      <div class="title">
        <div class="text">{{ showTitle }}</div>
        <div class="exit" title="退出" @click="toclose">
          <svg-icon
            :icon-class="'close'"
            class="close"
            @click="toclose"
          ></svg-icon>
          <div class="close_text" @click="toclose">关闭</div>
        </div>
      </div>
      <div class="right_main" ref="right_main">
        <div class="player" ref="one" v-show="status === 1">
          <video
            ref="player"
            id='player'
            preload="auto"
            class="video-js vjs-default-skin vjs-big-play-centered"
          ></video>
        </div>
        <div
          class="playerfour"
          v-show="status === 4"
          v-for="item in ['play41', 'play42', 'play43', 'play44']"
          :class="item === activeName ? 'activeBorder' : 'playerfour'"
          @click="changeSrc(item)"
          :key="item"
        >
          <video
            :ref="item"
            preload="auto"
            :id="item"
            class="video-js vjs-default-skin vjs-big-play-centered"
          ></video>
        </div>
        <div
          class="playernine"
          :class="v === activeName ? 'activeBorder' : 'playernine'"
          @click="changeSrc(v)"
          v-show="status===9"
          v-for="v in nineArray"
          :key="v"
        >
          <video
            :ref="v"
            :id="v"
            preload="auto"
            class="video-js vjs-default-skin vjs-big-play-centered"
          ></video>
        </div>
      </div>
      <div class="right_bottom">
        <div class="left_b">
          <div class="one"></div>
          <div class="two"></div>
          <div class="three"></div>
        </div>
        <div class="right_b">
          <div class="show_type">
            <div
              class="one_t"
              :class="lookStatus === '预览' ? 'blue_t' : ''"
              @click="goLook('预览')"
            >
              预览
            </div>
            <div
              class="two_t"
              :class="lookStatus === '录像' ? 'blue_t' : ''"
              @click="goLook('录像')"
            >
              录像
            </div>
          </div>
          <div class="one" @click="changeStatus(1)"></div>
          <div class="two" @click="changeStatus(4)"></div>
          <div class="three" @click="changeStatus(9)"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="Console" v-if="false">
    <div class="top">
      <div class="text">云台控制</div>
      <div class="xxx"></div>
    </div>
    <div class="bottom">
      <div class="circular">
        <div class="b1" @mousedown="down('top')"></div>
        <div class="b2"></div>
        <div class="b3"></div>
        <div class="b4"></div>
        <div class="small-circular"></div>
      </div>
    </div>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
import videojs from "video.js";
import "video.js/dist/video-js.css";
import {
  setTimers,
  getTree,
  getPassageByGis,
  getOrgDevTreePassage,
  getOrgDevTreeEquipment,
  realMonitor,
  queryPassage,
} from "./service/index.js";
import VideojsZhcnLanguage from "video.js/dist/lang/zh-CN.json";
videojs.addLanguage("zh-CN", VideojsZhcnLanguage); //设置中文
export default {
  name: "VideoPlayer",
  data() {
    return {
      props: {
        label: "text",
        value: "id",
        isLeaf: "leaf",
      },
      isdown: false,
      filterText: "",
      tu1: require("./source/image/test1.jpeg"),
      lookStatus: "预览",
      play1: null,
      showArray: [],
      activeName: "",
      activeName9: "",
      srcVideo: "",
      showTitle: "",
      activeBorder: "playerfour",
      nineArray: [
        "play91",
        "play92",
        "play93",
        "play94",
        "play95",
        "play96",
        "play97",
        "play98",
        "play99",
      ],
      status: 1,
      options: {
        lang: "zh-CN", //设置中文
        bigPlayButton: false, //是否显示播放按钮
        controls: true, //开启交互，即是用户可控。
        muted: true, //开启视频时是否静音
        fluid: false, //根据外层css样式大小，自动填充宽高！比较实用，可搭配响应式
        loop: true, //循环播放
        controlBar: {
          fullscreenToggle: true,
          // 音量条的横向还是纵向显示
          volumePanel: {
            inline: false,
          },
        },
        sourceOrder: true,
        reload: "auto", //重载
        autoplay: true,
        //其余设置根据需求添加！
        poster: "", //视频封面
        techOrder: ["html5", "flash"],
        flash: {
          swf: "videojs/video-js.swf",
        },
      },
      options41: {
        lang: "zh-CN", //设置中文
        width: 0,
        height: 0,
        controls: true, //开启交互，即是用户可控。
        muted: true, //开启视频时是否静音
        fluid: false, //根据外层css样式大小，自动填充宽高！比较实用，可搭配响应式
        reload: "auto", //重载
        autoplay: true,
        bigPlayButton: false, //是否显示播放按钮
        loop: true, //循环播放
        //其余设置根据需求添加！
        poster: "", //视频封面
        controlBar: {
          fullscreenToggle: true,
          // 音量条的横向还是纵向显示
          volumePanel: {
            inline: false,
          },
        },
      },
      treeData: [],
    };
  },

  watch: {
    filterText(val) {
      try {
        console.log(val, val, "val123");
        this.$refs.tree.filter(val);
        console.log(this.treeData, "this.treeData", this.$refs.tree);
      } catch (error) {
        console.log(error);
      }
    },
    activeName(val) {
      if (document.getElementById(val).getAttribute("name")) {
        this.showTitle = document.getElementById(val).getAttribute("name");
      } else {
        this.showTitle = "";
      }
    },
  },
  async mounted() {
    this.initVideo();
    this.options.width = this.$refs.right_main.offsetWidth / 1;
    this.options.height = this.$refs.right_main.offsetHeight / 1;
    this.player1 = videojs(
      this.$refs.player,
      this.options,
      function onPlayerReady() {
        console.log("onPlayerReady", this);
      }
    );
    this.setTimer();
    let { id, status, jwd, radius } = this.$route.params;
    try {
      if (id && status && jwd && radius) {
        let array = jwd.split(",");
        this.getTree();
        this.getPassageByGis(array, radius, id);
        this.status = 1;
        let { data } = await realMonitor({
          channelId: id,
          scheme: "HLS",
        });
        this.$nextTick(() => {
          this.changeSrcToShow("player", data, "application/x-mpegURL");
        });
      } else if (id) {
        console.log(11111111111, "2222222222");
        let { data } = await realMonitor({
          channelId: id,
          scheme: "HLS",
        });
        this.queryPassage(id);
        this.getTree();
        this.$nextTick(() => {
          this.changeSrcToShow("player", data, "application/x-mpegURL");
        });
      } else {
        this.status = 4;
        this.getTree();
      }
    } catch (error) {
      console.log(error);
    }
    setInterval(() => {
      this.setTimer();
    }, 120000);
  },
  methods: {
    nodeCollapse(data, node, self) {
      data.children.push({ test: "111" });
      data.children = data.children.filter((item) => !item.name);
    },
    initVideo() {
      this.options41.width = this.$refs.right_main.offsetWidth / 2;
      this.options41.height = this.$refs.right_main.offsetHeight / 2;
      this.player41 = videojs(
        this.$refs.play41[0],
        this.options41,
        function onPlayerReady() {
          console.log("onPlayerReady", this);
        }
      );
      this.player42 = videojs(
        this.$refs.play42[0],
        {
          width: this.$refs.right_main.offsetWidth / 2,
          height: this.$refs.right_main.offsetHeight / 2,
          controls: true, //开启交互，即是用户可控。
          muted: true, //开启视频时是否静音
          bigPlayButton: false, //是否显示播放按钮
          fluid: false, //根据外层css样式大小，自动填充宽高！比较实用，可搭配响应式
          loop: true, //循环播放
          lang: "zh-CN", //设置中文
          reload: "auto", //重载
          autoplay: true,
          controlBar: {
            fullscreenToggle: true,
            // 音量条的横向还是纵向显示
            volumePanel: {
              inline: false,
            },
          },
          //其余设置根据需求添加！
          poster: "", //视频封面
        },
        function onPlayerReady() {
          console.log("onPlayerReady", this);
        }
      );
      this.player43 = videojs(
        this.$refs.play43[0],
        {
          width: this.$refs.right_main.offsetWidth / 2,
          height: this.$refs.right_main.offsetHeight / 2,
          controls: true, //开启交互，即是用户可控。
          muted: true, //开启视频时是否静音
          bigPlayButton: false, //是否显示播放按钮
          autoplay: true,
          lang: "zh-CN", //设置中文
          loop: true, //循环播放
          fluid: false, //根据外层css样式大小，自动填充宽高！比较实用，可搭配响应式
          reload: "auto", //重载
          controlBar: {
            fullscreenToggle: true,
            // 音量条的横向还是纵向显示
            volumePanel: {
              inline: false,
            },
          },
          //其余设置根据需求添加！
          poster: "", //视频封面
        },
        function onPlayerReady() {
          console.log("onPlayerReady", this);
        }
      );
      this.player44 = videojs(
        this.$refs.play44[0],
        {
          width: this.$refs.right_main.offsetWidth / 2,
          height: this.$refs.right_main.offsetHeight / 2,
          controls: true, //开启交互，即是用户可控。
          muted: true, //开启视频时是否静音
          loop: true, //循环播放
          bigPlayButton: false, //是否显示播放按钮
          autoplay: true,
          lang: "zh-CN", //设置中文
          fluid: false, //根据外层css样式大小，自动填充宽高！比较实用，可搭配响应式
          reload: "auto", //重载
          controlBar: {
            fullscreenToggle: true,
            // 音量条的横向还是纵向显示
            volumePanel: {
              inline: false,
            },
          },
          //其余设置根据需求添加！
          poster: "", //视频封面
        },
        function onPlayerReady() {
          console.log("onPlayerReady", this);
        }
      );
      this.player91 = videojs(
        this.$refs.play91[0],
        {
          width: this.$refs.right_main.offsetWidth / 3,
          height: this.$refs.right_main.offsetHeight / 3,
          controls: true, //开启交互，即是用户可控。
          muted: true, //开启视频时是否静音
          loop: true, //循环播放
          autoplay: true,
          bigPlayButton: false, //是否显示播放按钮
          lang: "zh-CN", //设置中文
          fluid: false, //根据外层css样式大小，自动填充宽高！比较实用，可搭配响应式
          reload: "auto", //重载
          controlBar: {
            fullscreenToggle: true,
            // 音量条的横向还是纵向显示
            volumePanel: {
              inline: false,
            },
          },
          //其余设置根据需求添加！
          poster: "", //视频封面
        },
        function onPlayerReady() {
          console.log("onPlayerReady", this);
        }
      );
      this.player92 = videojs(
        this.$refs.play92[0],
        {
          width: this.$refs.right_main.offsetWidth / 3,
          height: this.$refs.right_main.offsetHeight / 3,
          controls: true, //开启交互，即是用户可控。
          muted: true, //开启视频时是否静音
          autoplay: true,
          bigPlayButton: false, //是否显示播放按钮
          lang: "zh-CN", //设置中文
          loop: true, //循环播放
          fluid: false, //根据外层css样式大小，自动填充宽高！比较实用，可搭配响应式
          reload: "auto", //重载
          controlBar: {
            fullscreenToggle: true,
            // 音量条的横向还是纵向显示
            volumePanel: {
              inline: false,
            },
          },
          //其余设置根据需求添加！
          poster: "", //视频封面
        },
        function onPlayerReady() {
          console.log("onPlayerReady", this);
        }
      );
      this.player93 = videojs(
        this.$refs.play93[0],
        {
          width: this.$refs.right_main.offsetWidth / 3,
          height: this.$refs.right_main.offsetHeight / 3,
          controls: true, //开启交互，即是用户可控。
          muted: true, //开启视频时是否静音
          loop: true, //循环播放
          autoplay: true,
          bigPlayButton: false, //是否显示播放按钮
          lang: "zh-CN", //设置中文
          fluid: false, //根据外层css样式大小，自动填充宽高！比较实用，可搭配响应式
          reload: "auto", //重载
          controlBar: {
            fullscreenToggle: true,
            // 音量条的横向还是纵向显示
            volumePanel: {
              inline: false,
            },
          },
          //其余设置根据需求添加！
          poster: "", //视频封面
        },
        function onPlayerReady() {
          console.log("onPlayerReady", this);
        }
      );
      this.player94 = videojs(
        this.$refs.play94[0],
        {
          width: this.$refs.right_main.offsetWidth / 3,
          height: this.$refs.right_main.offsetHeight / 3,
          controls: true, //开启交互，即是用户可控。
          muted: true, //开启视频时是否静音
          loop: true, //循环播放
          bigPlayButton: false, //是否显示播放按钮
          autoplay: true,
          lang: "zh-CN", //设置中文
          fluid: false, //根据外层css样式大小，自动填充宽高！比较实用，可搭配响应式
          reload: "auto", //重载
          controlBar: {
            fullscreenToggle: true,
            // 音量条的横向还是纵向显示
            volumePanel: {
              inline: false,
            },
          },
          //其余设置根据需求添加！
          poster: "", //视频封面
        },
        function onPlayerReady() {
          console.log("onPlayerReady", this);
        }
      );
      this.player95 = videojs(
        this.$refs.play95[0],
        {
          width: this.$refs.right_main.offsetWidth / 3,
          height: this.$refs.right_main.offsetHeight / 3,
          controls: true, //开启交互，即是用户可控。
          loop: true, //循环播放
          bigPlayButton: false, //是否显示播放按钮
          autoplay: true,
          lang: "zh-CN", //设置中文
          muted: true, //开启视频时是否静音
          fluid: false, //根据外层css样式大小，自动填充宽高！比较实用，可搭配响应式
          reload: "auto", //重载
          controlBar: {
            fullscreenToggle: true,
            // 音量条的横向还是纵向显示
            volumePanel: {
              inline: false,
            },
          },
          //其余设置根据需求添加！
          poster: "", //视频封面
        },
        function onPlayerReady() {
          console.log("onPlayerReady", this);
        }
      );
      this.player96 = videojs(
        this.$refs.play96[0],
        {
          width: this.$refs.right_main.offsetWidth / 3,
          height: this.$refs.right_main.offsetHeight / 3,
          controls: true, //开启交互，即是用户可控。
          muted: true, //开启视频时是否静音
          loop: true, //循环播放
          bigPlayButton: false, //是否显示播放按钮
          autoplay: true,
          lang: "zh-CN", //设置中文
          fluid: false, //根据外层css样式大小，自动填充宽高！比较实用，可搭配响应式
          reload: "auto", //重载
          controlBar: {
            fullscreenToggle: true,
            // 音量条的横向还是纵向显示
            volumePanel: {
              inline: false,
            },
          },
          //其余设置根据需求添加！
          poster: "", //视频封面
        },
        function onPlayerReady() {
          console.log("onPlayerReady", this);
        }
      );
      this.player97 = videojs(
        this.$refs.play97[0],
        {
          width: this.$refs.right_main.offsetWidth / 3,
          height: this.$refs.right_main.offsetHeight / 3,
          loop: true, //循环播放
          bigPlayButton: false, //是否显示播放按钮
          autoplay: true,
          lang: "zh-CN", //设置中文
          controls: true, //开启交互，即是用户可控。
          muted: true, //开启视频时是否静音
          fluid: false, //根据外层css样式大小，自动填充宽高！比较实用，可搭配响应式
          reload: "auto", //重载
          controlBar: {
            fullscreenToggle: true,
            // 音量条的横向还是纵向显示
            volumePanel: {
              inline: false,
            },
          },
          //其余设置根据需求添加！
          poster: "", //视频封面
        },
        function onPlayerReady() {
          console.log("onPlayerReady", this);
        }
      );
      this.player98 = videojs(
        this.$refs.play98[0],
        {
          width: this.$refs.right_main.offsetWidth / 3,
          height: this.$refs.right_main.offsetHeight / 3,
          loop: true, //循环播放
          autoplay: true,
          bigPlayButton: false, //是否显示播放按钮
          lang: "zh-CN", //设置中文
          controls: true, //开启交互，即是用户可控。
          muted: true, //开启视频时是否静音
          fluid: false, //根据外层css样式大小，自动填充宽高！比较实用，可搭配响应式
          reload: "auto", //重载
          controlBar: {
            fullscreenToggle: true,
            // 音量条的横向还是纵向显示
            volumePanel: {
              inline: false,
            },
          },
          //其余设置根据需求添加！
          poster: "", //视频封面
        },
        function onPlayerReady() {
          console.log("onPlayerReady", this);
        }
      );
      this.player99 = videojs(
        this.$refs.play99[0],
        {
          width: this.$refs.right_main.offsetWidth / 3,
          height: this.$refs.right_main.offsetHeight / 3,
          loop: true, //循环播放
          autoplay: true,
          bigPlayButton: false, //是否显示播放按钮
          lang: "zh-CN", //设置中文
          controls: true, //开启交互，即是用户可控。
          muted: true, //开启视频时是否静音
          fluid: false, //根据外层css样式大小，自动填充宽高！比较实用，可搭配响应式
          reload: "auto", //重载
          controlBar: {
            fullscreenToggle: true,
            // 音量条的横向还是纵向显示
            volumePanel: {
              inline: false,
            },
          },
          //其余设置根据需求添加！
          poster: "", //视频封面
        },
        function onPlayerReady() {
          console.log("onPlayerReady", this);
        }
      );
    },
    filterNode(value, data) {
      console.log(value, "value");
      if (!value) {
        return true;
      }
      console.log(value, data, "1111111");
      if (data.text) {
        return data.text.split("").includes(value);
      }
    },
    async Wait() {
      try {
        setTimeout(() => {});
      } catch (error) {
        console.log(error);
      }
    },
    async queryPassage(id) {
      try {
        let { data } = await queryPassage({
          passageId: id,
        });
        this.showTitle = data[0].name;
      } catch (error) {
        console.log(error);
      }
    },
    async onMousedown(node) {
      if(this.isdown){
        return
      }
      this.isdown = true;
      if (node.data.nodeType==='3.0') {
        try {
          let { data } = await realMonitor({
          channelId: node.data.id,
          scheme: "HLS",
        });
        this.srcVideo = data;
        } catch (error) {
          console.log(error);
        }
        let dom = document.createElement("div");
        dom.innerText = node.data.text;
        dom.style.display = "none";
        dom.style.border = "1px solid red";
        dom.classList.add("drag-div-box");
        document.body.appendChild(dom);
        let moveFlag = false;
        document.onmousemove = (e) => {
          if(!this.isdown)return;
          e.preventDefault();
          if (!moveFlag) {
            // this.$emit("drag-start", node);
            moveFlag = true;
          }
          dom.style.position = "absolute";
          dom.style.left = e.clientX + 3 + "px";
          dom.style.top = e.clientY + 3 + "px";
          dom.style.zIndex = 1000;
          dom.style.display = "block";
          dom.style.backgroundColor = "#c9e9f7";
          dom.style.color = "#333";
          dom.style.padding = "5px 5px";
          dom.style.fontSize = "16px";
          dom.style.lineHeight = "1";
          dom.style.borderRadius = "4px";
        };
        // 鼠标已经抬起
        document.onmouseup = (e) => {
          this.isdown = false;
          document.body.removeChild(dom);
          document.onmousemove = null; // 当鼠标弹起时移出移动事件
          document.onmouseup = null; // 移出up事件，清空内存
          if (moveFlag) {
            // this.$emit("drag-end", node);
            if (this.status === 1) {
              if (this.d("player")) {
                this.showTitle = node.data.text;
                let a = this.srcVideo;
                this.changeSrcToShow("player", a, "application/x-mpegURL");
              }
            } else if (this.status === 4) {
              let array = ["play41", "play42", "play43", "play44"];
              array.map((v) => {
                if (this.d(v, true)) {
                  this.showTitle = node.data.text;
                  let a = this.srcVideo;
                  document
                    .getElementById(v)
                    .setAttribute("name", node.data.text);
                  this.changeSrcToShow(v, a, "application/x-mpegURL", true);
                  return;
                }
              });
            } else {
              this.nineArray.map((v) => {
                if (this.d(v, true)) {
                  let a = this.srcVideo;
                  // this.showTitle = node.data.name;
                  document
                    .getElementById(v)
                    .setAttribute("name", node.data.text);
                  this.changeSrcToShow(v, a, "application/x-mpegURL", true);
                  return;
                }
              });
            }
          }
        };
      }
    },
    d(id, type) {
      if (type) {
        var wx = window.event.clientX;
        var wy = window.event.clientY;
        var d_left = this.$refs[id][0].getBoundingClientRect().left;
        var d_top = this.$refs[id][0].getBoundingClientRect().top;
        var d_width = this.$refs[id][0].clientWidth;
        var d_height = this.$refs[id][0].clientHeight;
        if (
          wx < d_left ||
          wy < d_top ||
          wx > d_left + d_width ||
          wy > d_top + d_height
        ) {
          return false;
        } else {
          return true;
        }
      } else {
        var wx = window.event.clientX;
        var wy = window.event.clientY;
        var d_left = this.$refs[id].getBoundingClientRect().left;
        var d_top = this.$refs[id].getBoundingClientRect().top;
        var d_width = this.$refs[id].clientWidth;
        var d_height = this.$refs[id].clientHeight;
        if (
          wx < d_left ||
          wy < d_top ||
          wx > d_left + d_width ||
          wy > d_top + d_height
        ) {
          return false;
        } else {
          return true;
        }
      }
    },
    goLook(text) {
      this.lookStatus = text;
    },
    changeStatus(number) {
      this.status = number;
      if(number===1){
        this.showTitle = document.getElementById('player').getAttribute("name");
      }else if(["play41", "play42", "play43", "play44"].includes(
              this.activeName
            )&& number===4){
              this.showTitle = document.getElementById(this.activeName).getAttribute("name");

      }else{
        this.showTitle = document.getElementById(this.activeName).getAttribute("name");
      }
    },
    changeSrcToShow(Ref, Src, Type = "application/x-mpegURL", type) {
      if (this.$refs[Ref] && type) {
        console.log("改变");
        videojs(this.$refs[Ref][0]).src(Src);
        videojs(this.$refs[Ref][0]).type(Type);
      } else if (this.$refs) {
        console.log("改变");
        videojs(this.$refs[Ref]).src(Src);
        console.log(videojs(this.$refs[Ref]), "type");
        videojs(this.$refs[Ref]).type(Type);
      } else {
        console.log("error", "dom不存在！");
      }
    },
    async loadTree(node, resolve) {
      console.log(node, "data");
      if (node.level === 0) {
        let { data } = await getTree();
        resolve(data);
      } else {
        let { data } = await getOrgDevTreePassage({
          nodeId: node.data.id,
          paging: {
            pageNumber: 1,
            pageSize: 100,
          },
        });
        let data1 = await getTree({
          parentid: node.data.id,
        });
        console.log(data1.data[0].children, "data1");
        if (data && data.length > 0) {
          data.map((v) => {
            v.text = v.name;
            v.leaf = true;
          });
        }
        if (data1.data[0].children) {
          data1.data[0].children.map((v) => {
            data.unshift(v);
          });
        }
        resolve(data);
      }
    },
    async getTree() {
      try {
        let { data } = await getTree();
        this.treeData = data;
        console.log(data, "treedata");
      } catch (error) {}
    },
    async nodeClick(node) {
      if (node.nodeType === "3.0") {
        try {
          let { data } = await realMonitor({
            channelId: node.id,
            scheme: "HLS",
          });
          if (
            this.activeName &&
            ["play41", "play42", "play43", "play44"].includes(
              this.activeName
            ) &&
            this.status === 4
          ) {
            this.showTitle = node.text;
            document
              .getElementById(this.activeName)
              .setAttribute("name", node.text);
            // console.log(document.getElementById(this.activeName).getAttribute('name'),'this.activeName');
            this.changeSrcToShow(
              this.activeName,
              data,
              "application/x-mpegURL",
              true
            );
          } else if (
            this.activeName &&
            this.nineArray.includes(this.activeName) &&
            this.status === 9
          ) {
            this.showTitle = node.text;
            document
              .getElementById(this.activeName)
              .setAttribute("name", node.text);
            this.changeSrcToShow(
              this.activeName,
              data,
              "application/x-mpegURL",
              true
            );
          } else if (!this.activeName && this.status === 4) {
            this.activeName = ["play41", "play42", "play43", "play44"][0];
            this.showTitle = node.text;
            document
              .getElementById(this.activeName)
              .setAttribute("name", node.text);
            this.changeSrcToShow(
              this.activeName,
              data,
              "application/x-mpegURL",
              true
            );
          } else if (!this.activeName && this.status === 9) {
            this.activeName = this.nineArray[0];
            this.showTitle = node.text;
            document
              .getElementById(this.activeName)
              .setAttribute("name", node.text);
            this.changeSrcToShow(
              this.activeName,
              data,
              "application/x-mpegURL",
              true
            );
          } else {
            document
              .getElementById('player')
              .setAttribute("name", node.text);
            this.showTitle = node.text;
            this.changeSrcToShow("player", data, "application/x-mpegURL");
          }
        } catch (error) {
          console.log(error);
        }
      }
    },
    async nodeExpand(node) {
      console.log(node, "node");
      if (node.children[0].test) {
        node.children.splice(0, 1);
      }
      if (node.name) {
        try {
          let { data } = await getOrgDevTreeEquipment({
            nodeId: node.id,
            paging: {
              pageNumber: 0,
              pageSize: 100,
            },
          });
          console.log(data, "data,hsebei");
        } catch (error) {}
      } else {
        try {
          let { data } = await getOrgDevTreePassage({
            nodeId: node.id,
            paging: {
              pageNumber: 1,
              pageSize: 100,
            },
          });

          if (data && data.length > 0) {
            console.log(node, "data");
            data.map((v) => {
              v.text = v.name;
              node.children.push(v);
            });
          }
        } catch (error) {
          console.log(error);
        }
      }
    },
    async getORG(node) {
      try {
        let { data } = await getOrgDevTreePassage({
          nodeId: node.id,
          paging: {
            pageNumber: 1,
            pageSize: 100,
          },
        });
        data.map((v) => {
          v.text = v.name;
        });
        return data;
      } catch (error) {
        console.log(error);
      }
    },
    changeSrc(item) {
      this.activeName = item;
      console.log(
        this.$refs[this.activeName][0],
        this.$refs[this.activeName][0].offsetWidth,
        this.$refs[this.activeName][0].offsetHeight,
        "this.$refs.item"
      );
    },
    // 截图
    crossTabletoImage() {
      const canvas = document.createElement("canvas");
      const canvasBox = document.querySelector(".imageBox");
      const width = canvasBox.clientWidth;
      const height = canvasBox.clientHeight;
      // 宽高 * 2 并放大 2 倍 是为了防止图片模糊
      // canvas.width = width * 2
      // canvas.height = height * 2
      canvas.width = width;
      canvas.height = height;
      canvas.style.width = width + "px";
      canvas.style.height = height + "px";
      const context = canvas.getContext("2d");
      // context.scale(2, 2)
      context.scale(1, 1);
      const options = {
        backgroundColor: null,
        canvas: canvas,
        useCORS: true,
      };
      html2canvas(canvasBox, options).then((canvas) => {
        const dataURL = canvas.toDataURL("image/png"); // 图片格式转成base64
        this.downloadImage(dataURL);
      });
    },
    down(text) {},
    async setTimer() {
      await setTimers({});
    },
    async getTRees() {
      let { data } = await getTree();
      // this.treeData = data;
      console.log(data, "data");
    },
    async getOrgDevTreePassage() {
      let { data } = await getOrgDevTreePassage({
        nodeId: "S4NbecfYA1DQAT48FEMDRC",
        paging: {
          pageNumber: 1,
          pageSize: 100,
        },
      });
      console.log(data, "data,data");
    },
    //获取视频通道的方法
    async getPassageByGis(jwd, r, id) {
      try {
        let { data } = await getPassageByGis({
          coordinates: jwd,
          radius: r,
        });
        console.log(data, "datagpx");
        if (data && data.length > 0) {
          data.map((v) => {
            if (v.id == id) {
              this.showTitle = v.name;
            }
            v.text = v.name;
            v.nodeType = "3.0";
            v.leaf = true;
          });
        }
        this.treeData = data;
      } catch (error) {}
    },
    toclose() {
      this.$confirm("是否确定关闭?", "关闭窗口", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          window.close();
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>

<style scoped lang='scss'>
//屏蔽单击暂停
.vjs-tech {
  pointer-events: none;
}
.activeBorder {
  video:first-child {
    border: 1px solid red !important;
  }
}
.main {
  width: 100vw;
  height: 100vh;
  display: flex;
  background: rgba(7, 23, 45, 1);
  .left {
    flex: 0 0 14%;
    overflow: auto;
    height: 100%;
    margin-right: 1%;
    background: rgba(15, 49, 96, 1);
    .selectInput {
      margin-bottom: 10px;
      background: #0b2444;
      border-radius: 0px 0px 4px 0px;
      :deep(.el-input__inner) {
        background: transparent;
        border: none;
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #cfd8e3;
        line-height: 10px;
      }
    }
    :deep(.el-tree) {
      background-color: transparent;
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #e5e5e5;
      line-height: 10px;
    }
    :deep(.el-tree--highlight-current) {
      background-color: transparent;
    }
    :deep(.is-focusable) {
      background-color: transparent;
    }
    :deep(.is-focusable:hover) {
      background-color: transparent;
    }
    :deep(.is-current) {
      color: #2dc2fe;
      background: #294466;
      border-radius: 8px;
    }
    :deep(.is-current:hover) {
      background-color: transparent;
    }
    :deep(.el-tree-node__content) {
      background-color: transparent;
    }
    :deep(.el-tree-node) {
      padding: 5px 0px;
    }
  }
  .right {
    flex: 0 0 85%;
    height: 100%;
    background: rgba(15, 49, 96, 1);
    display: flex;
    flex-direction: column;
    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex: 0 0 50px;
      background: rgba(15, 45, 96, 1);
      .exit {
        width: 80px;
        height: 30px;
        cursor: pointer;
        margin-right: 5px;
        display: flex;
        align-items: center;
        .close {
          color: #9bc5d4;
          font-size: 20px;
          margin-left: 5px;
          margin-right: 0px;
          cursor: pointer;
        }
        .close_text {
          cursor: pointer;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #88b4c9;
        }
      }
      .text {
        margin-left: 10px;
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #00ccff;
        line-height: 10px;
      }
    }
    .right_bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(12, 38, 76, 1);
      flex: 0 0 50px;
      .left_b {
        display: flex;
        align-items: center;
        justify-content: left;
        height: 100%;
        .one {
          width: 26px;
          height: 22px;
          cursor: pointer;
          margin: 0 39px;
          background-image: url("./images/相机.png");
          background-size: 100% 100%;
          background-position: center;
        }
        .two {
          width: 26px;
          height: 22px;
          cursor: pointer;
          margin-right: 39px;
          background-image: url("./images/video.png");
          background-size: 100% 100%;
          background-position: center;
        }
        .three {
          width: 26px;
          height: 22px;
          cursor: pointer;
          margin-right: 39px;
          background-image: url("./images/control.png");
          background-size: 100% 100%;
          background-position: center;
        }
      }
      .right_b {
        display: flex;
        align-items: center;
        justify-content: right;
        height: 100%;
        .show_type {
          width: 164px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid #125dcc;
          border-radius: 4px;
          cursor: pointer;
          .one_t {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            flex: 1;
            font-size: 18px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #e5e5e5;
            line-height: 10px;
            background: transparent;
            border-radius: 4px 0 0 4px;
          }
          .two_t {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            flex: 1;
            font-size: 18px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #e5e5e5;
            line-height: 10px;
            background: transparent;
          }
          .blue_t {
            background: #125dcc !important;
          }
        }
        .one {
          width: 26px;
          height: 22px;
          cursor: pointer;
          margin: 0 39px;
          background-image: url("./images/s1.png");
          background-size: 100% 100%;
          background-position: center;
        }
        .two {
          width: 26px;
          height: 22px;
          cursor: pointer;
          margin-right: 39px;
          background-image: url("./images/s2.png");
          background-size: 100% 100%;
          background-position: center;
        }
        .three {
          width: 26px;
          height: 22px;
          cursor: pointer;
          margin-right: 39px;
          background-image: url("./images/s3.png");
          background-size: 100% 100%;
          background-position: center;
        }
      }
    }
    .right_main {
      flex: 1;
      display: flex;
      overflow: auto;
      /* wrap:  在必要的时候进行换行*/
      flex-wrap: wrap;
      video {
        background: rgba(52, 52, 52, 1);
        border: 0.5px solid black;
      }
      .player {
        flex: 1;
        height: 100%;
      }
      .playerfour {
        flex: 0 0 49%;
        height: 49%;
      }
      .playernine {
        flex: 0 0 32%;
        height: 32%;
      }
    }
  }
}
.Console {
  width: 230px;
  height: 230px;
  position: relative;
  bottom: 310px;
  left: 19%;
  display: flex;
  flex-direction: column;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 0 0 45px;
    width: 100%;
    background: #132b4c;
    .text {
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #e5e5e5;
      line-height: 10px;
      margin-left: 10px;
    }
    .xxx {
      width: 13px;
      height: 12px;
      margin-right: 10px;
      background: url("./images/xxx.png");
      background-position: center;
      background-size: 100% 100%;
    }
  }
  .bottom {
    flex: 1;
    width: 100%;
    background: #07172d;
    display: flex;
    justify-content: center;
    align-items: center;
    .circular {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 150px;
      height: 150px;
      border-top: 1px solid #ffffff;
      border-bottom: 1px solid #ffffff;
      border-radius: 50%;
      position: relative;
      .b1 {
        width: 48px;
        height: 44px;
        background: url("./images/topblack.png") no-repeat center 100% 100%;
        position: absolute;
        left: 1px;
        top: 1px;
      }
      .small-circular {
        width: 60px;
        height: 60px;
        border-right: 1px solid #ffffff;
        border-left: 1px solid #ffffff;
        border-radius: 50%;
      }
    }
  }
}
</style>

效果图