amp-story-page

描述

AMP 故事的單一畫面。

必要腳本

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

用法

<amp-story-page> 元件代表要在故事的單一頁面上顯示的內容。

<amp-story-page id="cover">
  <amp-story-grid-layer template="fill">
    <amp-video
      layout="fill"
      src="background.mp4"
      poster="background.png"
      muted
      autoplay
    ></amp-video>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="vertical">
    <h1>These are the Top 5 World's Most...</h1>
    <p>Jon Bersch</p>
    <p>May 18</p>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="thirds">
    <amp-img
      grid-area="bottom-third"
      src="a-logo.svg"
      width="64"
      height="64"
    ></amp-img>
  </amp-story-grid-layer>
</amp-story-page>

有效的子元素

<amp-story-page> 元件包含一個或多個圖層。圖層由下而上堆疊（DOM 中指定的第一個圖層在最底層；DOM 中指定的最後一個圖層在最頂層）。

屬性

id [必填]

頁面的唯一識別碼。可用於在 CSS 中設定頁面及其後代元素的樣式，也用於在 URL 片段中唯一識別頁面。

auto-advance-after [選填]

指定何時自動前進到下一頁。如果省略，頁面將不會自動前進。auto-advance-after 的值必須是指定的時間量，或是 HTMLMediaElement 或視訊介面的 id。

例外狀況 auto-advance-after 啟用輕鬆瀏覽的使用者體驗。在沒有 auto-advance-after 的情況下，伺服器平台可能會決定在特定持續時間後自動前進。

時間

在指定的時間量後自動前進到下一個故事頁面。時間必須為正數。

<amp-story-page id="tokyo" auto-advance-after="1s">
  ...
</amp-story-page>

元素 ID

您可以在影片完成時自動前進到下一個故事頁面。將 auto-advance-after 屬性指向顯示影片的 HTMLMediaElement 或視訊介面的 id。這包括 AMP 特定元件，例如 amp-video。

<amp-story-page id="tokyo" auto-advance-after="video1">
  ...
    <amp-video autoplay id="video1"
    width="720" height="1280"
    poster="todo.jpg"
    layout="responsive">
    <source src="video1.mp4" type="video/mp4">
    </amp-video>
  ...
</amp-story-page>

background-audio [選填]

當此頁面顯示時播放的音訊檔案 URI。

例如

<amp-story-page
  id="zurich"
  background-audio="./media/switzerland.mp3"
></amp-story-page>

動畫

需要更多協助嗎？

您已經閱讀這份文件十幾次，但它仍然沒有真正涵蓋您的所有問題嗎？也許其他人也有相同的感受：在 Stack Overflow 上與他們聯繫。

前往 Stack Overflow

發現錯誤或缺少功能嗎？

AMP 專案非常鼓勵您的參與和貢獻！我們希望您能成為我們開源社群的持續參與者，但我們也歡迎您針對您特別關注的問題做出一次性的貢獻。

前往 GitHub