DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!
:future
是一个 CSS 伪选择器,我们可以用它在媒体播放期间为即将出现的元素设置样式。想想视频中的字幕。我们可以用它来为即将出现的字幕设置样式,以便在视觉上将其与当前显示的字幕和过去的字幕区分开来。
:future(p) {
opacity: .5;
}
这是 CSS 选择器级别 4 规范中称为“时间维度”伪类的一部分,目前处于工作草案状态。这意味着规范正在开发中,在它成为候选推荐之前可能会发生变化。
WebVTT 和字幕
WebVTT 是我们在视频中获取字幕的方式。它是一个独立的文件,在<video>
元素中调用,并与视频文件一起播放,显示按时间范围组织的字幕。
WEBVTT
00:00:00.000 --> 00:00:03.000
- [Birds chirping]
- It's a beautiful day!
00:00:04.000 --> 00:00:07.000
- [Creek trickling]
- It is indeed!
00:00:08.000 --> 00:00:10.000
- Hello there!
因此,随着视频的播放,字幕也会播放,这为我们提供了一个时间维度,字幕可以在过去、现在和未来。:future
允许我们选择和设置所有即将出现的字幕的样式。
Khari McMillian 发布了一篇关于 WebVTT 的非常全面的文章,包括如何对其进行格式化以获得最佳可访问性。
示例
在 HTML 中提供某种 <video>
<video controls>
<source src="/awesome-video.mp4" type="video/mp4"/>
<track id="caption-track" kind="subtitles" srclang="en" label="English" default/>
</video>
…以及一个在时间线上定义字幕的 WebVTT 文件
WEBVTT
1
00:00:00.000 --> 00:00:03.000
<i>This is a WebVTT demo.</i>
2
00:00:03.000 --> 00:00:06.000
<b>WebVTT supports many different kinds of formatting.</b>
3
00:00:06.000 --> 00:00:09.000
The text can be normal, like this.
4
00:00:09.000 --> 00:00:12.000 vertical:lr
Or vertical.
5
00:00:12.000 --> 00:00:15.000 line:100%
You can move it vertically.
6
00:00:15.000 --> 00:00:18.000 vertical:rl line:0
Or horizontally.
7
00:00:18.000 --> 00:00:21.000
You can even colorize captions.
8
00:00:21.000 --> 00:00:24.000 size:20
Or change its size.
9
00:00:24.000 --> 00:00:27.000
<ruby>Ruby text is supported as well.<rt>This text will be above the other text.
10
00:00:27.000 --> 00:00:30.000 size:40%
Size can be adjusted as well.
…我们可以设置跟随当前显示字幕的字幕的样式
video:future(p) {
opacity: .5;
}
浏览器支持
目前这一切都非常概念化。规范本身处于工作草案状态。这意味着:future
已经定义,但对它的支持非常少,并且在我们现在拥有的内容在它成为推荐候选之前可能会发生变化。
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
否 | 否 | 否 | 否 | 16.1+ | 否 |
Android Chrome | Android Firefox | Android 浏览器 | iOS Safari | Opera Mobile |
---|---|---|---|---|
否 | 否 | 否 | 7 | 否 |
更多信息
- CSS 选择器级别 4 规范(工作草案)
- Web 视频文本轨道格式(MDN)
- 使用 WebVTT 改善视频可访问性