newcpms/ui/src/views/aerial/detail/index.vue

<template>
  <div class="app-container">
    {{areaName}}<br/>

    <el-button type="text" @click="handleDevClick('设备1')">设备1</el-button>
    <el-button type="text" @click="handleDevClick('设备2')">设备2</el-button>
    <el-button type="text" @click="handleDevClick('设备3')">设备3</el-button>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="80%">
      <div class="video-player-container">
        <video-player
          class="video-player"
          ref="videoPlayer"
          :playsinline="true"
          :options="playerOptions"
          style="width: 100%;"
        ></video-player>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getDevVideoByAreaAndDev } from "@/api/aerial/devVideo";
  import { videoPlayer } from "vue-video-player";

  export default {
    name: "",
    components: {videoPlayer},
    props: {},
    data() {
      return {
        areaName: '',
        dialogVisible: false,
        dialogTitle: '',
        playerOptions: {
          playbackRates: [0.5, 1.0, 1.5, 2.0],
          autoplay: true,
          muted: false,
          loop: true,
          preload: "auto",
          language: "zh-CN",
          aspectRatio: "16:9",
          fluid: true,
          sources: [
            {
              type: "video/mp4",
              // src: "http://www.html5videoplayer.net/videos/madagascar3.mp4",
              src: '',
            },
          ],
          poster: "", // 封面地址
          width: document.documentElement.clientWidth,
          notSupportedMessage: "加载中......", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar: {
            timeDivider: true, // 当前时间和持续时间的分隔符
            durationDisplay: true, // 显示持续时间
            remainingTimeDisplay: true, // 是否显示剩余时间功能
            fullscreenToggle: true, // 是否显示全屏按钮
          },
        },
      }
    },
    created() {
      this.areaName = this.$route.query.areaName;
    },
    methods: {
      handleDevClick(devName) {
        this.playerOptions.sources = [
          {
            type: "video/mp4",
            src: '',
          },
        ];
        this.playerOptions.notSupportedMessage = '加载中......';
        getDevVideoByAreaAndDev({
          "areaName": this.areaName,
          "devName": devName,
        }).then(response => {
          if (response.data != null && response.data != "") {
            this.playerOptions.sources = [
              {
                type: "video/mp4",
                src: 'http://localhost:8090'+ response.data.fileUrl,
              },
            ];
          } else {
            this.playerOptions.notSupportedMessage = '视频未上传......';
          }

          this.dialogTitle = this.areaName + " - " + devName;
          this.dialogVisible = true;
        });
      },
    }
  }
</script>

<style scoped>
  /deep/.video-js .vjs-big-play-button {
    width: 88px !important;
    height: 88px !important;
    border-radius: 50% !important;
    border: 0;
    line-height: 88px;
    font-size: 56px;
    object-fit: cover;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
  }
</style>