这不是css，但如果新的访问者想要一个解决方案与JS：

const track = document.getElementsByTagName('track')[0].track;

// Position the cue at the top
track.activeCues[0].line = 0;

// Position the cue at the bottom (default)
track.activeCues[0].line = -1;

// Move the cue up 3 lines to make room for video controls
track.activeCues[0].line = -4;

你可以使用textTrack.activeCues[0].text从单个cue中提取文本，并将它们显示在div中并设置div的位置。

您可以将line-height赋给：：cue，但这样做的问题是，如果字幕进入多行，则行之间差距会增加。

我能想到的最好的解决方案（在React+Typescript中，原则应该在任何地方都适用。虽然有些笨拙，但确实有效）。主要思想是：
1.等待加载事件在track元素上激发
1.获取航迹的VTT线索
1.设置每个cue的行属性

trackRef = (node: HTMLTrackElement) => {
    if (node == null) return

    node.addEventListener('load', () => {
        if (node.track.cues == null) return
        Array.from(node.track.cues).forEach((c) => {
            (c as VTTCue).line = -4
        })
    })
}

//...

<video>
    <source
        src="..."
    />
    <track
        default
        src="..."
        ref={this.trackRef}
    />
</video>

您可以使用CSS样式自定义.vtt字幕的外观，CSS样式可以在嵌入HTML页面中定义 *，也可以直接嵌入.vtt文件中 *。
VTT规范有一些内置的对齐选项，如下所示（摘自https：//www.delphiki.com/webvtt/#cue-settings）：

WEBVTT FILE

1
01:23:45.678 --> 01:23:46.789 D:vertical
Hello world!

2
01:23:48.910 --> 01:23:49.101 S:50%
Hello
world!

以上所示的方法适用于您希望样式与其他帧不同的特定字幕帧。如果您需要样式应用于所有字幕，请参阅下面关于如何从包含的页面设置样式的内容。

在VTT文件中设置样式

WEBVTT

STYLE
::cue {
    background-color:rgba(0, 0, 0, 0.8);
    color: rgb(255, 200, 0);
    padding-bottom: 2em;
}
::cue(b) {
  color: red;
}
::cue(.myclass) {
    color: red;
}

1
00:00:00.000 --> 00:00:11.040
<b>bold</b>
<i>italic</i>
<u>underscored</u>
<c.myclass>Styled</c>

请️务必读取mozilla vtt docs，因为VTT中对空行有严格的规定。vtt validator有助于检测错误。

在HTML容器页面中设置样式

如果原生路线选项不够，则可以应用您自己的自定义样式。

/* in the HTML file embedding the video */
video::cue {
    background-color: rgba(0, 0, 0, 0.8);
    color: #ffc800;
    padding-bottom: 2em;
}

video::cue(b) {
    color: rgb(51, 216, 18);
}

video::cue(.myclass) {
    color: red;
}

另请参见

• https://dev.opera.com/articles/an-introduction-to-webvtt-and-track/
• https://www.w3.org/wiki/VTT_Concepts#Adding_the_tracks_to_the_video
• https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API
• https://www.delphiki.com/webvtt/
• http://www.webvtt.org/