在非 AMP 網站上使用 Web Story Player 建立 Web Story 體驗

什麼是 Web Story Player？

web story player demo — Web Story Player 示範

Web Story Player 是讓使用者在您的網站上使用 Web Story 獲得豐富使用者體驗的最佳方式。可以將它想像成影片播放器：您的裝置中只有單一影片也沒問題，但將其置於網路上線的影片播放器中，即可解鎖許多功能和優點：有額外的控制項 (例如字幕)、它與數百萬部其他影片並存，可以在原始影片結尾提供相關內容，進而提高探索性等等。

您可以將網路 story 播放器視為類似概念。如果僅連結到單一 story，您可能會錯失其他 story 平台 (例如 Instagram、Snapchat) 中常見，且 story 使用者習以為常的許多功能和體驗。請參閱下表中的一些範例。

本指南主要包含非 AMP 版本播放器可用的功能。如要瞭解 AMP 相容版本播放器的可能性，請造訪在 AMP 網頁中整合 story文章。

	單一 Story	Web story 播放器
更豐富的使用者體驗
向下滑動即可退出 Story 並返回您的網站	❌	✅
滑動至下一個/上一個 story	❌	✅
同網站進入點	❌	✅
自訂能力
自訂事件 (例如在 story 之間導航)	❌	✅
額外的 UI 控制項	❌	✅
為 story 新增出處	❌	✅
以程式輔助方式擷取更多 story	❌	✅
自訂行為 (例如循環包裝)	❌	✅

常見實作方式

您可以使用網路 story 播放器在您自己的平台中建立多種體驗，範圍從輪播到單張卡片，再到直接將 Story 嵌入網頁中。我們開發了詳細的 UX 指南，其中包含與這些範例搭配使用的最佳做法。我們建議最常見的模式是輪播。我們將概述建立此類體驗的最佳做法，但您應可隨意實驗並實作最適合您使用案例的方式。我們將在未來幾週內分享更廣泛的 UX 模式列表。

輪播 (UX 詳細資訊)

Web Story Player 輪播

story 輪播會將多個 story 並排放置。它通常包含 story 的預覽，例如縮圖和標題。點擊後，將開啟 story。然後，使用者可以瀏覽 story 或在 story 之間滑動。

在此處觀看即時示範！

此範例中的重要考量

在桌機上
- 播放器具有「關閉」按鈕，可退出燈箱體驗
- 播放器具有「跳至下一個」按鈕，可跳至下一個 story
- 進入點會在滑鼠游標停留在上方時顯示背景卡片
在行動裝置上
- 支援滑動以在 story 之間導航
- 「捲動背景網頁」已停用，以便將該手勢用於滑動關閉
- 進入點卡片的大小小於桌機
- 沒有背景卡片 (因為行動裝置中沒有滑鼠游標停留)
- 已啟用向下滑動以關閉 story
在兩種螢幕尺寸上
- 播放器開始時會暫停，只有在使用者點擊進入點後才會開始播放。
- 輪播遵循 UX playbook 中的最佳做法。

如要查看建構此項目的完整程式碼，請造訪 codepen 專案。

將 story 新增至播放器

將 story 新增至播放器主要有三種方式。

將它們宣告為播放器 HTML 內的錨定標記。
使用擷取行為從端點擷取更多 story。
使用 add() API 新增一個或多個 story。

如果您只想在播放器中顯示靜態的 story 集，則最佳選擇是 (1)。但如果您想要動態新增 story，則可以使用選項 (2) 或 (3)。

顯示 story

在播放器中顯示和新增 story 的最簡單方法，是直接在 <amp-story-player> 元素所在的 HTML 中，將它們宣告為 <a> 標記。請參閱指南的「顯示 Web Story」章節中的程式碼範例。

從端點擷取更多 story

當使用者在 Web Story Player 中瀏覽 story 時，您可以建立「無限捲動」體驗。如要執行此操作，請加入擷取動作，並在 JSON 設定中指定端點。當使用者接近上次載入的 story 時，播放器會自動擷取更多 story。您可以設定後端個人化系統，並使用 fetch 動作來提供擷取的 story，以便為使用者自訂這些 story。

使用 add() API 新增 story

您可以使用 add() API 手動新增一個或多個 story。

可自訂的 UI

播放器解鎖了許多功能，可讓您自訂系統顯示畫面的 UI。除了控制項之外，您還可以為播放器內的 story 新增出處，讓使用者知道他們目前正在互動的 story 由誰發布。

為建立者/發布者新增出處

網路 story 中的出處

story 頂端的建立者標題

story 出處會顯示實體或發布者的名稱和標誌。點擊後，它會將使用者導航至實體的 URL 或發布者的標準網域。

