Todo lo que los anunciantes digitales deben saber sobre el video y los atributos de AMP

En la actualidad, millones de dominios han publicado miles de millones de páginas de carga instantánea utilizando el marco Accelerated Mobile Pages. Iniciado hace varios años, este proyecto ha ayudado con éxito a mejorar no solo los tiempos de carga de la página web, sino también la experiencia del usuario y, como resultado, el ROI empresarial.

Se logró al reducir el "peso" de las páginas, sus datos de tamaño, con restricciones en JavaScript, reemplazos livianos de lenguajes de codificación populares y almacenamiento en caché en la red de entrega de contenido de Google.

Sin embargo, la mayor crítica del proyecto fue que cambió el compromiso por la velocidad. Si bien eso alguna vez fue cierto, AMP se usó principalmente en sitios de noticias para contenido estático, ya no lo es. Ahora AMP se puede usar para crear sitios web completos, completos con versiones de alta velocidad de elementos de página pesados ​​como videos. Hoy describimos exactamente cómo funcionan estos componentes de video AMP, hasta las definiciones de términos de codificación particulares, capacidades de análisis, diseños y más.

Atributos

Cada componente de video AMP viene con un conjunto de atributos. Algunas se superponen, otras son exclusivas del componente y cada una controla un aspecto de la forma en que se comporta o se muestra el video.

La siguiente es una lista de atributos que encontrará entre los componentes y lo que significan. Esta lista no es completa. Lo mejor es verificar dos veces la página de desarrollador de AMP dedicada de un componente antes de agregarlo a su página.

• src: este elemento es obligatorio si no se especifica <fuente>. Tiene que ser especificado en HTTPS.
• póster: Esto especifica la miniatura de la imagen que se muestra antes de que el espectador haga clic en "reproducir". El primer cuadro se muestra de forma predeterminada. También puede optar por mostrar una superposición, que es hacer clic para reproducir.
• reproducción automática: si el navegador admite la reproducción automática, puede usar este atributo para hacer que un video se reproduzca automáticamente tan pronto como esté a la vista del visitante.
• controles: con este atributo, el navegador ofrecerá controles con los que el usuario puede controlar el reproductor de video.
• Lista de controles: solo compatible con algunos navegadores, la lista de controles permite a los usuarios mostrar controles que se pueden usar para ajustar la reproducción.
• dock: cuando se combina con la extensión amp-video-docking, este atributo minimiza y fija el reproductor de video en una esquina cuando un usuario se desplaza fuera de su área.
• bucle: si se implementa, el video volverá automáticamente al principio cuando llegue al final.
• crossorigin: este elemento es obligatorio si el video está alojado en otro lugar que no sea el documento de origen.
• disabledremoteplayback: Con este elemento, deshabilita la reproducción remota a través de sistemas como Chromecast o AirPlay.
• noaudio: este atributo deshabilita el audio en un video.
• rotar a pantalla completa: si este atributo está habilitado, cuando el usuario gira su dispositivo, el video se ajustará a pantalla completa.

Atributos comunes

Los atributos comunes son los que se aplican a muchos componentes de AMP. En nuestra lista de componentes de video AMP, cuando vea una referencia a "atributos comunes", significa que los siguientes se pueden usar con ellos.

Retroceder

Con un respaldo, el navegador se comunicará con el espectador cuando no admita un elemento o cuando falle la carga. En el siguiente ejemplo, el mensaje de error dice "No se pueden reproducir imágenes animadas en este dispositivo". Se puede usar un respaldo en cualquier elemento de AMP que admita respaldos y se mostrará en lugar del elemento no compatible.

alturas

Si un elemento admite el diseño receptivo, también admite el atributo de altura. El atributo de altura se especifica en función de las expresiones multimedia y se aplica solo a la altura. Se permiten valores porcentuales. Si la altura es del 80 %, como en el ejemplo siguiente, la altura del elemento será el 80 % de su anchura.

Diseño

El atributo de diseño especifica cómo se comporta un elemento. Puede especificar un diseño para un componente agregando el atributo de diseño con uno de los valores de diseño admitidos para el elemento (más información sobre estos más adelante).

Medios de comunicación

