

新闻资讯
技术学院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 流转换成浏览器可识别的格式。主流路径只有两条,选型取决于延迟容忍度和部署能力:
ffmpeg 或 gstreamer 拉取 RTSP,切片为 .m3u8 + .ts,前端用 加载。延迟通常 5–30 秒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 失败.m3u8 和 .ts 文件需同域或配好 CORS,Nginx 示例配置中不能漏掉 add_header 'Access-Cont
rol-Allow-Origin' '*';
enableWorker: true, enableSoftwareDecoding: true 或强制转 H.264ch=1&stream=0),务必用 encodeURIComponent() 处理再拼接进 ffmpeg 命令真正卡住人的从来不是“怎么写 HTML”,而是搞清谁来承担协议转换——浏览器不做,就必须有服务端或边缘设备顶上。没转流服务,rtsp:// 在任何 标签里都只是个死链接。