直播流中video.duration为Infinity是正常规范行为，应避免依赖它；推荐用服务端时间戳计算已播时长，或用performance.now()估算观看时长，禁用对duration的非法赋值与错误判断。
HTML5 <video> 标签的 duration 属性在直播流中通常返回 Infinity（无限），这是浏览器对“无明确结束时间”的标准行为，并非错误。直接显示 Infinity 或尝试格式化它会导致界面异常（如显示 “NaN:NaN” 或 “∞”）。关键不是“处理 duration”，而是**避免依赖 duration 展示直播时间，改用服务端时间或客户端计时逻辑**。
为什么直播流的 duration 是 Infinity？
浏览器根据媒体文件头（如 MP4 的 moov box）或 HLS/DASH 的 manifest 判断总时长。直播流（如 HLS 的 `.m3u8` 动态列表、低延迟流）没有预设终点，因此 video.duration 被规范定义为 Infinity。这是符合 HTML5 媒体规范的正常表现，不应强行覆盖或 hack。
正确显示直播时间的两种实用方案
方案一：使用服务端时间戳（推荐）
让后端在播放页注入当前直播时间（如 UTC 时间戳），前端用定时器每秒更新显示：
- 后端返回类似：
<script>window.LIVE_START_TIME = 1717023600000;</script>（对应直播开始时刻） - 前端计算并格式化：
const now = Date.now(); const elapsed = Math.floor((now - LIVE_START_TIME) / 1000); // 秒数 - 显示为 “已直播 2 小时 15 分钟” 或 “02:15:33”（仅计时，不关联视频 timeline）
方案二：监听 timeupdate + 启动时间推算（轻量级）
适用于无法修改后端的场景，但精度略低（受加载延迟影响）：
- 在
video.play()成功后记录performance.now()和当前video.currentTime - 后续通过差值估算相对播放时长：
realElapsed = (performance.now() - startTime) / 1000 + firstCurrentTime - 注意：此方式不反映真实直播起始点，仅适合“本场观看时长”类 UI
绝对不要做的三件事
- 不要对
video.duration做isNaN()或isFinite()判断后硬设为 0 或 1000 —— 这会干扰进度条行为（如拖拽失效） - 不要在
durationchange事件里反复设置video.duration = xxx—— 浏览器禁止写入该只读属性，会报错且无效 - 不要用
video.seekable.end(0)替代 duration —— 直播流的seekable范围也常为 0，或仅缓存最近几秒，不可靠
UI 层友好提示建议
当检测到 isFinite(video.duration) === false 时，主动切换 UI 模式：
- 隐藏原生进度条，或替换为带“LIVE”标识的静态条（如绿色滚动指示）
- 时间显示区域改为：“LIVE · 正在直播中” 或 “已持续 01:42:05”
- 禁用拖拽操作（
video.setAttribute('disableRemotePlayback', 'true')可辅助控制）
