重要事項：本文件不適用於您目前選取的格式廣告！

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 預設會根據文字的timestamp 淡入文字。

在此預設中，可以選擇性地透過在 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