Web Story 技术细节

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

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

AMP 有效

Web Story 在技术上是用 AMP 构建的单个网页，并且符合 AMP 规范

以 <!doctype html> doctype 开始。
包含顶级 <html ⚡> 或 <html amp> 标签。
包含 <head> 和 <body> 标签。
包含作为 <head> 标签的第一个子元素的 <meta charset="utf-8"> 标签。
在它们的 <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 索引显示。确保没有重要信息被这些图标覆盖。

宽高比

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

视频后自动前进

auto-advance-after 属性由 amp-story-page 公开，它指定故事页面是否应在没有用户点击的情况下前进以及何时前进。要在视频后前进，请将该属性指向视频 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 撰写