AMP

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, при наличии которого контент этого узла и его дочерних элементов будет демонстрироваться в определенных браузерах вместо видео.

Пример

Показать код полностью

Статистика

Компонент 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. Это позволяет разработчикам указывать дополнительную информацию о видеофайле, которая будет отображаться в центре уведомлений на устройстве пользователя (вместе с кнопками запуска и приостановки воспроизведения).

artworkURL изображения в формате 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