基于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();
      }