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

什麼是 Web Story Player？

web story player demo — Web Story Player 示範

Web Story Player 是讓使用者在您的網站上使用 Web Story 獲得豐富使用者體驗的最佳方式。可以把它想像成影片播放器：您的裝置裡只有一個影片很好，但如果將它放在網路上運作的影片播放器中，就能解鎖許多功能和優點：會有額外的控制項 (例如字幕)，它與數百萬個其他影片共存，可以在原始影片結束時提供相關內容 - 這增加了探索性等等。

您可以對 Web Story Player 有類似的想法。如果只連結到單一故事，您可能會錯失其他故事平台 (例如 Instagram、Snapchat) 中發現的許多功能和體驗，而這些功能和體驗對於故事使用者來說是很自然的。請參閱下表中的一些範例。

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

	單一故事	Web Story Player
更豐富的使用者體驗
向下滑動以離開故事並返回您的網站	❌	✅
滑動到下一個/上一個故事	❌	✅
同網站進入點	❌	✅
自訂能力
自訂事件 (例如在故事之間導覽)	❌	✅
額外的使用者介面控制項	❌	✅
為故事新增作者資訊	❌	✅
以程式化方式擷取更多故事	❌	✅
自訂行為 (例如循環包裝)	❌	✅

常見實作方式

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

輪播 (UX 詳細資訊)

Web Story Player 輪播

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

在此處觀看即時示範！

此範例中的重要面向

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

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

將故事新增至播放器

有三種主要方式可將故事新增至播放器。

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

如果您只想在播放器中顯示一組靜態故事，最好的選擇是 (1)。但如果您想要動態新增故事，可以使用選項 (2) 或 (3) 執行此操作。

顯示故事

在播放器中顯示和新增故事最簡單的方式，是直接在 HTML 中宣告它們，其中 <amp-story-player> 元素以 <a> 標籤的形式位於該處。請參閱指南「顯示 Web Story」章節中的程式碼範例。

從端點擷取更多故事

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

使用 add() API 新增故事

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

可自訂的使用者介面

播放器解鎖了許多功能，可讓您自訂系統顯示的使用者介面。除了控制項之外，您也可以為播放器內的故事新增作者資訊，以便使用者知道他們目前正在互動的故事是由誰發布的。

為創作者/發布者新增作者資訊

Web Story 中的作者資訊

故事頂端的創作者標題

故事作者資訊會顯示實體或發布者的名稱和標誌。點擊後，它會將使用者導覽至實體的 URL 或發布者的標準網域。

若要在故事中顯示作者資訊，請使用播放器的 display 和 attribution 選項。請參閱JSON 設定。

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

對於標誌：entity-logo-src 屬性 (如果已提供)，否則為 publisher-logo-src 屬性。
對於文字字串：entity 屬性 (如果已提供)，否則為 publisher 屬性。
當點擊作者資訊時，它會將使用者導覽至 URL。如果已提供 entity-url 屬性，則會來自該屬性，否則會使用故事的標準網域。

請在amp-story 的中繼資料指南中閱讀有關這些屬性的更多資訊。

修改及新增現有控制項

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

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

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

設定最終看起來會像這樣

<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>
 ...

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

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

<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>

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

修改行為

有許多選項可用於自訂播放器的行為。請閱讀以下章節，以瞭解您可以執行哪些操作。

循環包裝

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

在背景中倒轉故事

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

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

最佳化效能和 SEO

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

適用於首頁上方的播放器

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

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

適用於首頁下方的播放器

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