xjsaas-ui/src/views/big-screen/overview-components/components/inspection-view.vue

<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-11-15 14:23:21
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-12-03 13:35:29
 * @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\components\inspection-view.vue
 * @Description: 总览大屏-巡检车辆-视频查看弹窗
-->

<template>
  <div class="view-content">
    <video
      id="mmiid"
      class="video-js vjs-big-play-centered vjs-fluid"
      controls
      preload="auto"
      width="100%"
      height="100%"
    ></video>
  </div>
</template>

<script>
import { getVideoUrl } from "@/api/xj/screen/disease-screen";
export default {
  name: "InspectionView",
  props: {
    dialogItem: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      // 视频播放地址
      vedioUrl: "",
    };
  },
  created() {
    this.getVideo();
  },
  methods: {
    /* 获取视频url地址 */
    getVideo() {
      // 获取视频流地址
      getVideoUrl({ id: this.dialogItem.clientId }).then(({ code, data }) => {
        if (code === 200) {
          // 判断视频流地址是否存在
          if (!data) {
            this.$message.error('获取视频流失败');
            return;
          }
          
          // 创建 flv.js 播放器
          if (flvjs.isSupported()) {
            const flvPlayer = flvjs.createPlayer({
              type: 'flv',
              url: "http://1011.hlsplay.aodianyun.com/demo/game.flv",
              isLive: true,
              hasAudio: true,
              hasVideo: true
            });
            
            flvPlayer.attachMediaElement(document.querySelector("#mmiid"));
            flvPlayer.load();
            flvPlayer.play();
          } else {
            this.$message.error('当前浏览器不支持FLV播放');
          }
        }
      });
      
      // getVideoUrl({ id: this.dialogItem.clientId }).then(({ code, data }) => {
      //   if (code === 200) {
      //     console.log(data, "data");
      //   }
      // });
    },
  },
};
</script>

<style lang="scss" scoped>
.view-content {
  width: 100%;
  height: 40rem;
}
</style>