track元素不控制字幕位置，真正决定显示位置的是浏览器渲染器、WebVTT中的CSS（如::cue）、video容器样式及播放器逻辑；自定义位置需弃用原生track，改用JS覆盖渲染。
track 元素本身不控制字幕显示位置，它只负责声明轨道元数据和加载字幕内容。真正决定字幕在视频画面上显示哪里的，是浏览器内置字幕渲染器 + WebVTT 文件里的 CSS 样式（如果支持）+ 播放器控件逻辑。
你改不了 track 的位置，但可以影响最终呈现效果——关键在三个地方。
WebVTT 文件里用 CSS 定位字幕行（仅部分浏览器支持）
现代 Chrome、Edge、Safari（macOS/iOS 16.4+）支持在 .vtt 文件中嵌入简单的 CSS 类，通过 ::cue 伪元素调整样式：
例如，在 zh.vtt 开头加：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
CUE STYLE
::cue {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
text-align: center;
font-size: 18px;
background-color: rgba(0,0,0,0.6);
}
注意：
- 必须写在 WEBVTT 行之后、第一个字幕块之前
- ::cue 是唯一被广泛支持的伪元素，::cue-region 几乎无实装
- 不支持 flex、grid、z-index 等复杂布局
- 移动端 Safari 对 position: absolute 支持不稳定，建议优先用 text-align 和 line-height 微调垂直居中
video 容器的 CSS 会影响字幕“视觉锚点”
字幕默认以 video 元素的**内容盒（content box）为参考系**渲染。如果你给 video 加了 transform、border 或 padding，部分浏览器（尤其是旧版 Safari）可能让字幕错位：
- 避免对
video使用transform: scale()或rotate()—— 字幕不会跟着旋转 - 不要给
video设overflow: hidden，否则字幕可能被裁掉（即使它本该在画布内） - 确保
video的width/height与视频固有宽高比一致，拉伸会导致字幕定位偏移
JavaScript 动态切换字幕时，textTracks API 不提供位置控制
你可以用 JS 查询或启用轨道，但无法通过 API 设置坐标：
比如这段代码只能开关/读取，不能改位置：
const video = document.querySelector('video');
const track = video.textTracks[0];
track.mode = 'showing'; // 或 'hidden', 'disabled'
console.log(track.cues); // 只读，不能改 cue 的显示位置
常见误操作：
- 尝试用 track.addCue() 插入带 position 属性的 VTTRegion —— 大多数浏览器已弃用该 API，且不生效
- 给 标签加 style="top:100px" —— 完全无效，track 是 void 元素，不参与渲染流
真要自定义位置？得绕开原生字幕，用 JS 渲染
如果你必须把字幕放在视频顶部、侧边、甚至浮动跟随某个物体，原生 track 就不是工具，而是障碍：
- 监听
timeupdate事件，手动匹配当前时间戳到字幕数组 - 用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
