amp-story-captions

描述

自定义视频字幕渲染。

必需的脚本

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

支持的布局

容器填充固定固定高度弹性项流式固有响应式

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