如何全局设置VTT字幕在htmlVideoElement上的位置 无需逐个调整cue参数

失效原因 #

::cue 伪元素仅支持颜色、背景、字体、文字装饰等有限的样式属性，你写的 line、position、top、transform 都不属于支持范围，浏览器解析时会直接忽略这些规则，因此只有文字、背景样式生效。

可行解决方案 #

方案1：VTT文件内全局配置（无需修改单个cue） #

在VTT文件开头新增 REGION 块定义全局字幕区域位置，所有未指定区域的cue会自动继承该配置，示例如下：

WEBVTT

REGION
id:default
regionanchor:0%,70%
viewportanchor:0%,70%
width:100%

STYLE
::cue {
  background-image: linear-gradient(to bottom, dimgray, lightgray);
  color: green;
}

参数说明：

• 把 70% 调整为更小的数值，字幕就会整体向上偏移，比如设为60%会比当前位置再靠上10%
• width:100% 保证字幕和原显示宽度一致，不会出现排版错位

方案2：前端JS批量修改（无需修改VTT文件） #

如果不方便改动VTT源文件，可以在页面用JS批量给所有cue添加line属性：

const video = document.querySelector('video');
// 监听字幕加载完成事件
video.textTracks[0].addEventListener('load', () => {
  const cues = video.textTracks[0].cues;
  // 遍历所有cue统一设置位置
  for (let i = 0; i < cues.length; i++) {
    cues[i].line = 70; // 数值越小越靠上，按需调整
  }
});

如果页面有多个字幕轨，修改textTracks的索引匹配目标字幕即可。

内容的提问来源于stack exchange，提问作者Not My Problem