Все, что должны знать цифровые рекламодатели о видео AMP и атрибутах

Сегодня миллионы доменов опубликовали миллиарды страниц с мгновенной загрузкой, используя платформу Accelerated Mobile Pages. Этот проект, начатый несколько лет назад, помог улучшить не только время загрузки веб-страниц, но и удобство для пользователей и, как следствие, рентабельность инвестиций для бизнеса.

Это было достигнуто за счет снижения «веса» страниц - данных об их размере - с ограничениями на JavaScript, облегченной заменой популярных языков кодирования и кэшированием в сети доставки контента Google.

Однако самая большая критика проекта заключалась в том, что он менял вовлеченность на скорость. Когда-то это было правдой - AMP в основном использовался на новостных сайтах для статического контента, но теперь это не так. Теперь AMP можно использовать для создания целых веб-сайтов с высокоскоростными версиями тяжелых элементов страницы, таких как видео. Сегодня мы подробно описываем, как работают эти видеокомпоненты AMP, вплоть до определений конкретных терминов кодирования, возможностей аналитики, макетов и многого другого.

Атрибуты

Каждый компонент видео AMP имеет набор атрибутов. Некоторые из них перекрываются, некоторые являются уникальными для компонента, и каждый контролирует аспект поведения или отображения видео.

Ниже приводится список атрибутов, которые вы найдете среди компонентов, и их значение. Этот список не является исчерпывающим. Лучше дважды проверить специальную страницу разработчика AMP для компонента, прежде чем добавлять его на свою страницу.

• src: этот элемент является обязательным, если не указан <source>. Это должно быть указано в HTTPS.
• плакат: указывает миниатюру изображения, которое отображается перед тем, как зритель нажимает кнопку «Воспроизвести». По умолчанию отображается первый кадр. Вы также можете выбрать отображение наложения, которое воспроизводится по щелчку.
• Автовоспроизведение: если браузер поддерживает автовоспроизведение, вы можете использовать этот атрибут для автоматического воспроизведения видео, как только оно появится на виду у посетителя.
• Controls: с этим атрибутом браузер будет предлагать элементы управления, с помощью которых пользователь может управлять видеопроигрывателем.
• ControlList: поддерживается только некоторыми браузерами. ControlList позволяет пользователям отображать элементы управления, которые можно использовать для настройки воспроизведения.
• dock: в сочетании с расширением amp-video-docking этот атрибут минимизирует и фиксирует видеопроигрыватель в углу, когда пользователь прокручивает свою область.
• loop: если реализовано, видео автоматически вернется к началу, когда достигнет конца.
• crossorigin: этот элемент требуется, если видео размещено не в исходном документе.
• disableremoteplayback: с помощью этого элемента отключите удаленное воспроизведение через такие системы, как Chromecast или AirPlay.
• noaudio: этот атрибут отключает звук в видео.
• повернуть в полноэкранный режим: если этот атрибут включен, когда пользователь поворачивает свое устройство, видео будет отображаться в полноэкранном режиме.

Общие атрибуты

Общие атрибуты применяются ко многим компонентам AMP. Если в нашем списке видеокомпонентов AMP вы видите ссылку на «общие атрибуты», это означает, что с ними можно использовать следующее.

Отступать

В случае отката браузер будет сообщать зрителю, когда он не поддерживает элемент или когда загрузка не удалась. В приведенном ниже примере сообщение об ошибке гласит: «Не удается воспроизвести анимированные изображения на этом устройстве». Резервный вариант можно использовать для любого элемента AMP, который поддерживает резервные варианты, и он будет отображаться вместо неподдерживаемого элемента.

Высоты

Если элемент поддерживает адаптивный макет, он также поддерживает атрибут высоты. Атрибут высоты указывается на основе выражений мультимедиа и применяется только к высоте. Допускаются процентные значения. Если высота составляет 80%, как в примере ниже, высота элемента будет 80% от его ширины.

Макет

Атрибут layout указывает, как ведет себя элемент. Вы можете указать макет для компонента, добавив атрибут макета с одним из поддерживаемых значений макета для элемента (подробнее об этом позже).

