4

我有一个 amp 故事，我需要从动态生成的 url 创建一个包含全屏视频的页面。在下面的第 2 页中，我直接使用 amp-video 组件呈现全屏，在第 3 页中，我使用 amp-list 提供视频 url，它不会“填充”页面。请参阅https://codepen.io/svdoever/pen/gKPdjK。要查看 codepen.io 上的示例，首先单击按钮并刷新以启用 amp-story 实验。然后使预览窗口足够大以显示故事。

<!doctype html>
<html amp lang="en">

<head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-0.1.js"></script>
    <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
    <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
    <title>My Story</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <link rel="canonical" href="amp-list-video-story.html">
    <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>

    <style amp-custom>
        body {
            font-family: 'Roboto', sans-serif;
        }

        amp-story-page {
            background: white;
        }

        h1 {
            font-size: 2.875em;
            font-weight: normal;
            line-height: 1.174;
            text-transform: uppercase;
        }
    </style>
</head>

<body>
    <amp-story standalone>
        <amp-story-page id="cover">
            <amp-story-grid-layer template="vertical">
                <h1>Hello World</h1>
                <p>This is the cover page of this story.</p>
            </amp-story-grid-layer>
        </amp-story-page>

        <amp-story-page id="page-1">
            <amp-story-grid-layer template="vertical">
                <h1>Hello Earth</h1>
                <p>This is the earth page of this story.</p>
            </amp-story-grid-layer>
        </amp-story-page>


        <amp-story-page id="page-2">
            <amp-story-grid-layer template="fill">
                <amp-video width="480" height="270" 
                            src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WhatCarCanYouGetForAGrand.mp4" 
                            layout="responsive" 
                            poster="https://dummyimage.com/720x1280/000/fff" controls autoPlay loop>
                    <div fallback><p>Your browser doesn't support HTML5 video.</p></div>
                </amp-video>
            </amp-story-grid-layer />
            </amp-story-page>
          <amp-story-page id="page-3">
            <amp-story-grid-layer template="fill">
                <amp-list layout="fill" width="480" height="270" single-item items="."
                    src="https://gist.githubusercontent.com/svdoever/9de8228fbea47100cdac3ee636f04d3f/raw/4d2b98691858c2e780a489cb201ac0fe491b24c0/amp-list-video-story.json">
                    <template type="amp-mustache" id="amp-template-id">
                        <amp-video width="480" height="270" src="{{url}}" layout="responsive" poster="https://dummyimage.com/720x1280/000/fff" autoPlay>
                            <div fallback><p>Your browser doesn't support HTML5 video.</p></div>
                        </amp-video>
                    </template>
                </amp-list>
            </amp-story-grid-layer />
        </amp-story-page>

    </amp-story>
</body>
</html>
4

1 回答 1

3

目前，“填充”样式（object-fit: cover在占据整个视口的元素上完成）仅适用于 的直接后代<amp-story-grid-layer>，但您的视频不是直接后代，因为它嵌入在<amp-list>. 您可以在amp-story.css中查看导致此问题的样式。

也就是说，执行多个往返请求以确定要播放的视频（首先获取 JSON，然后获取poster，然后获取src）可能会影响性能，这将使页面显示为空白，直到网络请求已完成。

可以使用的另一种方法是在服务器端确定正确的视频 URL，以最大限度地减少用户关键路径中的请求数量。

于 2018-06-04T14:49:37.800 回答