Web Story 技術細節

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

本指南說明您應瞭解的所有技術細節和最佳實務，以便成功使用 AMP 建立 Web Story。

AMP 驗證

從技術上來說，Web Story 是使用 AMP 建構的單一網頁，並遵循 AMP 規範

從 <!doctype html> doctype 開始。
包含頂層 <html ⚡> 或 <html amp> 標記。
包含 <head> 和 <body> 標記。
包含 <meta charset="utf-8"> 標記作為 <head> 標記的第一個子項。
在其 <head> 標記內包含 <script async src="https://cdn.ampproject.org/v0.js"></script> 標記。最佳實務是儘早將指令碼包含在 <head> 中。
在其 <head> 內包含 <link rel="canonical" href="page/url"> 標記，其中 href 指向 Web Story URL。
在 <head> 標記內包含 <meta name="viewport" content="width=device-width"> 標記。也建議包含 initial-scale=1。
在 <head> 標記中包含 AMP 樣板程式碼。

AMP 網頁與使用 AMP 建構的 Web Story 之間的差異在於 amp-story 元件。它是文件 <body> 的唯一直接子項，且必須包含 standalone 屬性。所有 Web Story 頁面、圖層和元素都在 <amp-story> 標記內定義。

<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8">
    <title>Joy of Pets</title>
    <link rel="canonical" href="pets.html">
    <meta name="viewport" content="width=device-width">
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-video"
        src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
    <script async custom-element="amp-story"
        src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
    <style amp-custom>
    ...
    </style>
  </head>
  <body>
    <!-- Cover page -->
    <amp-story standalone
        title="Joy of Pets"
        publisher="AMP tutorials"
        publisher-logo-src="assets/AMP-Brand-White-Icon.svg"
        poster-portrait-src="assets/cover.jpg">
      <amp-story-page id="cover">
        <amp-story-grid-layer template="fill">
          <amp-img src="assets/cover.jpg"
              width="720" height="1280"
              layout="responsive"
              alt="...">
          </amp-img>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="vertical">
          <h1>The Joy of Pets</h1>
          <p>By AMP Tutorials</p>
        </amp-story-grid-layer>
      </amp-story-page>

      <!-- Page 1 -->
      <amp-story-page id="page1">
        <amp-story-grid-layer template="vertical">
          <h1>Cats</h1>
          <amp-img src="assets/cat.jpg"
              width="720" height="1280"
              layout="responsive"
              alt="...">
          </amp-img>
          <q>Dogs come when they're called. Cats take a message and get back to you. --Mary Bly</q>
        </amp-story-grid-layer>
      </amp-story-page>
      ...
    </amp-story>
  </body>
</html>

請依照建立您的第一個 Web Story 教學課程和閱讀 amp-story 參考文件以瞭解詳情。

最佳效能和使用者體驗

使用者可能在網路連線不佳的區域或使用較舊的裝置瀏覽 Web Story。請遵循下列最佳實務，確保他們享有良好的體驗。

背景顏色

為每個 Web Story 頁面指定背景顏色。如果使用者的條件使其無法下載圖片或影片素材，背景顏色可提供良好的備用方案。選擇代表頁面預期背景素材主要顏色的顏色，或為所有故事頁面使用一致的色彩主題。為了方便閱讀，請確保背景顏色與前景文字有足夠的色彩對比。理想情況下，目標是達到 4.5:1 的色彩對比度。如果無法達到此目標，請考慮在文字本身後方新增額外的背景，以產生足夠的對比。

在 Web Story 文件的 head 中 <style amp-custom> 標記內或 <amp-story-page> 元件上內嵌定義頁面的背景顏色。

圖層元素

系統標頭包含靜音和分享圖示等控制項。它的 z-index 高於背景圖片和影片。請確保重要資訊不會被這些圖示遮蓋。

長寬比

以 9:16 長寬比設計 Web Story 素材。由於頁面高度和寬度在不同瀏覽器和裝置之間有所不同，請勿將重要內容放在靠近頁面邊緣的位置。

海報圖片

海報圖片會在影片下載時向使用者顯示。海報圖片應代表影片，以實現流暢的轉換。透過將 poster 屬性新增至您的 amp-video 元素並將其指向圖片位置，來指定海報圖片。

<amp-video autoplay loop
  width="720" height="1280" layout="responsive"
  poster="images/kitten-playing.png">
  <source src="videos/kitten-playing.mp4"
    type="video/mp4" />
</amp-video>

影片

所有影片都必須透過 amp-video 元件新增。

<amp-video controls
  width="640"
  height="360"
  layout="responsive"
  poster="/static/inline-examples/images/kitten-playing.png">
  <source src="/static/inline-examples/videos/kitten-playing.webm"
    type="video/webm" />
  <source src="/static/inline-examples/videos/kitten-playing.mp4"
    type="video/mp4" />
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>

解析度和品質

編碼影片以調整品質，以進行下列建議的最佳化

MP4	-crf 23
WEBM	-b:v 1M

盡量讓 HLS 片段保持在 10 秒以下。

格式和大小

為了獲得最佳效能，請讓影片保持在 4MB 以下。考慮將大型影片分割到多個頁面。

如果您只能提供單一影片格式，請提供 MP4。使用下列影片編碼解碼器

MP4、HLS 和 DASH	H.264
WEBM	VP9

指定 <source> 與 src

在 <amp-video> 元件中使用 <source> 子元素，以透過 src 屬性指定影片來源。使用 <source> 元素可讓您指定影片類型並新增備份影片來源。您必須使用 type 屬性來指定 MIME 類型。針對 HLS 影片，請使用 application/x-mpegurl 或 application/vnd.apple.mpegurl。針對所有其他影片類型，請使用 video/ MIME 字首，然後接續影片格式，例如 ”video/mp4”。

<amp-video id="video-page1" autoplay loop
  layout="fill" poster="https://example.com/media/poster.jpg">
  <source src="https://amp-example.com/media/movie.m3u8"
    type="application/vnd.apple.mpegurl" />
  <source src="https://amp-example.com/media/movie.mp4"
    type="video/mp4" />
</amp-video>

影片後自動跳轉

amp-story-page 公開的 auto-advance-after 屬性指定故事頁面是否應在使用者未點擊的情況下自動跳轉以及何時跳轉。若要在影片後跳轉，請將屬性指向影片 ID。

<amp-story-page auto-advance-after="myvideo">

橫向和全版面桌機體驗

Web Story 格式支援選用的橫向和全版面桌機體驗。這會將桌機體驗變更為沉浸式全版面模式，取代預設的三個直向面板體驗。在行動裝置上，這可讓使用者在裝置水平橫向握持時觀看故事。

雖然這目前是選擇加入且為選用項目，但我們強烈建議您確保行動裝置上的使用者能夠以最符合其需求的任何方向觀看故事；否則，他們只會看到「此頁面最適合以直向模式瀏覽」訊息。

若要選擇加入橫向和全版面桌機支援，請將 supports-landscape 屬性新增至 <amp-story> 元件。

<amp-story standalone
    supports-landscape
    title="Joy of Pets"
    publisher="AMP tutorials"
    publisher-logo-src="assets/icon.svg"
    poster-portrait-src="assets/cover.jpg">
</amp-story>

作者： @CrystalOnScript