HTML5不支持RTSP协议，需转为HLS或MSE等浏览器支持的格式；常见方案为服务端用FFmpeg、ZLMediaKit等转封装，前端用Hls.js播放，并注意音频编码、CORS及音轨配置。
HTML5 本身不支持 RTSP 协议
直接在 <audio></audio> 或 <video></video> 标签里写 src="rtsp://..."，浏览器会静默失败——不是“无声”，是根本没加载。Chrome、Firefox、Safari 全部不实现 RTSP 客户端栈，这是标准层面的限制，不是配置或编码问题。
常见误操作包括：
- 用
curl能通 RTSP 地址，就以为前端也能播 - 把 RTSP URL 粘进
<video></video>后检查控制台，只看到DOMException: The element has no supported sources却不深究协议支持边界 - 尝试加
type="video/mp4"或type="audio/aac"强行伪装，无效
必须转成 HTML5 支持的流格式（如 HLS 或 MSE）
可行路径只有两条：服务端转封装，或客户端用 WebAssembly 解码器（极少见且复杂）。生产环境几乎都选第一种。
典型方案组合：
立即学习“前端免费学习笔记（深入）”；
-
FFmpeg + nginx-rtmp-module：拉取 RTSP 流，转成 RTMP，再由 nginx 推出 HLS（
.m3u8+.ts） - GStreamer + node-media-server：接收 RTSP，输出 HTTP-FLV 或 HLS
-
Wowza / SRS / ZLMediaKit：开箱支持 RTSP 拉流 + HLS/WebRTC 输出，ZLMediaKit 还能直出 MSE 所需的
mp4分片（dash或hls模式）
注意：音频编码必须是 aac（HLS）或 opus（WebRTC），g711、g726 等传统安防音频格式需转码，否则即使流能建立，<audio></audio> 仍静音。
用 Hls.js 播放 HLS 音频时仍无声？检查这些点
Hls.js 是最常用的 HLS 前端播放器，但默认行为对纯音频流不友好。
- 确保 HLS 清单（
.m3u8）中包含AUDIOgroup，且EXT-X-MEDIA的TYPE=AUDIO正确声明 -
Hls.js实例需显式启用音频轨道：hls.audioTrack = 0（尤其当流含多音轨时） - 避免用
<audio></audio>标签自动播放纯音频 HLS：有些浏览器策略会阻止无用户手势的play()，需绑定点击事件后调用hls.loadSource()和audio.play() - 检查响应头：
Access-Control-Allow-Origin: *必须存在，否则Hls.js无法 fetch.ts片段，控制台报 CORS 错误而非静音
真要“原生”播 RTSP？只能绕过浏览器协议栈
所谓“HTML5 播 RTSP”本质是欺骗：用 WebSocket 传裸 RTP 包，再用 WebAssembly（如 ffmpeg.wasm）解码 + Web Audio API 播放。这条路成本高、延迟大、兼容性差。
实际踩坑点：
-
ffmpeg.wasm默认不编译音频解码器（需手动加--enable-decoder=mp3,aac参数重编） - RTP 时间戳需严格对齐 Web Audio 的
context.currentTime，否则卡顿/跳帧 - RTSP/OVER-UDP 在公网不可靠，必须走 TCP 封装（
rtsp://...?tcp），且服务端要支持 - 移动端 Safari 对 WebAssembly 音频实时处理限制极严，大概率失败
如果不是做内网低延迟监控系统，别碰这条线。优先确认 RTSP 音频源是否真的需要——很多 IPC 摄像头的 RTSP 流根本没开音频通道，ffmpeg -i rtsp://... 查看输出里有没有 Audio: aac 才是第一步。