La mayoría de los elementos de AMP admiten el atributo multimedia. El valor de los medios es una consulta de medios. Si la consulta no coincide, el elemento no se representa y sus recursos y, potencialmente, sus recursos secundarios no se recuperarán. Si la ventana del navegador cambia de tamaño o de orientación, las consultas de medios se vuelven a evaluar y los elementos se ocultan y muestran en función de los nuevos resultados.

Sin carga

A medida que se cargan, muchos elementos de AMP muestran una animación de carga básica, lo que indica que el elemento se está procesando para su visualización. El atributo noloading controla si se muestra esa animación.

Marcador de posición

El elemento marcado con el atributo de marcador de posición mostrará un marcador de posición para su elemento principal. En el siguiente ejemplo, se muestra una imagen de vista previa como marcador de posición para un gif animado. Este atributo se puede usar en cualquier elemento HTML que sea un elemento secundario de un elemento AMP que admita marcadores de posición.

El marcador de posición se mostrará inmediatamente en el lugar de su padre, de forma predeterminada. Cuando se sirve el recurso, el marcador de posición se oculta y el recurso se muestra en su lugar.

Tallas

Si un elemento AMP es compatible con el diseño receptivo, también es compatible con el atributo de tamaños. Este atributo definido por la consulta de medios en función del tamaño de la ventana del usuario actual.

Anchura y altura

En ciertos diseños, se debe especificar un atributo de ancho y alto que contiene un valor de píxel para algunos componentes de AMP.

Diseño

Según los recursos para desarrolladores de AMP, los elementos <amp-img> y <amp-video> de AMP pueden tener uno de seis diseños, cada uno de los cuales hace que el elemento se comporte de manera diferente:

Sensible

Cuando un elemento se hace responsivo, cambiará de tamaño automáticamente para adaptarse al espacio de un área determinada. El espacio disponible depende del elemento padre.

Sin embargo, no puede simplemente especificar un elemento como sensible. Para asegurarse de que se muestre, debe especificar un ancho y una altura para el elemento contenedor.

Sin pantalla

Con este diseño, su elemento no se mostrará. No ocupará espacio en la pantalla en absoluto. Se puede aplicar a cualquier elemento de AMP y asume que una acción del usuario puede hacer que el elemento sea visible, como pasar el mouse para habilitar una ventana emergente, por ejemplo.

Intrínseco

En este diseño, un elemento consume el espacio disponible, cambiando el tamaño de su altura en función de los atributos de ancho y alto hasta que alcanza el tamaño natural o una restricción de CSS como max-width.
Ese espacio disponible depende del elemento principal.

Artículo flexible

Con este diseño, los elementos de su padre consumirán el espacio restante de ese padre cuando se trata de un contenedor flexible, como "display: flex".

altura fija

Los elementos especificados como de altura fija se ajustarán al espacio disponible, pero su altura permanecerá constante. En este caso, debe estar presente un atributo de altura y no debe estar presente el atributo de ancho (o si lo está, igual a cero).

Fijado

Un elemento fijo tiene una altura y un ancho fijos, y no admite capacidad de respuesta. Para habilitar este diseño, se deben especificar tanto el ancho como el alto.

Llenar

Con este diseño, un elemento llenará todo el alto y el ancho disponibles. Coincidirá con la altura y el ancho de su elemento principal siempre que el contenedor principal especifique "posición: relativa" o "posición: absoluta".

Envase

Al igual que un div HTML, este diseño permite que los hijos de un elemento definan su tamaño. Con un contenedor, el componente solo actúa como un contenedor y no tiene un diseño específico en sí mismo. Sus hijos se renderizan instantáneamente.

Soporte de análisis

Si bien es posible que cada componente de video de AMP no tenga la capacidad de análisis que tienen otros reproductores de video, eso no significa que no pueda rastrear métricas de rendimiento de video muy específicas. Esto es lo que podrá rastrear:

• reproducción automática: indica si el video comenzó como un video de reproducción automática.
• currentTime: especifica el tiempo de reproducción actual (en segundos) en el momento del disparo.
• duración: Especifica la duración total del video (en segundos).
• altura: Especifica la altura del video (en px).
• id: especifica el ID del elemento de vídeo.
• playTotal: Especifica la cantidad total de tiempo que el usuario ha visto el video.
• estado: Indica el estado, que puede ser “reproduciendo_automático”, “reproduciendo_manual” o “en pausa”.
• ancho: especifica el ancho del video (en px).
• playingRangesJson: Representa segmentos de tiempo que el usuario ha visto el video (en formato JSON).

