HTML 的 video 标签不支持 RTSP 协议,因浏览器已移除对 RTSP/RTP 的原生支持,必须通过服务端转流为 HLS 或 WebRTC 才能播放。

HTML 本身不支持直接嵌入 RTSP 流,video 标签只接受 HTTP(S) 协议的 MP4/WebM/HLS/DASH 等格式,rtsp:// 地址会直接被浏览器忽略或报错。
为什么 不工作
RTSP 是一个基于 TCP/UDP 的实时控制协议,不传输实际音视频数据(那是 RTP 干的),而现代浏览器出于安全、架构和标准化考虑,完全移除了对 RTSP/RTP 的原生支持。Chrome、Firefox、Edge 均会在控制台抛出类似错误:
Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME
这不是路径写错或跨域问题,是协议被硬性拦截。
- RTSP 需要专用解码、网络保活、NAT 穿透能力,浏览器无此运行时环境
- 历史遗留插件(如 VLC Web Plugin)已全部废弃,且不兼容现代浏览器沙箱
- 移动端(iOS/Android WebView)同样不支持,连降级方案都没有
可行替代方案:服务端转流 + 前端播放 HLS 或 WebRTC
必须通过中间服务把 RTSP 流转换成浏览器可识别的格式。主流路径只有两条,选型取决于延迟容忍度和部署能力:
立即学习“前端免费学习笔记(深入)”;
-
HLS 方案(推荐入门):用
ffmpeg或gstreamer拉取 RTSP,切片为.m3u8+.ts,前端用加载。延迟通常 5–30 秒 -
WebRTC 方案(低延迟首选):用
Janus、Mediasoup或Node-RED + webrtc-streamer将 RTSP 转为 WebRTC 信令流,前端调用RTCPeerConnection播放。延迟可压至 500ms 内
例如用 ffmpeg 启动 HLS 转发:
ffmpeg -i "rtsp://admin:password@192.168.1.100:554/stream1" \ -c:v libx264 -c:a aac -f hls \ -hls_time 2 -hls_list_size 3 -hls_flags delete_segments \ /var/www/html/stream.m3u8
前端只需:
常见踩坑点:跨域、证书、编码兼容性
即使转流成功,仍可能黑屏或报错,关键检查项:
-
Access-Control-Allow-Origin必须设置,否则fetch或HLS.js会因 CORS 失败 - HLS 的
.m3u8和.ts文件需同域或配好 CORS,Nginx 示例配置中不能漏掉add_header 'Access-Control-Allow-Origin' '*'; - RTSP 源若为 H.265 编码,HLS.js 默认不支持,需加参数
enableWorker: true, enableSoftwareDecoding: true或强制转 H.264 - 部分 IPC 厂商(如海康、大华)RTSP URL 含特殊字符(如
ch=1&stream=0),务必用encodeURIComponent()处理再拼接进 ffmpeg 命令
真正卡住人的从来不是“怎么写 HTML”,而是搞清谁来承担协议转换——浏览器不做,就必须有服务端或边缘设备顶上。没转流服务,rtsp:// 在任何 标签里都只是个死链接。