СМИ

Большинство элементов AMP поддерживают атрибут media. Ценность медиа - это медиа-запрос. Если запрос не соответствует, элемент не отображается, и его ресурсы и, возможно, его дочерние ресурсы не будут извлечены. Если окно браузера меняет размер или ориентацию, медиа-запросы повторно оцениваются, а элементы скрываются и отображаются на основе новых результатов.

Разгрузка

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

Заполнитель

Элемент, отмеченный атрибутом placeholder, будет отображать заполнитель для своего родительского элемента. В приведенном ниже примере изображение предварительного просмотра показано как заполнитель для анимированного gif. Этот атрибут можно использовать в любом элементе HTML, который является дочерним элементом элемента AMP, поддерживающего заполнители.

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

Размеры

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

Ширина и высота

В определенных макетах атрибут ширины и высоты, содержащий значение в пикселях, должен быть указан для некоторых компонентов AMP.

Макет

Согласно ресурсам разработчика AMP, элементы AMP <amp-img> и <amp-video> могут иметь один из шести макетов, каждый из которых заставляет элемент вести себя по-разному:

Отзывчивый

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

Однако вы не можете просто указать элемент как отзывчивый. Чтобы обеспечить его отображение, необходимо указать ширину и высоту содержащего элемента.

Нет дисплея

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

Внутренний

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

Flex-элемент

В этом макете элементы в их родительском элементе будут занимать оставшееся пространство этого родительского элемента, когда это гибкий контейнер, например «display: flex».

Фиксированная высота

Элементы, указанные как fixed-height, будут адаптироваться к доступному пространству, но их высота останется постоянной. В этом случае атрибут высоты должен присутствовать, а атрибут ширины не должен быть (или, если он есть, равен нулю).

Фиксированный

Фиксированный элемент имеет фиксированную высоту и ширину, и его отзывчивость не поддерживается. Чтобы включить этот макет, необходимо указать как ширину, так и высоту.

Наполнять

В этом макете элемент заполнит всю доступную высоту и ширину. Он будет соответствовать высоте и ширине своего родительского элемента, если в родительском контейнере указано «position: relative» или «position: absolute».

Контейнер

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

Аналитическая поддержка

Хотя каждый компонент видео AMP может не иметь аналитических возможностей, которые есть у других видеоплееров, это не означает, что вы не можете отслеживать очень конкретные показатели производительности видео. Вот что вы сможете отслеживать:

• Автовоспроизведение: указывает, началось ли видео как видео с автовоспроизведением.
• currentTime: указывает текущее время воспроизведения (в секундах) во время срабатывания триггера.
• продолжительность: указывает общую продолжительность видео (в секундах).
• height: определяет высоту видео (в пикселях).
• id: указывает идентификатор видеоэлемента.
• playTotal: указывает общее количество времени, в течение которого пользователь смотрел видео.
• state: указывает состояние, которое может быть одним из следующих: «play_auto», «play_manual» или «paused».
• width: определяет ширину видео (в пикселях).
• playsRangesJson: представляет отрезки времени, в течение которых пользователь смотрел видео (в формате JSON).

Для некоторых компонентов видео AMP вы сможете определить все эти показатели. Для других у вас будет только частичная поддержка аналитики. Частичная поддержка означает, что поддерживаются все, кроме currentTime, aduration, playsRangesJson и playsTotal . В разделе видеокомпонентов AMP вы найдете уровни поддержки аналитики. Узнайте больше об аналитике видео AMP здесь.

Компоненты видео AMP

amp-video

Компонент amp-video является заменой тега HTML5 video; Используется только для прямого встраивания видеофайлов HTML5. Компонент amp-video лениво загружает видеоресурс, указанный в его атрибуте src, во время, определяемое средой выполнения. Вы можете управлять компонентом amp-video так же, как и стандартным тегом HTML5 <video>.

Пример

Поддержка аналитики: полная

