amp-video
Description
Sustituye la etiqueta `video` de HTML5.
Required Scripts
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
Supported Layouts
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
trackpara habilitar subtítulos en el vídeo. Si la pista está alojada en un origen que no es el documento, debes añadir el atributocrossorigina 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>
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.
¿Ha leído este documento una docena de veces pero realmente no responde todas sus preguntas? Quizás otras personas piensen lo mismo: póngase en contacto con ellas en Stack Overflow.
Ir a Stack Overflow ¿Encontró un error o considera que falta una función?¡El proyecto AMP alienta profundamente su participación y contribuciones! Esperamos que se convierta en un miembro permanente de nuestra comunidad de código abierto, pero también agradecemos las contribuciones esporádicas sobre los temas que le apasionan especialmente.
Ir a GitHub