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>
Ejemplos Ejemplos de AMP By Example:
Diseños admitidos fill, 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

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

Analytics

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

Atributos

src Es obligatorio si no hay ningún elemento secundario <source> presente. Debe ser HTTPS.
poster Imagen 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.
autoplay Si 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.
controls Este 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.
controlsList Funciona 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.
dock Requiere 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.
loop Si está presente, el vídeo se reproducirá en bucle automáticamente.
crossorigin Es obligatorio si un recurso track está alojado en un origen que no es el documento.
disableremoteplayback Determina 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.
noaudio Añ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-fullscreen Si 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 comunes Este 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).

artwork Especifica 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.
artist Indica el autor del archivo de vídeo, especificado como una cadena.
album Indica la colección o el álbum del que se tomó el vídeo, especificado como una cadena.
title Indica 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