在非 AMP 网站上使用 Web Story Player 创建 Web Story 体验

什么是网络故事播放器？

web story player demo — Web Story Player 演示

Web Story Player 是在网站上使用 Web Stories 为用户提供丰富用户体验的最佳方式。可以将其视为视频播放器：在设备中拥有单个视频很好，但将其放入网络上的视频播放器中，它将解锁许多功能和好处：有额外的控件（例如字幕），它与数百万个其他视频共存，这些视频可以在原始视频的结尾提供相关内容，这增加了可发现性等等。

您可以对 Web Story Player 产生类似的想法。仅链接到单个故事，您可能会错过其他故事平台（例如 Instagram、Snapchat）中的一些功能和体验，而这些功能和体验对故事用户来说是自然的。请参阅下表了解一些示例。

本指南主要包含播放器的非 AMP 版本中提供的一些功能。要了解播放器的 AMP 兼容版本可以实现什么，请访问在 AMP 页面中集成故事一文。

	单个故事	Web Story Player
更丰富的用户体验
向下滑动退出故事并返回到您的网站	❌	✅
滑动到下一个/上一个故事	❌	✅
同站点入口点	❌	✅
自定义功能
自定义事件（例如在故事之间导航）	❌	✅
其他 UI 控件	❌	✅
向故事添加归属	❌	✅
以编程方式获取更多故事	❌	✅
自定义行为（例如循环包装）	❌	✅

常见实现

您可以使用 Web Story Player 在自己的平台中创建许多体验，从轮播到单例卡片，再到直接将故事嵌入页面中。我们已经开发了一个详细的 UX 指南，其中包含最佳实践，以配合这些示例。我们推荐的最常见模式是轮播。我们将概述创建此类体验的最佳实践，但您应该随意尝试并实施最适合您的用例的方法。我们将在未来几周内分享更广泛的 UX 模式列表。

轮播 (UX 详情)

Web Story Player 轮播

故事轮播在彼此旁边有多个故事。它通常包含故事的预览，例如缩略图和标题。单击后，它将打开故事。然后，用户可以消费故事或在故事之间滑动。

在此查看现场演示！

此示例中的重要方面

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

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

向播放器添加故事

有三种主要方法可以将故事添加到播放器中。

在播放器 HTML 中将它们声明为锚点标签。
使用获取行为从端点获取更多故事。
使用 add() API 添加一个或多个故事。

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

展示故事

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

从端点获取更多故事

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

使用 add() API 添加故事

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

可定制 UI

该播放器解锁了许多功能，允许您自定义系统显示的 UI。除了控件之外，您还可以在播放器中添加故事的归属信息，以便用户知道他们当前正在与之交互的故事是由谁发布的。

为创建者/发布者添加归属

网络故事中的归属信息

故事顶部的创作者标题

故事归属信息显示实体或发布者的名称和徽标。单击后，它将引导用户访问实体的网址或发布者的规范域名。

要在故事中显示归属信息，请使用播放器的 display 和 attribution 选项。请参阅 JSON 配置。

数据将来自故事文档中 <amp-story> 的元数据属性，如所述

对于徽标：entity-logo-src 属性（如果提供），否则为 publisher-logo-src 属性。
对于文本字符串：entity 属性（如果提供），否则为 publisher 属性。
单击归属信息时，它将引导用户访问一个网址。这将来自 entity-url 属性（如果提供），否则将使用故事的规范域名。

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

关闭播放器控件，位于开始位置

在台式机上，你现在可以显示一个按钮，用于从当前故事导航到下一个故事。当用户到达播放器中故事的结尾时，它也会自动禁用。

<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()。

对于折叠线以下的播放器

折叠线以下的播放器会自动优化性能，并且仅在检测到滚动时预加载第一个故事。一旦播放器在视口中可见，故事将开始播放。