Para algunos componentes de video AMP, podrá detectar todas estas métricas. Para otros, solo tendrá soporte analítico parcial. La compatibilidad parcial significa que se admiten todos excepto currentTime, aduration, playingRangesJson yplayTotal . En la sección de componentes de video de AMP, encontrará niveles de compatibilidad con análisis. Obtenga más información sobre análisis de video AMP aquí.

Componentes de vídeo AMP

amp-video

El componente amp-video es un reemplazo de la etiqueta de video HTML5; solo para ser utilizado para incrustaciones directas de archivos de video HTML5. El componente amp-video carga el recurso de video especificado por su atributo src de forma perezosa, en un momento determinado por el tiempo de ejecución. Puede controlar un componente amp-video de la misma manera que una etiqueta HTML5 <video> estándar.

Ejemplo

Soporte de análisis: completo

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

Diseños disponibles: relleno, fijo, altura fija, elemento flexible, sin pantalla, receptivo

Atributos: src, póster, reproducción automática, controles, lista de controles, base, bucle, origen cruzado, desactivar la reproducción remota, sin audio, rotar a pantalla completa, atributos comunes

amp-3q-reproductor

El componente amp-3q-player permite a los desarrolladores insertar videos de 3Q SDN.

ejemplo

Soporte de análisis: parcial

Script requerido: <script async custom-element=”amp-3q-player” src=”https://cdn.ampproject.org/v0/amp-3q-player-0.1.js”></script>

Diseños disponibles: relleno, fijo, elemento flexible, receptivo

Atributos: reproducción automática (opcional), atributos comunes

amp-brightcove

El componente amp-brightcove incorpora un reproductor de video como se ve en Brightcove's Video Cloud o Brightcove Player.

Ejemplo

Soporte de análisis: completo

Script requerido: <script async custom-element=”amp-brightcove” src=”https://cdn.ampproject.org/v0/amp-brightcove-0.1.js”></script>

Diseños disponibles: relleno, fijo, altura fija, elemento flexible, sin pantalla, receptivo

Atributos: cuenta de datos, reproductor de datos o id de reproductor de datos, incrustación de datos, id de video de datos, id de lista de reproducción de datos, referencia de datos, parámetro de datos

amp-dailymotion

Cuando el componente amp-dailymotion muestra un video del reproductor Dailymotion.

Ejemplo

Soporte de análisis: parcial

Script requerido: <script async custom-element=”amp-dailymotion” src=”https://cdn.ampproject.org/v0/amp-dailymotion-0.1.js”></script>

Diseños disponibles: relleno, fijo, altura fija, elemento flexible, receptivo

Atributos: reproducción automática, data-videoid (requerido), data-mute (opcional), data-endscreen-enable (opcional), data-sharing-enable (opcional), data-start (opcional), data-ui-highlight (opcional) ), data-ui-logo (opcional), data-info (opcional), data-param-* (opcional), dock, atributos comunes

amp-facebook

El componente amp-facebook tiene un poco más de versatilidad que muchas de las etiquetas de esta lista. Además del video, la etiqueta amp-facebook también puede mostrar un comentario o una publicación de Facebook.

Ejemplo

Soporte de análisis: parcial

Script requerido: <script async custom-element=”amp-facebook” src=”https://cdn.ampproject.org/v0/amp-facebook-0.1.js”></script>

Diseños disponibles: relleno, fijo, altura fija, elemento flexible, sin pantalla, receptivo

Atributos: data-href (obligatorio), data-embed-as, data-align-center, data-locale (opcional), atributos comunes

amp-gfycat

El componente amp-gfycat muestra un GIF de gfycat.com.

Ejemplo

Soporte de análisis: parcial

Script requerido: <script async custom-element=”amp-gfycat” src=”https://cdn.ampproject.org/v0/amp-gfycat-0.1.js”></script>

Diseños disponibles: relleno, fijo, altura fija, elemento flexible, receptivo

