AMP

Important: this component does not support your currently selected format email!

amp-video

Замена тега HTML5 video, предназначенная только для добавления видео непосредственно на страницу с помощью кода HTML5.

Скрипт <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
Примеры См. на сайте AMP By Example:
Поддерживаемые макеты fill, fixed, fixed-height, flex-item, nodisplay, responsive

Принципы работы

Компонент amp-video по мере воспроизведения ролика выполняет отложенную загрузку видеоресурса, указанного в атрибуте src. Настройка компонента amp-video почти не отличается от настройки обычного элемента HTML5 <video>.

Компонент amp-video поддерживает в качестве дочерних HTML-узлы четырех уникальных типов:

  • Теги source. Как и в случае с тегом HTML <video>, вы можете добавить дочерние теги <source> и указать в них несколько разных исходных медиафайлов.
  • Теги track, используемые для показа субтитров. Если файл субтитров не размещен в том же источнике, что и ваша страница, необходимо включить в тег <amp-video> атрибут crossorigin.
  • Изображение, которое будет показываться до начала воспроизведения ролика.
  • Резервный контент на случай, если браузер пользователя не поддерживает видео HTML5. Максимум в один дочерний узел можно добавить атрибут fallback, при наличии которого контент этого узла и его дочерних элементов будет демонстрироваться в определенных браузерах вместо видео.

Пример

This browser does not support the video element.

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

Статистика

Компонент amp-video по умолчанию поддерживает сбор статистики. Подробнее…

Атрибуты

src Требуется, если нет дочерних элементов <source>. URL должен начинаться с префикса https.
poster Изображение, которое будет демонстрироваться до начала воспроизведения ролика. По умолчанию отображается первый кадр.
Вы также можете добавить оверлей для запуска видео по клику. Более подробно об этом рассказывается ниже.
autoplay Если этот атрибут указан и браузер поддерживает автовоспроизведение, видео будет проигрываться автоматически при появлении в видимой области экрана. Ознакомьтесь с касающимися этой функции условиями, которые перечислены в спецификации видео для AMP.
controls Примерно соответствует атрибуту controls в элементе HTML5 video. Если этот атрибут включен в код, то в браузере пользователю становятся доступны элементы управления воспроизведением.
controlsList Не отличается от атрибута controlsList элемента HTML5 video. Поддерживается только некоторыми браузерами. Подробная информация – на странице https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList.
dock Для работы требуется расширение amp-video-docking. Если этот атрибут указан, то запущенное вручную видео, оказавшееся вне зоны видимости в результате прокрутки страницы, уменьшается и закрепляется в углу экрана или в заданном месте. Дополнительные сведения вы найдете в документации по расширению amp-video-docking.
loop При наличии этого атрибута ролик после окончания будет автоматически воспроизводиться с начала.
crossorigin Требуется, если ресурс элемента track не размещен в том же источнике, что и веб-документ.
disableremoteplayback Определяет, допускается ли воспроизведение видео из мультимедийного элемента в интерфейсе удаленных устройств, например с использованием элементов управления Chromecast или AirPlay.
muted (поддержка прекращена) Атрибут muted больше не поддерживается и ни на что не влияет. Отключение звука автоматически регулируется атрибутом autoplay.
noaudio Указывает на отсутствие аудио в ролике. При наличии этого атрибута скрывается значок эквалайзера, показываемый в случаях, когда настроено автовоспроизведение видео.
rotate-to-fullscreen Если пользователь повернет устройство горизонтально, видео, находящееся в видимой области, начнет демонстрироваться в полноэкранном режиме. Подробнее…
универсальные атрибуты Атрибуты, которые поддерживаются большинством компонентов AMP.

Атрибуты Media Session API

Компонент amp-video работает с применением Media Session API. Это позволяет разработчикам указывать дополнительную информацию о видеофайле, которая будет отображаться в центре уведомлений на устройстве пользователя (вместе с кнопками запуска и приостановки воспроизведения).

artwork URL изображения в формате PNG, JPG или ICO, которое должно иллюстрировать видео. Если такого URL нет в этом атрибуте, вспомогательный класс Media Session API использует либо данные из определенного на сайте schema.org поля image, либо URL из метатега og:image, либо значок сайта.
artist Сведения о том, кто автор видео. Значение – строка.
album Сведения о том, к какому альбому или какой коллекции относится видео. Значение – строка.
title Название ролика в виде строки. Если оно не указано, вспомогательный класс Media Session API использует либо значение атрибута aria-label, либо заголовок страницы.

Пример

В этом примере среди атрибутов есть и poster, и artwork. Изображение poster демонстрируется в проигрывателе, пока не запущено видео, а изображение artwork показывается в уведомлении с помощью MediaSession API.

<amp-video width="720" height="305" layout="responsive"
    src="https://yourhost.com/videos/myvideo.mp4"
    poster="https://yourhost.com/posters/poster.png"
    artwork="https://yourhost.com/artworks/artwork.png"
    title="Awesome video" artist="Awesome artist"
    album="Amazing album">
</amp-video>

Оверлей для запуска видео по клику

Чтобы повысить удобство просмотра, в видеопроигрыватели на сайтах часто вставляют оверлеи, позволяющие запускать воспроизведение по клику. Например, можно включить в такой оверлей собственный значок воспроизведения, на который будут нажимать пользователи, а также добавить название ролика, изображения-обложки разных размеров и т. д. Поскольку компонент amp-video поддерживает стандартное AMP-действие play, внедрить функцию запуска видео по клику не составит труда.

Подробно разобранный пример оверлея вы найдете на сайте AMP By Example.

Валидация

С правилами для компонента amp-video можно ознакомиться в спецификации валидатора AMP.

Need more help?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub