Angular 15项目Chrome浏览器HTML5视频进度条显示异常问题

• Chrome预加载策略差异：Chrome与Firefox/IE对<video>标签preload属性的默认处理逻辑不同。若未显式设置preload="metadata"，Chrome可能未提前加载视频元数据（如总时长），导致进度条渲染时因时长未知出现异常显示；而其他浏览器会自动处理元数据加载，保证进度条初始状态正常。

• 原生控件样式实现差异：Chrome的原生视频控件采用WebKit内核专属的渲染逻辑，当视频未获取到有效时长时，进度条轨道的填充规则和其他浏览器不一致。例如播放前时长为NaN时，Chrome可能错误地将进度条填充为满宽，而Firefox/IE会保持空轨道状态。

• Angular变更检测时机问题：Angular 15的变更检测在Chrome中的触发时机可能晚于视频控件的初始化，导致控件渲染时还未拿到视频的元数据（时长、总字节数等），进而引发进度条显示异常。可通过监听loadedmetadata事件，在元数据加载完成后手动触发变更检测。

• 视频元数据或服务器配置问题：若视频文件的元数据未写入文件头部（如某些编码工具生成的视频），Chrome对这类视频的解析严格度高于其他浏览器，无法提前获取时长；另外，服务器未返回Accept-Ranges: bytes响应头时，Chrome无法进行部分内容预加载，也会导致进度条初始状态异常。

• WebKit专属CSS冲突：如果项目中自定义了针对WebKit内核的视频控件样式（如::-webkit-progress-bar、::-webkit-slider-runnable-track等伪元素），可能覆盖了Chrome原生进度条的默认渲染逻辑，导致播放前的状态显示异常。

内容的提问来源于stack exchange，提问作者JK72