如要在 story 上顯示出處，請使用播放器的 display 和 attribution 選項。請參閱JSON 設定。

資料將來自 story 文件中 <amp-story> 的中繼資料屬性，如下所述

對於標誌：entity-logo-src 屬性 (如果提供)，否則為 publisher-logo-src 屬性。
對於文字字串：entity 屬性 (如果提供)，否則為 publisher 屬性。
點擊出處時，它會將使用者導航至 URL。這將來自 entity-url 屬性 (如果提供)，否則將使用 story 的標準網域。

如要進一步瞭解這些屬性，請參閱 amp-story 的中繼資料指南。

修改及新增現有控制項

這包括用於建立燈箱式體驗的「關閉」按鈕，以及用於在桌機上在 story 之間導航的「跳至下一個」按鈕。您也可以新增自己的自訂控制項，並監聽其事件以執行自訂動作。請參閱以下範例，以瞭解您可以做什麼。

如要設定它們，請將具有 type=”application/json” 屬性的 JSON 設定指定為 <amp-story-player> 元素的子項。

在設定內，指定「控制項」陣列。「控制項」結構如下所述。

設定最終看起來會像這樣

<amp-story-player>

 <script type="application/json">
   {
     "controls": [
       {
         "name": "close",
         "position": "start"
       },
       {
         "name": "skip-to-next"
       }
     ]
   }
 </script>

<a href="./story1.html"> ... </a>
<a href="./story2.html"> ... </a>
</amp-story-player>

範例 1 - 起始位置的關閉按鈕

由於預設設定 (當包含自訂 UI 設定 JSON 時) 會將所有這些按鈕設定在右側，因此我們只需將關閉按鈕移至起始位置即可。

<amp-story-player>
 <script type="application/json">
   {
     "controls": [
       {
         "name": "close",
         "position": "start"
       }
     ],
   }
 </script>
 ...

起始位置的播放器關閉控制項

在桌機上，您現在可以顯示一個按鈕，從目前的 story 導航到下一個 story。一旦使用者到達播放器中 story 的結尾，它也會自動停用。

<amp-story-player>
 <script type="application/json">
   {
     "controls": [
       {
         "name": "skip-to-next"
       }
     ],
   }
 </script>
 ...
</amp-story-player>

播放器的跳至下一個控制項

範例 3 - 變更關閉按鈕的圖示

<amp-story-player>
 <script type="application/json">
   {
     "controls": [
       {
         "name": "close",
         "backgroundImageUrl": "data:image\/svg+xml;charset=utf-8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.77778 9.33333H4V4H9.33333V5.77778H5.77778V9.33333ZM4 14.6667H5.77778V18.2222H9.33333V20H4V14.6667ZM18.2222 18.2222H14.6667V20H20V14.6667H18.2222V18.2222ZM14.6667 5.77778V4H20V9.33333H18.2222V5.77778H14.6667Z\" fill=\"white\"\/><\/svg>",
         "position": "start"
       }
     ]
   }
 </script>
 ...
</amp-story-player>

具有自訂圖示的播放器關閉控制項

修改行為

有多種選項可用於自訂播放器的行為。請詳閱以下章節，以瞭解您可以做什麼。

循環包裝

如果您希望使用者在完成最後一個 story 後返回第一個 story，您可以啟用循環包裝選項。

在背景中倒轉 story

如果您想要倒轉使用者已在播放器中看過的 story，您可以使用 rewind() API 來執行此操作。

您可以透過程式輔助方式在播放器內的 story 和網頁之間導航。如果您想要在播放器外部建立自己的導航按鈕，或者如果您想要根據事件 (例如) 在網頁之間切換，這可能會很有用。如要執行此操作，請使用 go() 和 show() API 及其變體。

最佳化效能和 SEO

播放器會在背景中執行許多操作，以確保它在任何給定時刻僅使用所需的資源。話雖如此，您可以從自身方面執行一些操作，以確保您的網站在使用播放器時效能良好。

適用於置於首頁上方的播放器

如果您希望將 story 嵌入在首頁上方 (在網頁的上半部分；無需向下捲動網頁即可看到)，我們建議等到使用者互動後再載入和播放第一個 story。如要執行此操作，請按照以下步驟操作

透過 JSON 設定停用自動播放。
新增將開始播放 story 的使用者互動。
偵測到使用者互動時，使用播放器 API 呼叫 play()。

適用於置於首頁下方的播放器

置於首頁下方的播放器會自動針對效能進行最佳化，並且只會預先載入第一個 story，直到偵測到捲動為止。一旦播放器在可視區域中可見，story 就會開始播放。