如何通过HTML5中Video标签的Duration属性处理直播流中无限长的时间显示-H5教程-PHP中文网

直播流中video.duration为infinity是正常规范行为，应避免依赖它；推荐用服务端时间戳计算已播时长，或用performance.now()估算观看时长，禁用对duration的非法赋值与错误判断。

如何通过html5中video标签的duration属性处理直播流中无限长的时间显示

HTML5 <video></video> 标签的 duration 属性在直播流中通常返回 Infinity（无限），这是浏览器对“无明确结束时间”的标准行为，并非错误。直接显示 Infinity 或尝试格式化它会导致界面异常（如显示 “NaN:NaN” 或 “∞”）。关键不是“处理 duration”，而是**避免依赖 duration 展示直播时间，改用服务端时间或客户端计时逻辑**。

为什么直播流的 duration 是 Infinity？

浏览器根据媒体文件头（如 MP4 的 moov box）或 HLS/DASH 的 manifest 判断总时长。直播流（如 HLS 的 `.m3u8` 动态列表、低延迟流）没有预设终点，因此 video.duration 被规范定义为 Infinity。这是符合 HTML5 媒体规范的正常表现，不应强行覆盖或 hack。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

正确显示直播时间的两种实用方案

方案一：使用服务端时间戳（推荐）
让后端在播放页注入当前直播时间（如 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，或仅缓存最近几秒，不可靠