在html5页面里直接播放rtsp视频流并不是浏览器原生支持的能力，因为主流浏览器不支持rtsp协议。一般做法是通过后端把rtsp转成websocket或http-flv流，前端用播放器内核接收并渲染。有了可播放的视频后，系统并不会自动给出像普通mp4那样的进度条，需要我们自己用dom和js画出进度条并同步播放时间，从而完成自定义界面。
为什么html5不能直接播rtsp
rtsp是实时流传输协议，常用于摄像头和监控设备。html5的video标签只认http、https、blob等来源，不认rtsp://开头的地址。所以第一步一定是转流：
- 后端用ffmpeg或媒体服务器把rtsp转成ws或flv
- 前端引入支持对应协议的js播放器，例如基于wasm的播放库
- 播放器把数据喂给canvas或video元素显示画面
自定义进度条的基本结构
进度条可以用一个外层容器加一个已播放滑块来实现，不依赖原生控件。下面是一段简单的html结构：
<div id="player">
<video id="video" autoplay muted></video>
<div id="bar">
<div id="played"></div>
</div>
</div>
样式写法
用css控制进度条外观，这里把高度和颜色写好，方便后面用js改宽度：
#bar { width: 100%; height: 8px; background: #ddd; position: relative; }
#played { height: 100%; width: 0%; background: #2d8cf0; }
用js同步播放进度
如果播放器暴露了当前时间和总时长，就定时更新滑块宽度。以伪播放器对象为例：
// player为播放器实例，含currentTime和duration
function updateBar() {
var p = player.currentTime() / player.duration();
if (isNaN(p)) p = 0;
document.getElementById('played').style.width = (p * 100) + '%';
}
setInterval(updateBar, 500);
// 点击进度条跳转
document.getElementById('bar').addEventListener('click', function(e) {
var rect = this.getBoundingClientRect();
var ratio = (e.clientX - rect.left) / rect.width;
player.seek(player.duration() * ratio);
});
注意事项
rtsp一般是直播流，没有真正的总时长，这时进度条可改成已缓冲或相对时间条。若后端转的是点播文件，才适合显示绝对进度。自定义界面时记得把控制按钮、音量条和进度条放在一个容器里，用flex布局更整齐。
| 场景 | 进度条含义 |
|---|---|
| 监控直播 | 显示连接状态或滚动时间 |
| 录像回放 | 显示真实播放进度并可拖动 |
小结
html5播rtsp加进度条的核心是先解决协议转换，再用dom和js画界面并同步时间。只要播放器能给时间和时长，自定义进度条就只是普通的宽度计算与事件绑定，并不复杂。