Требуется скрипт: <script async custom-element = ”amp-video” src = ”https://cdn.ampproject.org/v0/amp-video-0.1.js”> </script>

Доступные макеты: заливка, фиксированная, фиксированная высота, гибкий элемент, нодисплей, адаптивный

Атрибуты: src, poster, autoplay, controls, controlsList, dock, loop, crossorigin, disableremoteplayback, noaudio, поворот в полноэкранный режим, общие атрибуты

amp-3q-player

Компонент amp-3q-player позволяет разработчикам встраивать видео из 3Q SDN.

пример

Поддержка аналитики: частичная

Требуется скрипт: <script async custom-element = ”amp-3q-player” src = ”https://cdn.ampproject.org/v0/amp-3q-player-0.1.js”> </script>

Доступные макеты: заливка, фиксированная, гибкая, адаптивная.

Атрибуты: автовоспроизведение (необязательно), общие атрибуты

amp-brightcove

Компонент amp-brightcove встраивает видеопроигрыватель, как это видно в облаке Brightcove Video Cloud или в Brightcove Player.

Пример

Поддержка аналитики: полная

Требуется скрипт: <script async custom-element = ”amp-brightcove” src = ”https://cdn.ampproject.org/v0/amp-brightcove-0.1.js”> </script>

Доступные макеты: заливка, фиксированная, фиксированная высота, гибкий элемент, нодисплей, адаптивный

Атрибуты: data-account, data-player или data-player-id, data-embed, data-video-id, data-playlist-id, data-referrer, data-param-

amp-dailymotion

Когда компонент amp-dailymotion показывает видео из проигрывателя Dailymotion.

Пример

Поддержка аналитики: частичная

Требуется скрипт: <script async custom-element = ”amp-dailymotion” src = ”https://cdn.ampproject.org/v0/amp-dailymotion-0.1.js”> </script>

Доступные макеты: заливка, фиксированная, фиксированная высота, гибкий элемент, адаптивный

Атрибуты: autoplay, data-videoid (обязательно), data-mute (необязательно), data-endcreen-enable (необязательно), data-sharing-enable (необязательно), data-start (необязательно), data-ui-highlight (необязательно) ), data-ui-logo (необязательно), data-info (необязательно), data-param- * (необязательно), dock, общие атрибуты

amp-facebook

Компонент amp-facebook обладает большей универсальностью, чем многие из тегов в этом списке. Помимо видео, тег amp-facebook также может отображать комментарий или публикацию Facebook.

Пример

Поддержка аналитики: частичная

Требуется скрипт: <script async custom-element = ”amp-facebook” src = ”https://cdn.ampproject.org/v0/amp-facebook-0.1.js”> </script>

Доступные макеты: заливка, фиксированная, фиксированная высота, гибкий элемент, нодисплей, адаптивный

Атрибуты: data-href (обязательно), data-embed-as, data-align-center, data-locale (необязательно), общие атрибуты

amp-gfycat

Компонент amp-gfycat отображает GIF с сайта gfycat.com.

Пример

Поддержка аналитики: частичная

Требуется скрипт: <script async custom-element = ”amp-gfycat” src = ”https://cdn.ampproject.org/v0/amp-gfycat-0.1.js”> </script>

Доступные макеты: заливка, фиксированная, фиксированная высота, гибкий элемент, адаптивный

Атрибуты: data-gfyid, ширина и высота, noautoplay, общие атрибуты

amp-hulu

Компонент amp-hulu включает видео с Hulu.

Пример

Поддержка аналитики: частичная

Требуется скрипт: <script async custom-element = ”amp-hulu” src = ”https://cdn.ampproject.org/v0/amp-hulu-0.1.js”> </script>

Доступные макеты: заливка, фиксированная, фиксированная высота, гибкий элемент, адаптивный

Атрибуты: data-eid, общие атрибуты

amp-ima-video

В amp-ima-video встроен видеопроигрыватель для видеорекламы InStream. Компоненту требуется рекламный тег, предоставленный в data-tag, который является URL-адресом VAST-совместимого рекламного ответа (примеры см. В разделе «Примеры тегов IMA»).

