Web Story 技术细节

重要提示：此文档不适用于您当前选择的格式 email！

本指南解释了成功使用 AMP 创建 Web Stories 所需了解的所有技术细节和最佳实践。

AMP 有效

从技术上讲，Web Story 是一个用 AMP 构建的单页网页，并遵循 AMP 规范

从 <!doctype html> 文档类型开始。
包含顶级的 <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 Stories。请遵循以下最佳实践，确保他们享受体验。

背景颜色

为每个 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