Question

我有一个安培故事，我需要创建一个包含来自动态生成网址的全屏视频的页面。在下面的第2页中，我直接使用放大器视频组件，它在第3页中呈现全屏，我使用放大器列表来提供不会“填充”页面的视频网址。见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>

Answer 1

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

也就是说，执行多个往返请求以确定要播放的视频可能会受到性能影响（首先获取JSON，然后获取<amp-list>，然后获取{{1在网络请求完成之前，这将使页面显示为空白。

可以使用的另一种方法是确定适当的视频URL服务器端，以最小化用户关键路径中的请求数。

amp-story如何在安培列表全屏显示mp4视频？

1 个答案: