zhgdyun/src/components/videoModule/videoModule.vue

<template>
  <!-- 下拉框选择视频，需传入视频列表 -->
  <div class="fullHeight videoOverview" id="videoOverview">
    <div v-show="showPlaybacks" class="videoTop">
    <span
      class="videoType"
      :class="{ active: videoType == 1 }"
      @click="videoType = 1"
      >{{ $t("message.videoManage.live") }}</span
        >
        <span
          v-show="showPlaybacks"
          class="videoType"
          :class="{ active: videoType == 2 }"
          @click="
            videoType = 2;
            winNum = 1;
            activeWinIndex = 1;
          "
          >{{ $t("message.videoManage.playback") }}</span
        >
      </div>
    <leCheng
      v-if="pluginType == 'lecheng'"
      :url="urls"
      :token="lcToken"
    ></leCheng>
    <iscPlugin
      v-else-if="pluginType == 'isc' && videoType == 1"
      :type="type"
      :isIframe="isIframe"
      :devList="devList"
      :class="{
        isDockingToWoer: isDockingToWoer,
        isLongguangIframe: isIframe,
        isFullScreen: isFullScreen,
      }"
      :style="{ left: worMenuWidth + 'px' }"
    ></iscPlugin>
     <!-- 回放插件 -->
     <Back v-else-if="pluginType == 'isc' && videoType == 2" :devList="devList" >
    </Back>
    <div v-else-if="pluginType == 'xiongmai'">
      <div id="wrapper" style="width: 1570px; height: 830px;"></div>
    </div>
    <div
      v-else
      :class="
        !bottomMod
          ? 'oneVideoContent videoContent' + winNum
          : 'videoContent videoContent' + winNum
      "
    >
      <div
        class="videoItem"
        v-for="item in initDivNum"
        :key="item"
        :class="{ active: activeWinIndex == item }"
        @click="activeWinIndex = item"
        v-show="item <= winNum"
      >
        <ysyPlayAndPlayback
          :ref="'ysy' + item"
          v-if="pluginType == 'ysy'"
          :ysyParams="ysyParams"
        ></ysyPlayAndPlayback>
        <ckPlayer
          @selectWin="selectWin"
          :showSelectBtn="true"
          v-if="pluginType == 'ckPlayer'"
          :url="urls[item]"
          :index="item"
        ></ckPlayer>
        <div class="videoInner2" v-if="pluginType == 'videojs'">
          <div class="top">
            <span class="winNumName"
              >{{ $t("message.videoManage.video")
              }}{{ $t("message.videoManage.window") }}{{ item }}</span
            >
            <img
              src="@/assets/images/overview3/close.png"
              class="close"
              @click="clocseVideo(item)"
            />
          </div>
          <div class="noVideoBox noVideoBox1">
            <img src="@/assets/images/overview3/noVideo.png" class="close" />
            <p>
              {{ $t("message.videoManage.no")
              }}{{ $t("message.videoManage.video") }}
            </p>
          </div>
          <div class="noVideoBox noVideoBox2" style="display:none;">
            <img
              src="@/assets/images/longguang/loading.png"
              class="close"
              v-if="company == 'longguang'"
            />
            <img
              src="@/assets/images/overview3/loading.png"
              class="close"
              v-else
            />
            <p>
              {{ $t("message.videoManage.video")
              }}{{ $t("message.videoManage.loading") }}...
            </p>
          </div>
          <div class="videoInner">
            <video
              width="100%"
              height="100%"
              :id="'myPlayer' + item"
              autoplay="autoplay"
              class="videoClass"
              controls="controls"
            >
              <source type="application/x-mpegURL" src />
            </video>
          </div>
        </div>
      </div>
    </div>
    <div
      @mousemove="DisplayCoord"
      @click="getPlaybackTime"
      class="timeLineBox"
      id="timeLineBox"
    >
      <div class="timeItem" v-for="item in 24" :key="item">
        <span class="time" v-show="item != 24">{{ item }}:00</span>
      </div>
      <div class="mouseLine" id="mouseLine"></div>
    </div>
    <div class="videoControl" v-if="bottomMod">
      <div>
        <!-- <el-autocomplete v-if="!hiddenSelectBox"
          class="selectDev"
          size="medium"
          popper-class="my-autocomplete"
          v-model="selectDev"
          :fetch-suggestions="querySearch"
          placeholder="请选择视频"
          @select="handleSelect"
          @focus="selectDev=''"
        >
          <i class="el-icon-caret-bottom el-input__icon" slot="suffix"></i>
          <template slot-scope="{ item }">
            <div class="devDetail" :class="{'active':item.winNum!=0}">
              <div class="name">{{ item.value }}</div>
              <span
                class="addr"
                v-show="item.winNum!=0"
              >{{$t('message.videoManage.video')}}{{$t('message.videoManage.window')}}{{ item.winNum }}{{$t('message.videoManage.playing')}}......</span>
            </div>
          </template>
        </el-autocomplete> -->
        <span
          v-show="showPlaybacks"
          class="videoType"
          :class="{ active: videoType == 1 }"
          @click="videoType = 1"
          >{{ $t("message.videoManage.live") }}</span
        >
        <span
          v-show="showPlaybacks"
          class="videoType"
          :class="{ active: videoType == 2 }"
          @click="
            videoType = 2;
            winNum = 1;
            activeWinIndex = 1;
          "
          >{{ $t("message.videoManage.playback") }}</span
        >
      </div>
      <div class="historyDate" v-show="videoType == 2">
        <img
          src="@/assets/images/overview3/forward.png"
          class="forward forward-l"
          srcset
        />
        <i class="el-icon-caret-left"></i>
        <el-date-picker
          size="medium"
          class="selectDev"
          v-model="time"
          type="datetime"
          placeholder="选择日期时间"
          value-format="yyyy-MM-dd hh:mm:ss"
        ></el-date-picker>
        <i class="el-icon-caret-right"></i>
        <img
          src="@/assets/images/overview3/forward.png"
          class="forward"
          srcset
        />
      </div>
      <div class="operateBar">
        <i
          v-show="videoType == 1 && showMoreWin"
          class="one"
          :class="{ active: winNum == 1 }"
          @click="changeWinNum(1)"
        ></i>
        <i
          v-show="videoType == 1 && showMoreWin && videoWinNum > 1"
          class="four"
          :class="{ active: winNum == 4 }"
          @click="changeWinNum(4)"
        ></i>
        <i
          v-show="videoType == 1 && showMoreWin && videoWinNum > 4"
          class="nine"
          :class="{ active: winNum == 9 }"
          @click="changeWinNum(9)"
        ></i>
        <i v-show="showCaptrue && videoWinNum > 4" class="img"></i>
        <i
          v-show="videoType == 1 && showControl && videoWinNum > 4"
          class="control"
          :class="{ active: showControlBox }"
          @click="showControlBox = !showControlBox"
        ></i>
      </div>
    </div>
    <div class="controlBox" v-show="showControlBox">
      <div class="top">
        <img src="@/assets/images/overview3/controlBG.png" alt srcset />
        <img src="@/assets/images/overview3/arrow.png" class="arrow arrow1" />
        <img src="@/assets/images/overview3/arrow.png" class="arrow arrow2" />
        <img src="@/assets/images/overview3/arrow.png" class="arrow arrow3" />
        <img src="@/assets/images/overview3/arrow.png" class="arrow arrow4" />
        <img src="@/assets/images/overview3/arrow.png" class="arrow arrow5" />
        <img src="@/assets/images/overview3/arrow.png" class="arrow arrow6" />
        <img src="@/assets/images/overview3/arrow.png" class="arrow arrow7" />
        <img src="@/assets/images/overview3/arrow.png" class="arrow arrow8" />
      </div>
      <div class="bar">
        <span>{{ $t("message.videoManage.changeTimes") }}</span>
        <el-slider class="slider" v-model="bar1"></el-slider>
      </div>
      <div class="bar">
        <span>{{ $t("message.videoManage.focus") }}</span>
        <el-slider class="slider" v-model="bar2"></el-slider>
      </div>
      <div class="bar">
        <span>{{ $t("message.videoManage.aperture") }}</span>
        <el-slider class="slider" v-model="bar3"></el-slider>
      </div>
    </div>
  </div>
