何时应在 amp-story 中使用 layout= "fill" 与 layout= "responsive" 在 amp-story 中的 amp-video 上使用？两者有什么区别？

Question

以下是 amp 文档中针对 amp-video 标签的两个建议代码片段。 在大多数情况下，哪种实现会产生更快、更可靠的结果？这两个代码段在性能和用户体验方面有什么区别？

使用模板="填充">

和布局="填充"截取的第一个代码- https://github.com/ampproject/amphtml/blob/master/extensions/amp-story/amp-story.md#children

<amp-story-page id="cover">
<amp-story-grid-layer template="fill">
<amp-video layout="fill" src="background.mp4" poster="background.png" muted autoplay></amp-video>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<h1>These are the Top 5 World's Most...</h1>
<p>Jon Bersch</p>
<p>May 18</p>
</amp-story-grid-layer>
<amp-story-grid-layer template="thirds">
<amp-img grid-area="bottom-third" src="a-logo.svg" width="64" height="64"></amp-img>
</amp-story-grid-layer>
</amp-story-page>

模板=">

填充"和布局="响应式"的第二个代码片段- https://www.ampproject.org/docs/reference/components/amp-video

<amp-video controls
width="640"
height="360"
layout="responsive"
poster="images/kitten-playing.png">
<source src="videos/kitten-playing.webm"
type="video/webm" />
<source src="videos/kitten-playing.mp4"
type="video/mp4" />
<div fallback>
<p>This browser does not support the video element.</p>
</div>

Answer 1

两者都不会对性能产生直接影响;这只会改变页面上的布局。 此外，template="fill"属性实际上是特殊的，因为它覆盖了元素的大小。

因此，我实际上相信，只要在包含图层上设置template="fill"属性，无论layout属性的值如何，这里的最终结果都是相同的。