Web Story 技术细节

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

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

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 Stories。请遵循这些最佳实践，确保他们能够享受良好的体验。

背景颜色

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

在 Web Story 文档头部的 <style amp-custom> 标记内或 <amp-story-page> 组件上内联定义页面的背景颜色。

图层元素

系统标题包含静音和分享图标等控件。它显示在高于背景图像和视频的 z-index 上。确保这些图标不会覆盖任何重要信息。

宽高比

以 9:16 的宽高比设计 Web Story 资产。由于页面高度和宽度在不同浏览器和设备之间有所不同，因此请不要将重要内容放置在页面边缘附近。

海报图片

在下载视频时，会向用户显示海报图像。海报图像应代表该视频，以实现平稳过渡。通过向您的 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 Story 格式支持可选的横向方向和全屏桌面体验。这将桌面体验更改为沉浸式的全屏模式，取代了默认的三个纵向面板体验。在移动设备上，它允许用户在将设备水平握持在横向模式下时查看故事。

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

通过向 <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