</template>
<script>
import ysyPlayAndPlayback from "./ysyPlayAndPlayback";
import iscPlugin from "./isc_plugin/isc_plugin";
import ckPlayer from "./ckPlayer";
import leCheng from "./leCheng";
import Back from "./playBack/playBack";
import Live from "@/plugins/screens";
import {
  resizeFn,
  setOffset,
  hidePluginWindow,
  showPluginWindow,
} from "./isc_plugin/video_isc_plugin.js";
import { getVideoItemInfoApi } from "@/assets/js/api/equipmentCenter/cameraList";
import { projectVideoConfigListApi } from "@/assets/js/api/equipmentCenter/cameraList";
export default {
  props: [
    "value",
    "displayBottomMod",
    "winNumBer",
    "autoplay",
    "hiddenSelectBox",
    "type",
    "scrrenPosition",
    "xxx",
    "showPlayback"
  ],
  components: { ysyPlayAndPlayback, ckPlayer, leCheng, iscPlugin ,Back},
  watch: {
    //监听value的变化，进行相应的操作即可
    value: function(a, b) {
      console.log("新的值", a);
      this.devList = a;
      if (this.isDockingToWoer) {
        this.pluginType = "isc";
      } else {
        this.getPlayType();
      }
    },
  },
  data() {
    return {
      currentVideoTypeDetail: "",
      screens: null,
      bottomMod: false, //是否显示 底部 选择框 和 窗口选择器 false 不显示； true 显示
      videoWinNum: 1, // 窗口选择器 数量  1 1个窗口  4 4个窗口 9 九个窗口
      showAutoplay: false, //自动播放
      infor: "",
      devList: [],
      videoType: 1,
      selectDev: "",
      winNum: 1,
      activeWinIndex: 1,
      showControlBox: false,
      bar1: 20,
      bar2: 20,
      bar3: 20,
      startTime: "",
      endTime:"",
      locationValue:"",
      videoObject1: "",
      videoObject2: "",
      videoObject3: "",
      videoObject4: "",
      videoObject5: "",
      videoObject6: "",
      videoObject7: "",
      videoObject8: "",
      videoObject9: "",
      showMoreWin: true, //是否显示多窗口切换
      showCaptrue: false, //是否显示截图按钮
      showControl: false, //是否显示控球按钮
      showPlaybacks: false, //是否显示视频回放按钮
      pluginType: "", //ysy:萤石云   videojs     ckPlayer  lecheng  isc  xiongmai
      initDivNum: 9,
      ysyParams: {
        url: "",
        accessToken:
          "at.3goo7ob2dic9amkg5ycg4n5yak9jtpf2-2dn1vwm6z3-134xqr4-td1bh38w2",
      },
      urls: ["", "", "", "", "", "", "", "", ""],
      lcToken: "",
      isDockingToWoer: false,
      worMenuWidth: 0, //用于和沃尔对接时定位插件
      company: "",
      isIframe: false,
      isFullScreen: false,
    };
  },
  destroy() {
    hidePluginWindow();
  },
  created() {
    console.log('用的是这个组件吗')
    this.company = COMPANY;
    this.devList = this.$props.value;

    // this.bottomMod = this.$props.displayBottomMod;
    this.videoWinNum = this.$props.winNumBer;
    this.showAutoplay = this.$props.autoplay;

    this.showCaptrue = this.$props.showCaptrue;
    this.showControl = this.$props.showControl;
    this.showPlaybacks = this.$props.showPlayback;
    console.log('当前显示回放不',this.showPlaybacks)
    // if(this.$props.hiddenSelectBox){
    //   this.hiddenSelectBox = this.$props.hiddenSelectBox;
    // }
    this.isDockingToWoer = isDockingToWoer;
    // lgzbdp
    if (window.localStorage.getItem("isIframe")) {
      if (window.localStorage.getItem("isIframe") == "1") {
        this.isIframe = true;
        // this.$nextTick(()=>{
        //   setOffset(2180,360)
        // })
      }
      console.log(window.localStorage.getItem("isIframe"));
    }
    if (this.isIframe && this.scrrenPosition) {
      this.worMenuWidth = this.scrrenPosition;
      //  this.worMenuWidth = 2160
    }
    if (this.isDockingToWoer) {
      this.worMenuWidth = parseInt(document.body.clientWidth) * 0.025 + 10;
      // this.pluginType='isc'
    } else {
      this.getPlayType();
    }
  },

  mounted() {
    // 广西联通   处理回放按钮
    if (this.pluginType == "ysy" || this.pluginType == "isc") {
      console.log('是这里不')
      this.showMoreWin = false;
      this.showCaptrue = false;
      this.showControl = false;
      this.showPlaybacks = true; //回放
      this.bottomMod = false;
      this.initDivNum = 1;
    } else if (this.pluginType == "videojs") {
      this.$nextTick(() => {
        this.initVideo();
      });
    } else if (this.pluginType == "xiongmai") {
      this.bottomMod = false;
    } else if (this.pluginType == "lecheng") {
      this.bottomMod = false;
    }
    // window.addEventListener('keydown',this.fullScreen)
    // console.log(document.getElementById('videoOverview'))
  },
  destroyed() {
    if (this.pluginType == "videojs") {
      for (let index = 1; index <= 9; index++) {
        this["videoObject" + index].dispose();
      }
    }
    window.removeEventListener("keydown", this.fullScreen);
  },
  methods: {
    //查询项目各类型的视频配置信息
    getProjectVideoConfigList() {
      projectVideoConfigListApi({
        projectSn: this.$store.state.projectSn,
      }).then((res) => {
        this.infor = res.result;
        Live.login(
          this.infor.appId,
          this.infor.appSecret,
          this.infor.account,
          this.infor.password
        ).then((res) => {
          // 配置参数加载视频
          this.screens.setOptions(
            /* 这里传入配置对象 */ {
              deviceId: "1202291000447",
              channelNum: 1,
              streamType: 0,
              mediaType: "FLV",
              recordTimeStart: "2022-07-16 04:00:00",
              recordTimeEnd: "2022-07-16 06:00:00",
              source: "device",
              isDownload: 0,
              tokenType: "Dynamic",
              expireTime: "0",
              https: false,
            }
          );
        });
      });
    },
    fullScreen(e) {
      var e = event || window.event || arguments.callee.caller.arguments[0];
      if (e && e.keyCode == 122) {
        //捕捉F11键盘动作
        console.log(e.keyCode);
        this.isFullScreen = !this.isFullScreen;
        if (this.isFullScreen) {
          resizeFn(1);
        } else {
          // hidePluginWindow()
          // showPluginWindow()
        }
        // setOffset(2180,360)
      }
    },
    //改变窗口分割数量
    changeWinNum(num) {
      this.winNum = num;
      this.activeWinIndex = 1;
      console.log("this.activeWinIndex", this.activeWinIndex);
      if (this.pluginType == "ysy") {
        this.$refs.ysy1.init2("");
        // this.$refs['ysy'+this.activeWinIndex].init()
      }
    },
    //判断视频播放方式
    getPlayType() {
      console.log(this.devList, 123);
      if (this.devList.length == 0) {
        return;
      }
      //videoType    1萤石云，2乐橙，3ISC，4大华，5宇视，6国标，7国密
      switch (Number(this.devList[0].videoType)) {
        case 1:
          this.ysyParams = this.devList[0];
          //playType 播放方式，1高清RTMP,2流畅RTMP,3高清HLS,4流畅HLS,5高清轻量级插件，6流畅轻量级插件
          var videoType = this.devList[0].videoType;
          var playType = this.devList[0].playType;
          switch (Number(videoType)) {
            case 1:
              if (playType == 1 || playType == 2) {
                this.bottomMod = true;
                this.pluginType = "ckPlayer";
                // console.log(this.devList[0].url)
                this.urls[this.activeWinIndex] = this.devList[0].url;
                // console.log(this.urls)
                // this.bottomMod=true
              }
              if (playType == 3 || playType == 4) {
                console.log('this.bottomMod',this.bottomMod)
                this.bottomMod = true;
                this.pluginType = "videojs";
                this.$nextTick(() => {
                  this.initVideo();
                  this.playVideoWithVideojs(this.devList[0].url);
                });
              }
              if (playType == 5 || playType == 6) {
                this.bottomMod = false;
                debugger
                this.pluginType = "ysy";
              }
              break;
            case 2:
              this.pluginType = "videojs";
              break;
            case 3:
              this.pluginType = "videojs";
              break;
            case 4:
              this.pluginType = "videojs";
              break;
            case 5:
              this.pluginType = "videojs";
              break;
            case 6:
              this.pluginType = "videojs";
              break;
          }
          break;
        case 2:
          // this.urls.push({
          //   url:this.devList[0].url,
          //   kitToken:this.devList[0].accessToken
          // })
          this.bottomMod = false;
          // if(this.$props.type=='company'){
          //   this.bottomMod=false
          // }else{
          //   this.bottomMod=true
          // }
          this.$nextTick(() => {
            this.initVideo();
            this.devList[0].winNum = 1;
            this.playVideoWithVideojs(this.devList[0].url);
          });
          this.pluginType = "videojs";
          break;
        case 3:
          this.bottomMod = false;
          // if(this.$props.type=='company'){
          //   this.bottomMod=false
          // }else{
          //   this.bottomMod=true
          // }
          this.pluginType = "isc";
          break;
        case 7:
          this.bottomMod = false;
          this.pluginType = "xiongmai";
      }
      console.log("当前点击的类型", this.pluginType);
      setTimeout(() => {
        if (
          document.getElementById("wrapper") != null &&
          this.screens == null
        ) {
          this.screens = Live.init(document.getElementById("wrapper"));
        }
        let configInfo = localStorage.getItem("configInfo");
        if (configInfo) {
          configInfo = JSON.parse(configInfo);
          if (configInfo.length < 0) {
            this.getProjectVideoConfigList();
          } else {
            this.infor = configInfo;
            Live.login(
              this.infor.appId,
              this.infor.appSecret,
              this.infor.account,
              this.infor.password
            ).then((res) => {
              this.screens.setOptions(
                /* 这里传入配置对象 */ {
                  deviceId: "1202291000447",
                  channelNum: 1,
                  streamType: 0,
                  mediaType: "FLV",
                  recordTimeStart: "2022-07-16 04:00:00",
                  recordTimeEnd: "2022-07-16 06:00:00",
                  source: "device",
                  isDownload: 0,
                  tokenType: "Dynamic",
                  expireTime: "0",
                  https: false,
                }
              );
            });
          }
        } else {
          this.getProjectVideoConfigList();
        }
      }, 100);
    },
    selectWin(data) {
      this.activeWinIndex = data;
    },
    //初始化视频插件
    initVideo() {
      console.log(this.devList);
      //
      for (let index = 1; index <= 9; index++) {
        if (this["videoObject" + index] == "") {
          this["videoObject" + index] = videojs(
            "myPlayer" + index,
            {
              textTrackDisplay: false,
              controlBar: false,
              autoplay: this.showAutoplay,
              muted: this.showAutoplay ? true : false,
            },
            function onPlayerReady() {
              this.on("error", function() {
                // 报错信息
                var mediaError = this.error();
                console.log("mediaError", mediaError);
              });
            }
          );

          if (!this.bottomMod) {
            this["videoObject" + 1].src([
              {
                type: "application/x-mpegURL",
                src: this.devList[0].url,
              },
            ]);
            this["videoObject" + 1].play();
          }
        }
      }
    },
    querySearch(queryString, cb) {
      var restaurants = this.devList;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    clocseVideo(item) {
      //   console.log(item);
      var obj = this["videoObject" + item];
      //   console.log(obj);
      if (obj) {
        this["videoObject" + item].dispose();
        this.devList.forEach((element) => {
          if (element.winNum == item) {
            element.winNum = 0;
          }
        });
        // console.log(this.devList);
      }
      document.getElementsByClassName("noVideoBox2")[item - 1].style.display =
        "none";
      document.getElementsByClassName("noVideoBox1")[item - 1].style.display =
        "block";
      this.$emit("closeVideoDialog", false);
    },
    handleSelect(item) {
      console.log(item);

      this.urls[this.activeWinIndex] = item.url;
      this.devList.forEach((element) => {
        if (element.value == item.value) {
          element.winNum = this.activeWinIndex;
        }
        if (
          element.value != item.value &&
          element.winNum == this.activeWinIndex
        ) {
          element.winNum = 0;
        }
      });
      console.log(this.devList);
      this.selectDev = "";
      if (this.pluginType == "ysy") {
        this.getVideo(item);
      }
      if (this.pluginType != "videojs") {
        return;
      }
      //   var obj = this["videoObject" + this.activeWinIndex];
      //   console.log(obj)
      this.playVideoWithVideojs(item.url);
    },
    //使用videojs播放视频
    playVideoWithVideojs(url) {
      var el = document.getElementById("myPlayer" + this.activeWinIndex);
      if (!el) {
        var pEl = document.getElementsByClassName("videoInner")[
          this.activeWinIndex - 1
        ];
        var idName = "myPlayer" + this.activeWinIndex;
        var div2 =
          '<video width="100%" height="100%" id="' +
          idName +
          '" autoplay="autoplay" class="videoClass" controls="controls" > <source type="application/x-mpegURL" src /> </video>';
        pEl.innerHTML = div2;
        this["videoObject" + this.activeWinIndex] = videojs(
          "myPlayer" + this.activeWinIndex,
          {
            textTrackDisplay: false,
            controlBar: false,
          }
        );
      }
      this["videoObject" + this.activeWinIndex].src([
        {
          type: "application/x-mpegURL",
          src: url,
        },
      ]);
      this["videoObject" + this.activeWinIndex].play();

      document.getElementsByClassName("noVideoBox1")[
        this.activeWinIndex - 1
      ].style.display = "none";
      document.getElementsByClassName("noVideoBox2")[
        this.activeWinIndex - 1
      ].style.display = "block";
    },
    getX(obj) {
      var parObj = obj;
      var left = obj.offsetLeft;
      while ((parObj = parObj.offsetParent)) {
        left += parObj.offsetLeft;
      }
      return left;
    },
    getY(obj) {
      var parObj = obj;
      var top = obj.offsetTop;
      while ((parObj = parObj.offsetParent)) {
        top += parObj.offsetTop;
      }
      return top;
    },
    getPlaybackTime(event) {},
    DisplayCoord(event) {
      var top, left, oDiv;
      // oDiv = document.getElementById("timeLineBox");
      // top = getY(oDiv);
      // left = this.getX(oDiv);
      //  + document.documentElement.scrollLeft
      console.log(event.clientX);
      document.getElementById("mouseLine").style.left =
        event.clientX - 1 + "px";
      // document.getElementById("mp_y").innerHTML = (event.clientY - top + document.documentElement.scrollTop) - 2 +
      //     "px";
    },
    //获取视频播放url
    getVideo(item) {
      //videoType    1萤石云，2乐橙，3ISC，4大华，5宇视，6国标
      //playType 播放方式，1高清RTMP,2流畅RTMP,3高清HLS,4流畅HLS,5高清轻量级插件，6流畅轻量级插件
      getVideoItemInfoApi({
        itemId: item.itemId,
      }).then((res) => {
        var result = res.result;
        var url = "";
        if (item.videoType == 1) {
          switch (Number(result.projectVideoConfig.playType)) {
            case 1:
              url = result.videoInfo.rtmpHd;
              break;
            case 2:
              url = result.videoInfo.rtmp;
              break;
            case 3:
              url = result.videoInfo.hdFlvAddress;
              break;
            case 4:
              url = result.videoInfo.flvAddress;
              break;
            case 5:
              url = `ezopen://open.ys7.com/${result.videoInfo.deviceSerial}/${result.videoInfo.channelNo}.hd.live`;
              break;
            case 6:
              url = `ezopen://open.ys7.com/${result.videoInfo.deviceSerial}/${result.videoInfo.channelNo}.live`;
              break;
            default:
              url = `ezopen://open.ys7.com/${result.videoInfo.deviceSerial}/${result.videoInfo.channelNo}.live`;
              break;
          }
          this.ysyParams.url = url;
          this.ysyParams.accessToken = result.accessToken;
          // this.$emit('playParams',{accessToken:result.accessToken,url:url,videoType:videoType,playType:result.projectVideoConfig.playType})
        }

        // if(videoType==2){
        //   // url=`imou://open.lechange.com/${item.serialNumber}/${item.channelId}/1?streamId=1`
        //   // this.$emit('playParams',{accessToken:result.accessToken,url:url,videoType:item.videoType})
        //   this.$emit('playParams',{accessToken:result.accessToken,url:item.liveRadioUrl,videoType:item.videoType})
        // }
        // console.log('视频播放url',url)
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import "./videoModule.less";
.isDockingToWoer {
  position: relative;
  left: 58px;
  top: 83px;
}
.isLongguangIframe {
  position: relative;
  left: 2180px;
  top: 276px;
}
// .isFullScreen{
//   left: 2160px;
//   top: 226px;
// }
#wrapper {
  padding-top: 20px;
  box-sizing: border-box;
}
</style>