Atributos: data-gfyid, ancho y alto, noautoplay, atributos comunes

amp-hulu

El componente amp-hulu incorpora un video de Hulu.

Ejemplo

Soporte de análisis: parcial

Script requerido: <script async custom-element=”amp-hulu” src=”https://cdn.ampproject.org/v0/amp-hulu-0.1.js”></script>

Diseños disponibles: relleno, fijo, altura fija, elemento flexible, receptivo

Atributos: data-eid, atributos comunes

amp-ima-video

El amp-ima-video incorpora un reproductor de video para anuncios de video instream. El componente requiere una etiqueta de anuncio, proporcionada en data-tag, que es una URL a una respuesta de anuncio compatible con VAST (para ver ejemplos, consulte Etiquetas de muestra de IMA).

Ejemplo

Soporte de análisis: parcial

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

Diseño disponible: fijo, receptivo

Atributos: etiqueta de datos (obligatorio), fuente de datos, origen cruzado de datos, cartel de datos (opcional), solicitud de anuncio de retraso de datos (opcional), etiqueta de anuncio de datos (opcional), muelle, atributos comunes

amp-izlesene

El componente amp-izlesene permite a los usuarios insertar un video Izlesene.

Ejemplo

Compatibilidad con análisis : parcial

Script requerido: <script async custom-element=”amp-izlesene” src=”https://cdn.ampproject.org/v0/amp-izlesene-0.1.js”></script>

Diseños disponibles: relleno, fijo, altura fija, elemento flexible, receptivo

Atributos: data-videoid (obligatorio), data-param-showrel

amp-kaltura-reproductor

El componente amp-kaltura-player permite a los usuarios insertar un video usando el reproductor Kaltura Video Platform.

Ejemplo

Compatibilidad con análisis : parcial

Script requerido: <script async custom-element=”amp-kaltura-player” src=”https://cdn.ampproject.org/v0/amp-kaltura-player-0.1.js”></script>

Diseños disponibles: relleno, fijo, altura fija, elemento flexible, sin pantalla, receptivo

Atributos: data-partner, data-uiconf, data-entryid, data-param-*, atributos comunes.

amp-ooyala-reproductor

El reproductor amp-ooyala permite a los usuarios insertar un video de Ooyala.

Ejemplo

Soporte de análisis: parcial

Script requerido: <script async custom-element=”amp-ooyala-player” src=”https://cdn.ampproject.org/v0/amp-ooyala-player-0.1.js”></script>

Diseños disponibles: relleno, fijo, elemento flexible, receptivo

Atributos: data-embedcode (obligatorio), data-playerid (obligatorio), data-pcode (obligatorio), data-playerversion (opcional), data-config (opcional), atributos comunes

amp-reach-player

El componente amp-reach-player permite a los usuarios incorporar el Reach Player que se encuentra en la plataforma Beachfront Reach.

Ejemplo

Soporte de análisis: parcial

Script requerido: <script async custom-element=”amp-reach-player” src=”https://cdn.ampproject.org/v0/amp-reach-player-0.1.js”></script>

Diseños disponibles: relleno, fijo, altura fija, elemento flexible, receptivo

Atributos: data-embed-id, atributos comunes

amplificador-trampolín-jugador

amp-springboard-player muestra el reproductor utilizado en Springboard.

Ejemplo

Soporte de análisis: parcial

Script requerido: <script async custom-element=”amp-springboard-player” src=”https://cdn.ampproject.org/v0/amp-springboard-player-0.1.js”></script>

Diseños disponibles: relleno, fijo, elemento flexible, receptivo

Atributos: ID de sitio de fecha (obligatorio), modo de datos (obligatorio), ID de contenido de datos (obligatorio), ID de jugador de datos (obligatorio), dominio de datos (obligatorio), elementos de datos (obligatorio), atributos comunes

amp-video-acoplamiento

Con la extensión amp-video-docking, los videos se pueden minimizar en una esquina de una página o en un elemento posicionado personalizado, pero solo si el video se reproduce manualmente. Cuando el usuario se desplaza fuera del área del componente de video, el video se minimizará y se moverá a la ubicación designada. Si el usuario se desplaza hacia atrás, volverá a su posición original. Además…

