AMP

amp-video

Funciona como sustituto de la etiqueta video de HTML5. Solo se utiliza para insertar directamente archivos de vídeo en HTML5.

Secuencia de comandos obligatoria<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
EjemplosEjemplos de AMP By Example:
Diseños admitidosfill, fixed, fixed-height, flex-item, nodisplay y responsive

Comportamiento

El componente amp-video carga el recurso de vídeo que especifica su atributo src mediante la carga diferida, con un ritmo que determina el tiempo de ejecución de AMP. Puedes controlar los componentes amp-video de forma similar a las etiquetas <video> estándar de HTML5.

El componente amp-video acepta hasta cuatro tipos únicos de nodos HTML como elementos secundarios:

  • Etiquetas source: al igual que en la etiqueta <video> de HTML, puedes añadir etiquetas <source> secundarias y, de este modo, especificar diferentes archivos multimedia de origen para reproducirlos.
  • Etiquetas track para habilitar subtítulos en el vídeo. Si la pista está alojada en un origen que no es el documento, debes añadir el atributo crossorigin a la etiqueta <amp-video>.
  • Un marcador de posición para mostrar antes de que comience a reproducirse el vídeo.
  • Un respaldo que funcione si el navegador no admite vídeos de HTML5: uno o cero nodos secundarios inmediatos pueden tener el atributo fallback. Si está presente, este nodo y sus nodos secundarios forman el contenido que se muestra si el navegador del usuario no es compatible con los vídeos de HTML5.

Ejemplo

Mostrar código completo

Analytics

amp-video admite analíticas predeterminadas. Para obtener más información, consulta esta página sobre analíticas de vídeo.

Atributos

srcEs obligatorio si no hay ningún elemento secundario <source> presente. Debe ser HTTPS.
posterImagen del marco que se muestra antes de que se haya iniciado la reproducción del vídeo. De forma predeterminada, se muestra el primer marco.
También puedes añadir una superposición de reproducción por clic. Para obtener más información, consulta la sección Superposición de reproducción por clic que aparece más abajo.
autoplaySi se incluye este atributo y el navegador admite la reproducción automática, el vídeo se reproducirá automáticamente en cuanto esté visible. Hay algunas condiciones que el componente debe cumplir para reproducirse, que se describen en la especificación de vídeo en AMP.
controlsEste atributo es similar al atributo controls de la etiqueta video de HTML5. Si este atributo está presente, el navegador ofrece controles que permiten al usuario controlar la reproducción del vídeo.
controlsListFunciona igual que el atributo controlsList del elemento de vídeo de HTML5. Solo es compatible con algunos navegadores. Para obtener más información, consulta https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList.
dockRequiere la extensión amp-video-docking. Si este atributo está presente y el vídeo se reproduce de forma manual, se minimizará y permanecerá fijado en una esquina o en un elemento cuando el usuario se desplace fuera del área visual del componente de vídeo. Para obtener más información, consulta la documentación de la propia extensión.
loopSi está presente, el vídeo se reproducirá en bucle automáticamente.
crossoriginEs obligatorio si un recurso track está alojado en un origen que no es el documento.
disableremoteplaybackDetermina si el elemento multimedia puede tener una UI de reproducción remota, como Chromecast o AirPlay.
muted (obsoleto)El atributo muted ha quedado obsoleto y ya no tiene ningún efecto. El atributo autoplay controla automáticamente el comportamiento de la función para silenciar.
noaudioAñade una anotación que indica al usuario que el vídeo no tiene audio. De esta forma, se oculta el icono de ecualizador que aparece cuando el vídeo tiene la función de reproducción automática activada.
rotate-to-fullscreenSi el vídeo está visible, se mostrará en pantalla completa cuando el usuario gire su dispositivo y entre en modo de vista horizontal. Para obtener más información, consulta la especificación de vídeo en AMP.
atributos comunesEste elemento incluye atributos comunes que se aplican a los componentes de AMP.

Atributos de la API de Media Session

El componente amp-video implementa la API de Media Session, que permite a los desarrolladores especificar más información sobre el archivo de vídeo. La información adicional del vídeo se muestra en el centro de notificaciones del dispositivo del usuario (junto con los controles de reproducción y pausa).

artworkEspecifica la URL de una imagen PNG, JPG o ICO que funciona como carátula del vídeo. Si `artwork` no está definido, el asistente de la API de Media Session utiliza cualquiera de estas opciones: el campo `image` de la definición `schema.org`, `og:image` o la imagen `favicon` del sitio web.
artistIndica el autor del archivo de vídeo, especificado como una cadena.
albumIndica la colección o el álbum del que se tomó el vídeo, especificado como una cadena.
titleIndica el nombre o título del vídeo, especificado como una cadena. Si no se proporciona, el asistente de la API de Media Session utiliza como respaldo el atributo `aria-label` o el título de la página.

Ejemplo:

En este ejemplo se incluyen los atributos poster y artwork. poster sirve como imagen de marcador de posición antes de que se reproduzca el vídeo, mientras que artwork es la imagen que se muestra en la notificación a través de la API de Media Session.

<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>

Superposición de reproducción por clic

En Internet, es habitual añadir una superposición de reproducción por clic a los reproductores de vídeo como una función de experiencia de usuario. Por ejemplo, puedes hacer que se muestre un icono de reproducción personalizado en el que el usuario puede hacer clic, así como incluir el título del vídeo, imágenes de póster de distintos tamaños, etc. Dado que el componente amp-video admite la acción de AMP play estándar, puedes implementar fácilmente la reproducción por clic.

Para obtener más detalles, consulta el ejemplo de superposición de reproducción por clic para amp-video de AMP By Example.

Validación

Consulta las reglas de amp-video en la especificación de la herramienta de validación de AMP.

¿Necesitas más ayuda?

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