HTML5原生video元素无法通过JavaScript直接控制track字幕样式与位置，需禁用原生track并用JS解析WebVTT后，通过DOM或Canvas手动渲染字幕以实现自定义颜色、位置等效果。
HTML5 的 <video> 元素本身不提供直接通过 JavaScript 控制字幕（<track>）样式（如位置、颜色）的原生 API。字幕渲染由浏览器内置的字幕引擎处理，其样式受 WebVTT 文件内联 CSS 和浏览器默认样式表限制。但你可以通过以下方式实现**自定义字幕位置与颜色**——核心思路是：**绕过原生 track 渲染，用 JS 解析 WebVTT 并手动绘制字幕到 Canvas 或 DOM 层上**。
1. 禁用原生字幕轨道，改用自定义渲染
原生 <track kind="subtitles"> 一旦启用（track.mode = "showing"），浏览器就接管渲染，JS 无法干预其样式或定位。所以第一步是关闭它：
- 设置
track.mode = "disabled"或移除<track>标签 - 用
fetch()加载 WebVTT 文件内容 - 用 JS 解析 WebVTT 时间戳和文本（可用现成库如 vtt.js，或手写简易解析器）
- 监听
video.ontimeupdate，匹配当前时间对应的字幕条目
2. 用 DOM 元素动态渲染字幕（推荐入门）
创建一个绝对定位的 <div class="custom-subtitle"> 覆盖在 video 上，用 JS 更新其内容、颜色、位置：
- HTML 中添加容器：
<div id="subtitle-layer" style="position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; pointer-events: none;"></div> - JS 中设置样式：
subtitleEl.style.color = "#ff5733"; subtitleEl.style.fontSize = "1.2rem"; subtitleEl.style.textShadow = "2px 2px 4px rgba(0,0,0,0.6)"; - 控制垂直位置：修改
bottom（底部对齐）或top（顶部对齐），例如subtitleEl.style.bottom = "8vh"; - 控制水平位置：用
text-align: center居中；若需左/右偏移，可加transform: translateX(20px);
3. 用 Canvas 精确控制（适合复杂布局）
当需要像素级定位、旋转、多行排版或与视频帧同步时，Canvas 更灵活：
立即学习“前端免费学习笔记（深入）”；
- 在 video 同层叠加
<canvas id="sub-canvas">，宽高与 video 一致 - 获取 canvas 2D 上下文：
const ctx = canvas.getContext("2d"); - 设置字体、颜色、描边：
ctx.fillStyle = "#fff"; ctx.strokeStyle = "#000"; ctx.lineWidth = 2; ctx.font = "bold 42px sans-serif"; - 计算显示坐标（例如：距底部 10%，居中）：
const y = videoHeight * 0.9; const x = videoWidth / 2; - 用
ctx.fillText(text, x, y)和ctx.strokeText(text, x, y)实现描边文字效果
4. 注意 WebVTT 文件中的样式提示（有限支持）
虽然浏览器对 WebVTT 内联 CSS 支持不一，但部分基础样式仍可尝试（仅作补充，不可依赖）：
- 在 .vtt 文件开头添加：
STYLE\n::cue { color: lime; font-size: 2em; text-align: right; } - 某些浏览器（如 Chrome）支持
::cue伪元素，但position、transform等布局属性基本无效 - 位置控制仍需靠 JS 渲染层完成，WebVTT 的
align、line、position指令兼容性差，不建议作为主要方案
不复杂但容易忽略：务必把自定义字幕容器设为 pointer-events: none，避免遮挡 video 的点击/拖拽操作；同时监听 video.onresize 或使用 ResizeObserver，确保字幕层随视频尺寸变化实时调整。
