目录。

前言。

在浏览器中请求 RTSP 视频流，播放时间，直接使用原生浏览器 API 是行不通的，因为他们不支持 RTSP 协议。为了解决这个问题，我们通常选择使用图像 flv.js 这样的库，它专门在浏览器中播放 FLV 以及其他流媒体格式设计。然而，，flv.js 不直接支持本身 RTSP，这意味着我们需要额外的步骤来桥接 RTSP 和 flv.js，在这里分享记录

一. 场景介绍。

1. 详细介绍。

2. 工具特性。

3. 实现效果。

二. 接口格式。

三. 具体使用。

1. 安装插件。

2. HTML。

3. 逻辑函数。

4. 全屏函数。

5. 删除函数。

序言

在浏览器中请求 RTSP 视频流，播放时间，直接使用原生浏览器 API 是行不通的，因为他们不支持 RTSP 协议。为了解决这个问题，我们通常选择使用图像 flv.js 这样的库，它专门在浏览器中播放 FLV 以及其他流媒体格式设计。然而，，flv.js 不直接支持本身 RTSP，这意味着我们需要额外的步骤来桥接 RTSP 和 flv.js，在这里分享记录

一. 场景介绍。

1. 详细介绍

具体使用场景，详细介绍：

1. 在 Vue 中使用 flv.js 插件播放 RTSP 视频流的主要原因是浏览器是原生的。 不直接支持标签 RTSP 协议，也不支持 FLV 容器格式。
2. FLV 它是一种流行的流媒体容器格式，主要用于在线视频播放，而 RTSP 它是一种用于控制实时流媒体会话的网络协议。
3. flv.js 它是开源的 JavaScript 库，可用于现代浏览器播放 FLV 格式视频流，它也支持它 HLS (HTTP Live Streaming) 和 DASH (Dynamic Adaptive Streaming over HTTP)。
4. flv.js 它可以在浏览器环境中解码和播放 FLV 流，这是因为 flv.js 内部是对的 FLV 理解文件结构和相应的解码逻辑。
5. 当 Vue 中播放 RTSP 视频流时�一般需要先将军 RTSP 转换成浏览器可以理解的格式，比如 FLV 或者 HLS。这种转换过程通常发生在服务器端或使用流媒体服务器软件（如 FFmpeg、SRS、Nginx RTMP 等）。转换后的流量可以通过 HTTP 协议发送到客户端󿀌这样 flv.js 这些流量可以接收和解码。
6. flv.js 不直接支持 RTSP 协议，因此，仍然需要一个中间层 RTSP 转换成 FLV 或其他 flv.js 支持格式。这就是为什么 Vue 中使用 flv.js 插件播放 RTSP 视频流时�你不能直接要求 RTSP 地址原因。

2. 工具特性。

FLV工具特性，请看

1. 跨平台兼容性。：flv.js 支持多种浏览器�包括 Chrome, Firefox, Safari, IE11 和 Edge。
2. 硬件加速：flv.js 使用浏览器的硬件加速功能，提高播放效率
3. 低成本：flv.js 考虑到性能和资源消耗࿰的设计c;内存和内存的有效管理 CPU 使用。
4. 适应性。：flv.js 支持自适应比特率流󿀌视频质量可根据网络情况自动调整

3. 实现效果。

二. 接口格式

首先，查看API接口类型格式要求。

http://localhost/dev-api/res/getVideo// +rtsp://192.168.0.77:8554/abc/testhttp://localhost/dev-api/res/getVideo?path=rtsp://192.168.0.77:8554/abc/test。

三. 具体使用。

1. 安装插件。

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

2. HTML。

//定义一个 HTML 视频元素//属性介绍id="video_label1"###;               视频元素的唯一标识符controls                        显示视频控制器#xff08;播放、暂停、音量等）autoplay                        加载页面时，视频muteded自动播放                           静音播放视频ʄfullscreenchange="choseFullScreenChange" 监控全屏状态变化事件，触发 choseFullScreenChange 方法。

3. 逻辑函数。请求播放的函数，请看

////// 这里的flvplayer是nulflvplayer: null,// 引入 FLV.js 库import flvjs from "flv.js"; callvideoDserveJudge(ulr) { // console.log(ulr); // 这里的URL是RTSP视频流地址࿰，拼接在API后面c;rtsp://192.168.0.77:8554/Media/tingch // 检查当前环境是否支持 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(); }}。

4. 

///// 处理全屏变化的函数chosefulScrenchange() { // 检查目前是否处于全屏模式 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); }},

5. 删除函数。

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

创作不容易󿀌感觉有用�一键三连，感谢(●'◡'●)。