• El video se puede acoplar a una esquina predeterminada o a una posición fija personalizada.
• El video puede ser arrastrado y reposicionado por el usuario en una esquina diferente.
• El video se puede mover para descartarlo desde su posición acoplada.
• Se pueden acoplar varios videos en la misma página, pero solo se acoplará y reparará uno a la vez.

De manera predeterminada, el video se minimizará en la esquina superior derecha. Al 30% del ancho de la ventana gráfica, no menos de 180 píxeles de ancho. Si el documento es RTL, el video se acoplará a la esquina superior izquierda. Cuando está en este modo, los usuarios pueden arrastrar el video acoplado para ajustarlo a cualquier esquina.

Esta extensión solo se puede usar con un reproductor de video compatible. Actualmente, los reproductores admitidos son:

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

Nuevamente, el video solo se acoplará SOLAMENTE si se está reproduciendo manualmente. Esto significa:

• Si el video tiene reproducción automática, la función no se activará a menos que el usuario haga clic en el video primero.
• Si el video no tiene reproducción automática, la función no se activará a menos que el usuario reproduzca el video.
• Si el video está en pausa mientras se desplaza, no se acoplará.

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

amp-video-iframe

El amp-video-iframe muestra un iframe que contiene un reproductor de video. Este componente no debe utilizarse con el propósito principal de mostrar publicidad. Está bien usar amp-video-iframe con el fin de mostrar videos, donde parte de los videos son publicidad. Pero los casos de uso de publicidad deberían usar amp-ad en su lugar.

Ejemplo

Para que la integración de video funcione, el documento que se encuentra dentro de su marco debe incluir una pequeña biblioteca:

Soporte de análisis: parcial

Script requerido: <script async custom-element=”amp-vimeo” src=”https://cdn.ampproject.org/v0/amp-vimeo-0.1.js”></script>

Diseños disponibles: relleno, fijo, altura fija, elemento flexible, intrínseco, sin visualización, sensible

Atributos: src (obligatorio), póster (obligatorio), reproducción automática, atributos comunes, base, implementa-media-sesión, implementa-rotar-a-pantalla completa

amp-vimeo

El componente amp-vimeo permite a los usuarios insertar un video de Vimeo.

Ejemplo

Soporte de análisis: parcial

Script requerido: <script async custom-element=”amp-vimeo” src=”https://cdn.ampproject.org/v0/amp-vimeo-0.1.js”></script>

Diseños disponibles: relleno, fijo, altura fija, elemento flexible, receptivo

Atributos: reproducción automática, data-videoid (obligatorio)

amp-viqeo-reproductor

El reproductor amp-viqeo muestra un reproductor de video Viqeo.

Ejemplo

Soporte de análisis: parcial

Script requerido: <script async custom-element=”amp-viqeo-player” src=”https://cdn.ampproject.org/v0/amp-viqeo-player-0.1.js”></script>

Diseños disponibles: relleno, fijo, altura fija, elemento flexible, receptivo

Atributos: reproducción automática, ID de perfil de datos, ID de video de datos, ancho y alto

amp-wistia-reproductor

El componente amp-wistia-player permite a los usuarios integrar.

Ejemplo

Soporte de análisis: parcial

Script requerido: <script async custom-element=”amp-wistia-player” src=”https://cdn.ampproject.org/v0/amp-wistia-player-0.1.js”></script>

Diseños disponibles: relleno, fijo, altura fija, elemento flexible, receptivo

Atributos: data-media-hashed-id, atributos comunes

amp-youtube

El componente amp-youtube permite a los creadores insertar un video de YouTube.

Ejemplo

Script requerido: <script async custom-element=”amp-youtube” src=”https://cdn.ampproject.org/v0/amp-youtube-0.1.js”></script>

Atributos: reproducción automática, data-videoid, data-live-channelid, data-param-*, base, credenciales (opcional), atributos comunes.

Conclusión

Las páginas web de AMP ya no están limitadas cuando se trata de mostrar medios. Combinados con atributos, diseños y análisis, los componentes de video AMP hacen posible que los creadores muestren visualizaciones ricas sin comprometer la velocidad. ¿Está listo para crear páginas de destino post-clic móviles más rápidas?

Comience (y termine) hoy con Instapage AMP.