首页宣传视频设了自动播放加静音,画面里只有文字和口型,没有字幕,听障用户和在地铁里关声音的人看完不知道讲了什么。碰到这种情况,我一般先确认改动有没有真的生效。

原因不复杂,video 元素里只写了 src 和 poster,没有挂 track 字幕轨,也没有提供文字稿。浏览器不会自己生成字幕,静音播放时音频信息就彻底丢了。

「视频字幕轨」相关的验证我通常做两遍,改完一次、隔天再看一次,确认不是临时生效。报错里带路径的,先去看那个路径在不在、权限对不对。

<video controls poster='cover.jpg'>
  <source src='intro.mp4' type='video/mp4'>
  <track kind='captions' src='intro.vtt' srclang='zh' default>
</video>

同一份配置存在多处的,先确认改的是被加载的那一份。新版本先放一台机器上跑一天再全量,问题一般在这段时间暴露。

具体做法是,给 video 补一条 kind 为 captions 的 track,指向 vtt 文件并加上 default;字幕文件用 UTF-8 保存,时间轴和画面对齐,别整段只有一行;没有字幕条件时在视频下方放可展开的文字稿,至少让内容能被读到。

最后用这个标准收尾,关掉声音播放,字幕按钮处于开启状态,画面下方能同步出现对应文字。

作者 9823189