Web Story 技术细节

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

AMP 有效

从技术上讲，Web Story 是一个使用 AMP 构建并符合 AMP 规范的单页 Web 页面。

从 <!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 Story。请确保他们遵循以下最佳实践来享受他们的体验。

背景颜色

为每个 Web Story 页面指定背景颜色。如果用户的条件阻止他们下载图像或视频资源，则具有背景颜色可提供良好的后备。选择一种代表页面预期背景资源主色调的颜色，或者为所有故事页面使用一致的颜色主题。为了便于阅读，请确保背景颜色与前景文本具有足够的颜色对比度。理想情况下，目标是 4.5:1 的颜色对比度。如果无法实现此目的，请考虑在文本本身后面添加一个额外的背景，从而产生足够的对比度。

在 Web Story 文档头部的 <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> vs 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 撰写