HTML5 无法直接播放 RTSP 或叠加 logo，必须在服务端转流时用 ffmpeg（-vf overlay）或 WebRTC worker 层处理；前端 CSS 叠加仅为视觉覆盖，不防篡改且投屏消失。
HTML5 播放 RTSP 无法直接叠加 logo
浏览器原生不支持 RTSP 协议，video 标签根本无法直接加载 rtsp:// 地址。所谓“HTML5 播放 RTSP”，实际是靠 WebSocket + WebRTC 或 MSE（Media Source Extensions）转封装实现的——比如用 ffmpeg + node-media-server 转成 HLS/FLV/WebRTC 流，再喂给前端。logo 叠加必须发生在服务端转流环节，而非前端 HTML5 层面。
真正能叠加 logo 的位置在服务端转流时
以常见方案为例：
- 使用
ffmpeg推流时加-vf "overlay=10:10"参数，在视频左上角 10×10 像素处叠加 logo 图片 - 用
node-media-server配合ffmpeg子进程转流，logo 必须提前准备好 PNG（带透明通道），路径写死或动态注入到 ffmpeg 命令中 - WebRTC 方案（如 mediasoup）需在 worker 层做 video transform，用
canvas绘制帧并插入 logo，但性能开销大、延迟高，不推荐生产环境用于多路流
前端强行“模拟叠加”只适用于非关键场景
如果后端无法改，又必须显示 logo，可考虑 CSS 层叠：
- 把
video元素和一个img（logo）放在同一div中，用position: relative/absolute定位 logo - 该方式仅视觉覆盖，logo 不参与编码，截图、全屏、投屏时会消失
- 若视频启用了
playsinline或webkit-playsinline，iOS 上可能因 z-index 渲染异常导致 logo 被遮挡 - 不适用于需要合规水印（如安防、直播监管）的场景——它不具备防篡改和嵌入性
容易忽略的关键点：透明通道与分辨率适配
很多团队用 JPG 做 logo，结果边缘发灰或白边明显——必须用带 alpha 通道的 logo.png；同时要注意 overlay 坐标单位是像素，不是百分比，若源流分辨率动态变化（如自适应码率），需同步更新 ffmpeg overlay 坐标或改用相对定位脚本处理。
立即学习“前端免费学习笔记（深入）”；