Пример

Поддержка аналитики: частичная

Требуется скрипт: <script async custom-element = ”amp-ima-video” src = ”https://cdn.ampproject.org/v0/amp-ima-video-0.1.js”> </script>

Доступный макет: фиксированный, адаптивный

Атрибуты: data-tag (обязательно), data-src, data-crossorigin, data-poster (необязательно), data-delay-ad-request (необязательно), data-ad-label (необязательно), dock, общие атрибуты

амп-излесене

Компонент amp-izlesene позволяет пользователям вставлять видео Izlesene.

Пример

Поддержка аналитики : частичная

Требуется скрипт: <script async custom-element = ”amp-izlesene” src = ”https://cdn.ampproject.org/v0/amp-izlesene-0.1.js”> </script>

Доступные макеты: заливка, фиксированная, фиксированная высота, гибкий элемент, адаптивный

Атрибуты: data-videoid (обязательно), data-param-showrel

amp-kaltura-player

Компонент amp-kaltura-player позволяет пользователям встраивать видео с помощью проигрывателя Kaltura Video Platform.

Пример

Поддержка аналитики : частичная

Требуется скрипт: <script async custom-element = ”amp-kaltura-player” src = ”https://cdn.ampproject.org/v0/amp-kaltura-player-0.1.js”> </script>

Доступные макеты: заливка, фиксированная, фиксированная высота, гибкий элемент, нодисплей, адаптивный

Атрибуты: data-partner, data-uiconf, data-entryid, data-param- *, общие атрибуты.

amp-ooyala-player

Amp-ooyala-player позволяет пользователям вставлять видео Ooyala.

Пример

Поддержка аналитики: частичная

Требуется скрипт: <script async custom-element = ”amp-ooyala-player” src = ”https://cdn.ampproject.org/v0/amp-ooyala-player-0.1.js”> </script>

Доступные макеты: заливка, фиксированный, гибкий элемент, адаптивный

Атрибуты: data-embedcode (обязательно), data-playerid (обязательно), data-pcode (обязательно), data-playerversion (необязательно), data-config (необязательно), общие атрибуты

amp-Reach-Player

Компонент amp -reach-player позволяет пользователям встраивать Reach Player в платформу Beachfront Reach.

Пример

Поддержка аналитики: частичная

Требуется скрипт: <script async custom-element = ”amp -reach-player” src = ”https://cdn.ampproject.org/v0/amp-reach-player-0.1.js”> </script>

Доступные макеты: заливка, фиксированная, фиксированная высота, гибкий элемент, адаптивный

Атрибуты: data-embed-id, общие атрибуты

amp-трамплин-плеер

Amp-springboard-player отображает проигрыватель, используемый в Springboard.

Пример

Поддержка аналитики: частичная

Требуется скрипт: <script async custom-element = ”amp-springboard-player” src = ”https://cdn.ampproject.org/v0/amp-springboard-player-0.1.js”> </script>

Доступные макеты: заливка, фиксированный, гибкий элемент, адаптивный

Атрибуты: date-site-id (обязательно), data-mode (обязательно), data-content-id (обязательно), data-player-id (обязательно), data-domain (обязательно), data-items (обязательно), общие атрибуты

amp-video-docking

С помощью расширения amp-video-docking видео можно свернуть до угла страницы или настраиваемого элемента, но только если видео воспроизводится вручную. Когда пользователь прокручивает область видеокомпонента, видео сворачивается и перемещается в указанное место. Если пользователь прокручивает назад, он вернется в исходное положение. Кроме того…

• Видео можно закрепить в углу по умолчанию или в произвольном фиксированном положении.
• Пользователь может перетащить видео и переместить его в другой угол.
• Видео можно щелкнуть, чтобы закрыть его из закрепленного положения.
• Несколько видео на одной странице могут быть закреплены, но только одно за раз будет закреплено и исправлено.

По умолчанию видео будет свернуто в правый верхний угол. На 30% ширины области просмотра, не менее 180 пикселей в ширину. Если документ RTL, видео будет прикреплено к верхнему левому углу. В этом режиме пользователи могут перетащить закрепленное видео, чтобы привязать его к любому углу.

