在非 AMP 站点上使用 Web Story 播放器创建 Web Story 体验

什么是 Web Story 播放器？

Web Story 播放器是让用户在您的网站上使用 Web Story 获得丰富用户体验的最佳方式。可以将它看作视频播放器：在您的设备中拥有单个视频很好，但将其放入网络上的视频播放器中，它会解锁许多特性和优势：它有额外的控件（例如字幕），它与数百万其他视频一起存在，可以在您原始视频末尾提供相关内容，从而增加了可发现性等等。

您可以类似地看待 Web Story 播放器。仅链接到单个故事，您可能会错过其他故事平台（例如 Instagram、Snapchat）中发现的以及故事用户自然而然拥有的许多特性和体验。请参阅下表中的一些示例。

常见实现方式

您可以使用 Web Story 播放器在您自己的平台上创建多种体验，从轮播到单例卡片，再到直接将故事嵌入页面中。我们开发了一份详细的 UX 指南，其中包含与这些示例相符的最佳实践。我们推荐的最常见的模式是轮播。我们将概述创建此类体验的最佳实践，但您应该自由地进行实验并实现最适合您的用例的方法。我们将在未来几周内分享更广泛的 UX 模式列表。

轮播（UX 细节）

故事轮播有多个故事并排排列。它通常包括故事的预览，如缩略图和标题。单击后，它将打开故事。然后，用户可以查看故事或在故事之间滑动。

此示例中的重要方面

• 在桌面版上
  • 播放器有一个“关闭”按钮以退出灯箱体验
  • 播放器有一个“跳到下一个”按钮以跳到下一个故事
  • 入口点在悬停时显示背景卡片
• 在移动设备上
  • 支持滑动以在故事之间导航
  • 禁用“滚动背景页面”，以产生滑动关闭的手势
  • 入口点卡片的大小小于桌面版
  • 没有背景卡片（因为移动版没有悬停）
  • 启用向下滑动以关闭故事
• 在两种屏幕尺寸上
  • 播放器开始时暂停，只有在用户单击入口点后才开始播放。
  • 轮播遵循剧本中的 UX 最佳实践。

要查看构建此所需的全部代码，请访问codepen 项目。

向播放器添加故事

向播放器添加故事主要有三种方式。

1. 将它们声明为播放器 HTML 中的锚标记。
2. 使用 fetch 行为从端点获取更多故事。
3. 使用 add() API 添加一个或多个故事。

如果您只想在播放器中显示一组静态的故事，那么最好的选择是 (1)。但是，如果您想动态添加故事，则可以使用选项 (2) 或 (3)。

显示故事

向播放器显示和添加故事的最简单方法是在 <amp-story-player> 元素所在的 HTML 中将它们直接声明为 <a> 标记。请参阅指南的“显示 Web Story”部分中的代码示例。

从端点获取更多故事

当用户在 Web Story 播放器中导航时，您可以创建“无限滚动”体验。为此，请包含fetch 操作并在 JSON 配置中指定端点。当用户越来越接近上次加载的故事时，播放器会自动获取更多故事。您可以通过设置后端个性化系统并使用 fetch 操作来为用户提供自定义的故事。

使用 add() API 添加故事

您可以使用add() API手动添加一个或多个故事。

可自定义的 UI

播放器解锁了许多功能，允许您自定义系统显示的 UI。除了控件之外，您还可以为播放器中的故事添加署名，以便用户知道他们当前正在互动的故事的发布者。

为创建者/发布者添加署名

故事顶部的创建者标题

故事署名会显示实体或发布者的名称和徽标。单击后，它会将用户导航到实体的 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>
 ...

示例 2 - 在桌面版上显示跳到下一个故事

在桌面设备上，您现在可以显示一个按钮，该按钮可从当前故事导航到下一个故事。一旦用户到达播放器中故事的末尾，该按钮也会自动禁用。

<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

播放器在后台执行许多操作，以确保它在任何给定时刻只使用所需的资源。话虽如此，您可以在自己这边做一些事情，以确保您的网站在使用播放器时性能良好。

对于首屏以上的播放器

如果您希望将故事嵌入在首屏（网页的上半部分；无需向下滚动即可看到）中，我们建议等到用户交互后再加载并播放第一个故事。为此，请按照以下步骤操作

1. 使用 JSON 配置禁用自动播放。
2. 添加一个用户交互，这将开始播放故事。
3. 当检测到用户交互时，使用播放器 API 调用 play()。

对于首屏以下的播放器

首屏下方的播放器会自动针对性能进行优化，并且仅预加载第一个故事，直到检测到滚动。一旦播放器在视口中可见，故事将开始播放。