Учебники

Google AMP — Видео

Ноябрь 7, 2018

Amp-video in amp — это стандартное видео html5, используемое для воспроизведения прямых вставок видео. В этой главе мы разберемся, как работать с усилителем и использовать его.

Для работы с amp-video нам нужно добавить следующий скрипт — 

<script async custom-element = "amp-video" 
   src = "https://cdn.ampproject.org/v0/amp-video-0.1.js">
</script>

Amp-video имеет атрибут src, который имеет загружаемый видеоресурс, который лениво загружается amp во время выполнения. Кроме того, все функции почти такие же, как тег видео html5.

Ниже приведены узлы, которые должны быть добавлены к видео усилителя.

  • Источник — Вы можете добавить различные медиа-файлы для воспроизведения, используя этот тег.

  • Track — этот тег позволяет вам включить субтитры для видео.

  • Заполнитель — этот тег заполнителя будет отображать содержимое до начала видео.

  • Fallback — этот тег будет вызываться, когда браузер не поддерживает видео HTML5.

Источник — Вы можете добавить различные медиа-файлы для воспроизведения, используя этот тег.

Track — этот тег позволяет вам включить субтитры для видео.

Заполнитель — этот тег заполнителя будет отображать содержимое до начала видео.

Fallback — этот тег будет вызываться, когда браузер не поддерживает видео HTML5.

Формат тега amp-video

Формат тега amp-video показан здесь — 

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

Давайте разберемся с amp-video, используя рабочий пример, как показано ниже —

пример 

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Video</title>
      <link rel = "canonical" href =  "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width, minimum-scale = 1,initial-scale=1">

      <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 custom-element = "amp-video" 
         src = "https://cdn.ampproject.org/v0/amp-video-0.1.js">
      </script>
   </head>
   <body>
      <h3>Google AMP - Amp Video</h3>
      <amp-video controls
         width = "640"
         height = "360"
         layout = "responsive"
         poster = "images/videoposter.png">
         <source src = "video/bunny.webm" type = "video/webm" />
         <source src = "video/samplevideo.mp4" type = "video/mp4" />
         
         <div fallback>
            <p>This browser does not support the video element.</p>
         </div>
      </amp-video>
   </body>
</html>

Выход

Вывод кода, приведенного выше, показан ниже:

AMP-видео тег

Атрибуты, доступные для amp-video

Атрибуты, доступные для amp-video, перечислены в таблице здесь —

Sr.No Атрибуты и описание
1

ЦСИ

Если узел <source> отсутствует, то должен быть указан src, и он должен быть https: // url.

2

плакат

Постер принимает img url, который отображается перед началом видео.

3

Автовоспроизведение

При наличии этого атрибута на усилителе-видео видео будет воспроизводиться автоматически, если браузер поддерживает. Видео будет воспроизводиться в приглушенном режиме, и пользователю придется нажимать на видео, чтобы включить его.

4

управления

Наличие этого атрибута в amp-video покажет элементы управления на видео, аналогичные html5 video.

5

петля

Если этот атрибут присутствует в amp-video, видео будет воспроизведено снова после завершения.

6

crossorigin

Этот атрибут проявляется, если ресурс для воспроизведения видео находится в другом источнике.

7

повернуть к полноэкранным

Если видео видно, оно отображается во весь экран после того, как пользователь повернул свое устройство в альбомный режим.

ЦСИ

Если узел <source> отсутствует, то должен быть указан src, и он должен быть https: // url.

плакат

Постер принимает img url, который отображается перед началом видео.

Автовоспроизведение

При наличии этого атрибута на усилителе-видео видео будет воспроизводиться автоматически, если браузер поддерживает. Видео будет воспроизводиться в приглушенном режиме, и пользователю придется нажимать на видео, чтобы включить его.

управления

Наличие этого атрибута в amp-video покажет элементы управления на видео, аналогичные html5 video.

петля

Если этот атрибут присутствует в amp-video, видео будет воспроизведено снова после завершения.

crossorigin

Этот атрибут проявляется, если ресурс для воспроизведения видео находится в другом источнике.

повернуть к полноэкранным

Если видео видно, оно отображается во весь экран после того, как пользователь повернул свое устройство в альбомный режим.

Автоигра AMP Видео

Мы можем использовать атрибут autoplay, если нам нужно автоматически воспроизвести видео. Эта функция будет работать в соответствии с поддержкой браузера. Обратите внимание, что при автоматическом воспроизведении видео будет отключено. Когда пользователь нажимает на видео, оно будет включено.

Давайте воспользуемся функцией автозапуска с помощью рабочего примера, приведенного ниже —

пример 

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Video</title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">

      <meta name = "viewport" content = "width=device-width,minimum-scale = 1, initial-scale = 1">

      <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 custom-element = "amp-video" src = "
         https://cdn.ampproject.org/v0/amp-video-0.1.js">
      </script>
   </head>
   <body>
      <h3>Google AMP - Amp Video Autoplay</h3>
      <amp-video controls
         width = "640"
         height = "360"
         layout = "responsive"
         poster = "images/videoposter.png" autoplay>
         <source src = "video/bunny.webm" type = "video/webm" />
         <source src = "video/samplevideo.mp4" type = "video/mp4" />
         <div fallback>
            <p>This browser does not support the video element.</p>
         </div>
      </amp-video>
   </body>
</html>

Автоигра AMP Видео

Вы можете активировать элементы управления для видео, добавив атрибут управления, как показано в следующем коде —

41
Share: