必须用 加字幕；滚动效果需JS解析WebVTT+CSS动画实现，不可依赖WebVTT语法或伪元素；iOS需playsinline且避免遮挡。
用 <track></track> 给 <video></video> 加字幕必须配 <track kind="subtitles"></track>
HTML 原生不支持“滚动字幕”（即从下往上逐行移动的动态字幕），但能通过 <track></track> 标签加载 WebVTT 字幕文件，实现同步显示的静态字幕。所谓“滚动效果”，实际得靠 CSS 动画或 JS 控制字幕容器——<track></track> 本身只负责时间轴对齐和文本渲染，不提供滚动能力。
常见错误是直接往 <video></video> 里塞 <div> 模拟滚动字幕，结果音画不同步、暂停时字幕还在动、移动端兼容差。正确路径是：先用标准 <code><track></track> 实现精准同步，再用自定义容器覆盖层叠加滚动动画（仅限 UI 层面）。
-
<track></track>必须放在<video></video>内部，且在<source></source>之后 -
kind属性必须为"subtitles"（不是"captions"或"metadata"），否则浏览器不识别为可切换字幕 -
srclang必须声明语言（如"zh"），否则部分浏览器（尤其是 Safari）会忽略该轨道 - WebVTT 文件需 UTF-8 编码，首行必须是
WEBVTT，否则 Chrome 会静默失败且无报错
WebVTT 文件里写滚动效果？不行，但可以用 CSS 覆盖默认字幕样式
WebVTT 语法只支持时间戳 + 文本 + 极简定位（align:middle line:90%），不支持 animation 或 transform。所谓“滚动字幕”，本质是把字幕文本塞进一个固定高度的容器，用 @keyframes 推动 transform: translateY()，让多行文本依次上浮。
这需要绕过浏览器默认字幕渲染层（它不可样式化），改用 JS 监听 timeupdate 事件，手动解析 WebVTT 时间块，把当前应显示的文本插入自定义 <div class="scroll-subtitle"> 中。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10595" title="htmlppt.skill"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d79f23518.jpg" alt="htmlppt.skill" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10595" title="htmlppt.skill">htmlppt.skill</a>
<p>把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。</p>
</div>
<a href="/xiazai/skill10595" title="htmlppt.skill" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>浏览器原生字幕区域（<code>::cue 伪元素）只能调字体、颜色、背景，不能加动画或改变布局流
video::-webkit-media-text-track-display 等私有伪类 hack，iOS Safari 和 Firefox 完全不生效end - start，动画 duration 应略短于该值，避免卡顿用 JS 解析 WebVTT 并驱动滚动容器的关键三步
核心逻辑是：加载 WebVTT → 监听 timeupdate → 查找当前时间匹配的字幕块 → 插入并触发动画。别依赖第三方库（如 vtt.js），纯 JS 几十行就能搞定基础功能。
fetch('sub.vtt')
.then(r => r.text())
.then(vttText => {
const cues = parseVTT(vttText); // 自己写简易 parser，按 '\n\n' 分块，正则提取时间与文本
video.addEventListener('timeupdate', () => {
const t = video.currentTime;
const cue = cues.find(c => t >= c.start && t < c.end);
if (cue && cue.text !== subtitleEl.textContent) {
subtitleEl.textContent = cue.text;
subtitleEl.classList.remove('animate');
void subtitleEl.offsetWidth; // 强制重排，确保 animation 重置
subtitleEl.classList.add('animate');
}
});
});- WebVTT 时间格式是
00:01:23.456，JS 里需转成秒数：用split(':')+parseFloat()计算 - 不要用
setInterval模拟轮询，timeupdate事件本身就有足够精度（通常 200–250ms 一次） - 每次更新前清空
class再重加，否则 CSS 动画可能因状态未变而不触发 - 移动端需加
touch-action: none到字幕容器，防止滑动视频时字幕层误触发手势拦截
滚动字幕在 iOS 和 Android 上的兼容性陷阱
Android Chrome 支持 <track></track> 和自定义字幕层都没问题，但 iOS Safari 有硬限制：全屏播放时，任何覆盖在 <video></video> 上的 DOM 元素（包括字幕 <div>）会被系统视频控件遮挡，除非关闭 <code>playsinline 并接受跳转全屏——但这样又失去页面控制权。
- iOS 必须设
video.setAttribute('playsinline', '')+webkit-playsinline属性，否则无法内联播放，字幕层才可能可见 - Safari 对
transform动画在position: fixed元素上的渲染有延迟，建议字幕容器用position: absolute+top: calc(100% - 60px)（避开底部控件） - 不要用
will-change: transform强制 GPU 加速，iOS Safari 会因此导致字幕文字模糊 - 如果视频源是 HLS（.m3u8），Safari 原生字幕支持更稳定，但自定义滚动字幕仍需 JS 驱动，且需等
loadedmetadata后再初始化监听
滚动字幕真正的复杂点不在动画本身，而在时间轴对齐精度、全屏/内联模式切换时的 DOM 重挂载、以及 iOS 对覆盖层的权限限制——这些没法靠改一行 CSS 解决。