Это расширение можно использовать только с поддерживаемым видеоплеером. В настоящее время поддерживаются следующие игроки:

• amp-brightcove
• amp-dailymotion
• amp-delight-player
• amp-ima-video
• amp-video
• amp-video-iframe
• amp-youtube

Опять же, видео будет закреплено ТОЛЬКО в том случае, если оно воспроизводится вручную. Это означает:

• Если у видео есть автовоспроизведение, функция не будет активирована, если пользователь сначала не нажмет на видео.
• Если у видео нет автовоспроизведения, функция не сработает, пока пользователь не воспроизведет видео.
• Если видео приостановлено во время прокрутки, оно не будет закреплено.

Требуется скрипт: <script async custom-element = ”amp-video-docking” src = ”https://cdn.ampproject.org/v0/amp-video-docking-0.1.js”> </script>

amp-video-iframe

Amp-video-iframe отображает iframe, содержащий видеопроигрыватель. Этот компонент нельзя использовать в основном для показа рекламы. Можно использовать amp-video-iframe для отображения видео, если часть видео является рекламной. Но вместо этого в рекламных сценариях следует использовать amp-ad.

Пример

Чтобы интеграция видео работала, документ, находящийся внутри вашего фрейма, должен включать небольшую библиотеку:

Поддержка аналитики: частичная

Требуется скрипт: <script async custom-element = ”amp-vimeo” src = ”https://cdn.ampproject.org/v0/amp-vimeo-0.1.js”> </script>

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

Атрибуты: src (обязательно), poster (обязательно), autoplay, common attributes, dock, Implements-media-session, Implements-rotate-to-fullscreen

amp-vimeo

Компонент amp-vimeo позволяет пользователям вставлять видео из Vimeo.

Пример

Поддержка аналитики: частичная

Требуется скрипт: <script async custom-element = ”amp-vimeo” src = ”https://cdn.ampproject.org/v0/amp-vimeo-0.1.js”> </script>

Доступные макеты: заливка, фиксированная, фиксированная высота, гибкий элемент, адаптивный

Атрибуты: автовоспроизведение, data-videoid (обязательно)

amp-viqeo-player

Amp-viqeo-player отображает видеопроигрыватель Viqeo.

Пример

Поддержка аналитики: частичная

Требуется скрипт: <script async custom-element = ”amp-viqeo-player” src = ”https://cdn.ampproject.org/v0/amp-viqeo-player-0.1.js”> </script>

Доступные макеты: заливка, фиксированная, фиксированная высота, гибкий элемент, адаптивный

Атрибуты: автовоспроизведение, data-profileid, data-videoid, ширина и высота.

amp-wistia-player

Компонент amp-wistia-player позволяет пользователям встраивать файлы.

Пример

Поддержка аналитики: частичная

Требуется скрипт: <script async custom-element = ”amp-wistia-player” src = ”https://cdn.ampproject.org/v0/amp-wistia-player-0.1.js”> </script>

Доступные макеты: заливка, фиксированная, фиксированная высота, гибкий элемент, адаптивный

Атрибуты: data-media-hashed-id, общие атрибуты

amp-youtube

Компонент amp-youtube позволяет авторам встраивать видео YouTube.

Пример

Требуется скрипт: <script async custom-element = ”amp-youtube” src = ”https://cdn.ampproject.org/v0/amp-youtube-0.1.js”> </script>

Атрибуты: autoplay, data-videoid, data-live-channelid, data-param- *, dock, учетные данные (необязательно), общие атрибуты.

Заключение

Веб-страницы AMP больше не ограничены, когда дело доходит до отображения мультимедиа. В сочетании с атрибутами, макетами и аналитикой видеокомпоненты AMP позволяют разработчикам отображать богатые визуализации без ущерба для скорости. Готовы ли вы создавать более быстрые мобильные целевые страницы после клика?

Начните (и закончите) сегодня с Instapage AMP.