:future

Avatar of Geoff Graham
Geoff Graham

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 已经定义,但对它的支持非常少,并且在我们现在拥有的内容在它成为推荐候选之前可能会发生变化。

IEEdgeFirefoxChromeSafariOpera
16.1+
Android ChromeAndroid FirefoxAndroid 浏览器iOS SafariOpera Mobile
7
来源:caniuse

更多信息