amp-story, как получить mp4 видео в полноэкранном списке amp-list? - PullRequest
Новая
       36

amp-story, как получить mp4 видео в полноэкранном списке amp-list?

0 голосов
/ 04 июня 2018

У меня есть история с усилителем, где мне нужно создать страницу с полноэкранным видео из динамически генерируемого URL.На странице 2 ниже, где я использую компонент amp-video напрямую, он отображает полноэкранный режим, на странице 3, где я использую список усилителей для предоставления 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>

1 Ответ

0 голосов
/ 04 июня 2018

В настоящее время стиль «заливки» (выполняется с помощью object-fit: cover для элемента, который занимает полный видовой экран) применяется только к прямым потомкам <amp-story-grid-layer>, но ваше видео не является прямым потомком, поскольку оно встроено в<amp-list>.Вы можете увидеть стили, вызывающие это в amp-story.css .

Тем не менее, вероятно, это будет ударом производительности для выполнения нескольких запросов туда и обратно для определения видео для воспроизведения (сначала извлечь JSON, затем извлечь poster, затем извлечь src), и страница будет выглядеть пустой до тех пор, пока не завершатся сетевые запросы.

Другой подход, который можно использоватьзаключается в том, чтобы определить правильный URL-адрес видео на стороне сервера, чтобы свести к минимуму количество запросов в критическом пути для пользователя.

...