黑客帝国主题网站如何获取客户端时间并实时植入播放的视频中？

这个效果的实现并没有提前把时间信息渲染到视频文件中，采用的是「基础视频+动态UI叠加」的低成本方案，核心流程如下：

• 站点提前存储的是不带时间显示的预告片素材，视频画面中提前预留了对应时间显示的固定空白区域，时间区域的字体样式、颜色、位置都是提前确定好的
• 页面加载完成后，通过JS内置的Date API直接获取用户设备的本地时间，按照需求格式（比如时:分:秒、12/24小时制）做字符串格式化
• 视频标签上层通过CSS绝对定位叠加了一层透明DOM容器，容器的位置、尺寸和视频中预留的时间区域完全吻合，每秒将格式化后的最新时间渲染到这个容器中
• 页面会监听视频的播放状态、进度条跳转事件，只有当视频播放到需要展示时间的片段时才显示这个时间叠加层，其余时段自动隐藏，用户完全感知不到内容是分层渲染的

少数同类效果也会选择用Canvas把时间直接绘制到视频帧上实现，逻辑和DOM叠加基本一致，只是渲染载体不同。这种方案的优势非常明显：服务端仅需要存储一份通用的基础视频文件，不需要为不同时区的用户单独生成专属视频，大幅降低了存储和带宽成本，所有动态计算都在用户本地完成，实时性和适配性都更好。

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