重要提示：此文档不适用于您当前选择的格式广告！

amp-story-captions

描述

自定义视频字幕渲染。

必需的脚本

<script async custom-element="amp-story-captions" src="https://cdn.ampproject.org/v0/amp-story-captions-0.1.js"></script>

支持的布局

container fill fixed fixed-height flex-item fluid intrinsic responsive

amp-story-captions 组件允许自定义视频字幕渲染。

用法

amp-video上的captions-id值将这两个组件连接起来。这必须与amp-story-captions组件上的id值相同。

<amp-story-grid-layer>
  <amp-video captions-id="captions" src="...">
    <track src="..."></track>
  </amp-video>
</amp-story-grid-layer>
<amp-story-grid-layer>
  <div>This text appears above the captions</div>
  <amp-story-captions id="captions" layout="fixed-height" height="300"></amp-story-captions>
  <div>This text appears below captions</div>
</amp-story-grid-layer>

布局

此组件中的container布局与其他组件不同，因为 HTML 树不决定其大小。相反，动态加载的字幕的文本高度决定了大小。因此，如果在播放视频或音频时字幕内容发生变化，可能会导致 CLS。

样式

字幕的位置由amp-story-captions元素的位置控制。可以使用 CSS 在amp-story-captions本身上指定诸如font-size和line-height之类的属性。

为了允许更精细的控制，我们公开了amp-story-captions-future来控制卡拉 OK 风格字幕的提示的未来部分的样式。

amp-story-captions {
  color: white;
  font-size: 24px;
  padding: 16px;
}

// Words not spoken yet shown in gray.
.amp-story-captions-future {
  color: gray;
}

样式预设

可选的style-preset属性将预制样式应用于amp-story-captions。接受的值为default和appear。

样式预设不受自定义 CSS 的影响。通过在amp-story-captions元素上定义 CSS 变量，可以提供一些可自定义的选项。

默认

default预设渲染字幕以匹配 Web Stories 系统 UI。

示例

<amp-story-grid-layer>
  <amp-video captions-id="captions" src="...">
    <track src="..."></track>
  </amp-video>
</amp-story-grid-layer>
<amp-story-grid-layer>
  <amp-story-captions
    id="captions"
    style-preset="default"
    layout="fixed-height"
    height="300">
  </amp-story-captions>
</amp-story-grid-layer>

出现

appear预设根据其时间戳淡入文本。

在此预设中，可以通过在amp-story-captions组件的style属性中定义--story-captions-font-size和--story-captions-font-family CSS 变量来选择性地自定义font-size和font-family。

示例

...
<!-- imported font in head of document -->
<link href="https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap" rel="stylesheet">
...
<amp-story-grid-layer>
  <amp-video captions-id="captions" src="...">
    <track src="..."></track>
  </amp-video>
</amp-story-grid-layer>
<amp-story-grid-layer>
  <amp-story-captions
    id="captions"
    style=preset="appear"
    style="--story-captions-font-size: .8em; --story-captions-font-family: 'Shadows Into Light'"
    layout="fixed-height"
    height="300">
  </amp-story-captions>
</amp-story-grid-layer>

验证

请参阅amp-story-captions 验证器中的验证规则。

需要更多帮助？

您已经阅读本文档十几次，但它并没有真正涵盖您的所有问题？也许其他人也有同样的感觉：在 Stack Overflow 上联系他们。

前往 Stack Overflow

发现错误或缺少功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您成为我们开源社区的持续参与者，但我们也欢迎您为自己特别关注的问题做出一次性贡献。

前往 GitHub