简述：浏览器在请求RTSP视频流播放时，需要在Vue项目中使用插件flv.js请求播放。因为flv.js本身并不直接支持RTSP流，所以需要flv连接到转换后的视频流URL，这里来记录一下。

---

一. 首先，看下需要请求的API接口类型

http://localhost/dev-api/res/getVideo
+
rtsp://192.168.0.77:8554/Media/tingche2

http://localhost/dev-api/res/getVideo?path=rtsp://192.168.0.77:8554/Media/tingche2

二. 安装插件

npm i flv.js
//或者
cnpm i flv.js

三. HTML

//定义一个 HTML 视频元素
<video
      id="video_label1"
      controls
      autoplay
      muted
      @fullscreenchange="choseFullScreenChange"
></video>

//属性介绍
id="video_label1"               <!-- 视频元素的唯一标识符 -->
controls                        <!-- 显示视频控件（播放、暂停、音量等） -->
autoplay                        <!-- 页面加载时自动播放视频 -->
muted                           <!-- 静音播放视频 -->
@fullscreenchange="choseFullScreenChange" 
<!-- 监听全屏状态变化事件，触发 choseFullScreenChange 方法 -->

四. 请求播放

// 引入 FLV.js 库
import flvjs from "flv.js"; 

callvideoDserveJudge(ulr) {
  //console.log(ulr);
  // 检查当前环境是否支持 FLV.js
  if (flvjs.isSupported()) {
    // 选择用于播放视频的 HTML 元素
    var videoElement = document.querySelector("#video_label1");
    console.log(videoElement);

    // 创建 FLV 播放器实例
    this.flvPlayer = flvjs.createPlayer({
      type: "flv", // 设置视频类型为 FLV
      isLive: true, // 指定这是直播流
      hasAudio: false, // 指定视频流中没有音频
      // 拼接视频流的 URL
      url: process.env.VUE_APP_BASE_API + "/res/getVideo?path=" + ulr, 
    });

    // 将播放器绑定到 HTML 视频元素
    this.flvPlayer.attachMediaElement(videoElement);
    // 加载视频流
    this.flvPlayer.load();
    // 播放视频
    this.flvPlayer.play();
  }
}

//这里的flvPlayer为null
flvPlayer: null,

五. 点击全屏

// 处理全屏变化的函数
choseFullScreenChange() {
      // 检查当前是否处于全屏模式
      const isFullScreen =
        document.fullscreenElement ||              // 标准全屏 API
        document.webkitFullscreenElement ||        // WebKit 内核浏览器全屏 API
        document.mozFullScreenElement ||           // Firefox 全屏 API
        document.msFullscreenElement;              // IE/Edge 全屏 API

      if (isFullScreen) {
        // 如果当前处于全屏模式
        console.log("进入全屏模式");
        // 在进入全屏时执行的逻辑
        // this.$store.commit("IsStopFn", false);
      } else {
        // 如果当前不处于全屏模式
        console.log("退出全屏模式");
        // 在退出全屏时执行的逻辑
        // this.$store.commit("IsStopFn", true);
      }
},

六. 点击删除

// 删除视频播放实例的函数
deleteVideo(flvPlayer) {
      if (flvPlayer) {
        // 暂停视频播放
        flvPlayer.pause();
        // 卸载视频流，释放内存
        flvPlayer.unload();
        // 解除视频元素和播放器的绑定
        flvPlayer.detachMediaElement();
        // 销毁 FLV 播放器实例
        flvPlayer.destroy();
        // 将 flvPlayer 置为 null，避免内存泄漏
        flvPlayer = null;
      }
},