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 14:14:14
 * @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\components\inspection-view.vue
 * @Description: 总览大屏-巡检车辆-视频查看弹窗
-->

<template>
  <div class="view-content">
    <video
      id="videoElement"
      crossOrigin="anonymous"
      controls
      autoplay
      muted
      width="100%"
      height="800px"
    ></video>
  </div>
</template>

<script>
import { getVideoUrl } from "@/api/xj/screen/disease-screen";
import flvjs from "flv.js";
export default {
  name: "InspectionView",
  props: {
    dialogItem: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      // 视频播放地址
      vedioUrl: "",
      isPlay: false,
      player: null,
      timerId: null,
    };
  },
  created() {
    this.getVideo();
  },
  methods: {
    /* 获取视频url地址 */
    getVideo() {
      getVideoUrl({ id: this.dialogItem.clientId }).then(({ code, msg }) => {
        if (code === 200) {
          this.$nextTick(() => {
            this.createVideo(msg);
          });
        }
      });
    },
    createVideo(url) {
      if (flvjs.isSupported()) {
        const videoElement = document.getElementById("videoElement");
        this.player = flvjs.createPlayer(
          {
            type: "flv",
            isLive: true,
            hasAudio: false,
            url, // 自己的flv视频流
            enableWorker: false, //启用 Web Worker 进程来加速视频的解码和处理过程
            stashInitialSize: 32 * 1024, // 初始缓存大小。单位：字节。建议针对直播：调整为1024kb
            stashInitialTime: 2, // 缓存初始时间。单位：秒。建议针对直播：调整为200毫秒
            seekType: "range", // 建议将其设置为“range”模式，以便更快地加载视频数据，提高视频的实时性。
            lazyLoad: false, //关闭懒加载模式，从而提高视频的实时性。建议针对直播：调整为false
            lazyLoadMaxDuration: 2, // 懒加载的最大时长。单位：秒。建议针对直播：调整为200毫秒
            deferLoadAfterSourceOpen: false,
          },
          {
            cors: true, // 是否跨域
            // enableWorker: true, // 是否多线程工作
            enableStashBuffer: false, // 是否启用缓存
            // stashInitialSize: 128, // 缓存大小(kb)  默认384kb
            autoCleanupSourceBuffer: true, // 是否自动清理缓存
          }
        );
        this.player.attachMediaElement(videoElement); //挂载元素
        this.player.load(); //加载流
        this.player.play(); //播放流
        // 追帧
        //    if (this.timerId !== null) {
        //      clearInterval(this.timerId);
        //    }
        //    this.timerId = setInterval(() => {
        //      if (videoElement.buffered.length > 0) {
        //        const end = videoElement.buffered.end(0); // 视频结尾时间
        //        const current = videoElement.currentTime; //  视频当前时间
        //        const diff = end - current; // 相差时间
        //       //  console.log(diff);
        //        const diffCritical = 4; // 这里设定了超过4秒以上就进行跳转
        //        const diffSpeedUp = 1; // 这里设置了超过1秒以上则进行视频加速播放
        //        const maxPlaybackRate = 4; // 自定义设置允许的最大播放速度
        //        let playbackRate = 1.0; // 播放速度
        //        if (diff > diffCritical) {
        //         //  console.log("相差超过4秒，进行跳转");
        //          videoElement.currentTime = end - 1.5;
        //          playbackRate = Math.max(1, Math.min(diffCritical, 16));
        //        } else if (diff > diffSpeedUp) {
        //         //  console.log("相差超过1秒，进行加速");
        //          playbackRate = Math.max(1, Math.min(diff, maxPlaybackRate, 16));
        //        }
        //        videoElement.playbackRate = playbackRate;
        //        if (videoElement.paused) {
        //          this.videoForm.player.play();
        //        }
        //      }
        // }, 1000);
      }
    },
  },

  destroyed() {
    clearInterval(this.timerId);
  },
};
</script>

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