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

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 预设基于其时间戳淡入文本。

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

示例

...
<!-- 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