内容提交

longyvfengyun

2024-05-21 ef8dc882844b82df108601b6f3ee325d4fe46f87

 src/components/ezVideo.vue

@@ -1,18 +1,26 @@
<template>
  <div class="ez-open">
    <div :id="id"></div>
  </div>
<!--  <el-row>-->
<!--    <el-col :span="24" v-for="(item, key) in snList" :key="'key'+key">-->
<!--      <ez-video-item :width="width" :height="height" :sn="item"></ez-video-item>-->
<!--    </el-col>-->
<!--  </el-row>-->

  <el-carousel :autoplay="false" trigger="click" indicator-position="none" :interval="0" height="400px">
    <el-carousel-item v-for="(item, key) in snList" :key="'key'+key">
      <ez-video-item :width="width" :height="height" :sn="item"></ez-video-item>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
import EZUIKit from "ezuikit-js";
import {
  getAccessToken
} from '@/assets/js/api';
import ezVideoItem from "@/components/ezVideoItem.vue";

export default {
  name: "ezVideo",
  player: "",
  components: {
    ezVideoItem
  },
  props: {
    type: {
      type: String,
@@ -32,126 +40,18 @@
    },
  },
  data() {
    let id = "video-container-" + Math.random();
    return {
      id: id,
      accessToken: "",
    };
    return {}
  },
  methods: {
    getAccessToken() {
      getAccessToken()
        .then((res) => {
          res = res.data;
          if (res.code) {
            this.accessToken = res.data;
          } else {
            this.accessToken = "";
          }
          this.init();
        })
        .catch((error) => {
          this.init();
          console.log(error);
        });
    },
    init() {
      let player = this.$options.player;
      let width = this.width;
      let height = this.height;
      let type = this.type;
      let url = "ezopen://open.ys7.com/" + this.sn + "/1.live";
      let id = this.id;
      let accessToken = this.accessToken;
      player = new EZUIKit.EZUIKitPlayer({
        autoplay: true,
        id: id,
        accessToken: accessToken,
        url: url,
        template: "theme", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
        // 视频上方头部控件
        // header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
        // plugin: ['talk'],                       // 加载插件，talk-对讲
        // 视频下方底部控件
        themeData: {
          "footer": {
            "color": "#FFFFFF",
            "activeColor": "#1890FF",
            "backgroundColor": "#00000021",
            "btnList": [
              {
                "iconId": "play",
                "part": "left",
                "defaultActive": 1,
                "memo": "播放",
                "isrender": 1
              },
              {
                "iconId": "capturePicture",
                "part": "left",
                "defaultActive": 0,
                "memo": "截屏按钮",
                "isrender": 1
              },
              {
                "iconId": "sound",
                "part": "left",
                "defaultActive": 0,
                "memo": "声音按钮",
                "isrender": 1
              },
              {
                "iconId": "pantile",
                "part": "left",
                "defaultActive": 0,
                "memo": "云台控制按钮",
                "isrender": 1
              },
              {
                "iconId": "hd",
                "part": "right",
                "defaultActive": 0,
                "memo": "清晰度切换按钮",
                "isrender": 1
              },
              {
                "iconId": "expend",
                "part": "right",
                "defaultActive": 0,
                "memo": "全局全屏按钮",
                "isrender": 1
              }
            ]
          }
        },
        //footer: ["talk", "broadcast", "hd", "fullScreen"], // 如果template参数不为simple,该字段将被覆盖
        // audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
        // openSoundCallBack: data => console.log("开启声音回调", data),
        // closeSoundCallBack: data => console.log("关闭声音回调", data),
        // startSaveCallBack: data => console.log("开始录像回调", data),
        // stopSaveCallBack: data => console.log("录像回调", data),
        // capturePictureCallBack: data => console.log("截图成功回调", data),
        // fullScreenCallBack: data => console.log("全屏回调", data),
        // getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
        width: width,
        height: height,
      });
    },
    stop() {
      let player = this.$options.player;
      if (player) {
        this.player.stop();
      }
    },
  },
  mounted() {
    this.getAccessToken();
  },
  beforeDestroy() {
    this.stop();
  },
  computed: {
    snList() {
      return this.sn.split(",");
    }
  }
};
</script>

<style scoped>
<style scoped lang="less">
.ez-open {
  position: relative;
}
</style>