Web Story 技术细节

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

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

AMP 有效

从技术角度来看，Web Story 是使用 AMP 构建的单个网页，并遵守 AMP 规范

从 <!doctype html> doctype 开始。
包含一个顶级 <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 快拍 URL。
在 <head> 标签中包含一个 <meta name="viewport" content="width=device-width"> 标签。还建议包含 initial-scale=1。
在 <head> 标签中包含 AMP 样板代码。

AMP 网页和使用 AMP 构建的 Web 快拍之间的区别是 amp-story 组件。它是文档 <body> 的唯一直接子元素，并且必须包含 standalone 属性。所有 Web 快拍页面、图层和元素都在 <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 快拍教程和阅读 amp-story 参考文档了解更多信息。

峰值性能和用户体验

用户可能会在网络连接较差的区域或较旧的设备上查看 Web 快拍。通过遵循这些最佳实践，确保他们享受自己的体验。

背景颜色

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

在 Web 快拍文档的头部中 <style amp-custom> 标签内或 <amp-story-page> 组件的内联方式中为页面定义背景颜色。

分层元素

系统标题包含静音和分享图标等控件。它出现在比背景图像和视频更高的 z 轴索引中。确保这些图标不会覆盖任何基本信息。

纵横比

以 9:16 的宽高比设计 Web 故事素材。由于页面高度和宽度因浏览器和设备而异，因此不要将基本内容放置在页面边缘附近。

海报图片

在下载视频时，会向用户显示一张海报图片。海报图片应代表视频，以便实现平滑过渡。通过向 amp-video 元素添加 poster 属性并将其指向图片位置，指定一张海报图片。

<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 故事格式支持可选的横向模式和全屏桌面体验。这将桌面体验更改为沉浸式全屏模式，取代默认的三幅纵向面板体验。在移动设备上，它允许用户在设备以横向模式水平放置时查看故事。

虽然这目前是选择加入和可选的，但我们强烈建议确保移动设备上的用户能够以最适合他们需求的任何方向查看故事 - 否则，他们只会看到“该页面最适合以纵向模式查看”消息。

通过向 <amp-story> 组件添加 supports-landscape 属性，选择加入横向模式和全屏桌面支持。

<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