La etiqueta HTML `video`

Descubra los conceptos básicos para trabajar con HTMLvideoetiqueta

losvideoLa etiqueta le permite incrustar contenido de video en sus páginas HTML.

Este elemento puede transmitir video usando una cámara web a través degetUserMedia()oWebRTC, o puede reproducir una fuente de video a la que hace referencia usando elsrcatributo:

<video src="file.mp4" />

Por defecto, el navegador no muestra ningún control para este elemento, solo el video.

Lo que significa que el audio se reproducirá solo si está configurado en reproducción automática (más sobre esto más adelante) y el usuario no puede ver cómo detenerlo, pausarlo, controlar el volumen o saltar en una posición específica en el video.

Para mostrar los controles integrados, puede agregar elcontrolsatributo:

<video src="file.mp4" controls />

Así es como se ve en Chrome:

Video tag appearance

La imagen que se muestra inicialmente es el primer fotograma del video.

Puede mostrar otra imagen, que es una necesidad bastante común, utilizando elposteratributo:

<video src="video.mp4" poster="image.png" controls />

Si no está presente, el navegador mostrará el primer fotograma del video tan pronto como esté disponible.

Puede especificar el tipo MIME del archivo de video usando eltypeatributo. Si no se configura, el navegador intentará determinarlo automáticamente:

<video src="file.mp4" controls type="video/mp4" />

Un archivo de video por defecto no se reproduce automáticamente. Añade elautoplayatributo para reproducir el audio automáticamente:

<video src="file.mp4" controls autoplay />

Algunos navegadores también requierenmutedatributo a la reproducción automática. El video se reproduce automáticamente solo si está silenciado:

<audio src="file.mp3" controls autoplay muted />

losloopEl atributo reinicia la reproducción del video a las 0:00 si está configurado; de lo contrario, si no está presente, el video se detiene al final del archivo:

<video src="file.mp4" controls autoplay loop />

Puede configurar elwidthyheightatributos para establecer el espacio que ocupará el elemento, de modo que el navegador pueda dar cuenta de él y no cambie el diseño cuando finalmente se cargue. Toma un valor numérico, expresado en píxeles.

CORS

El video está sujeto aCORSya menos que lo permita en el lado del servidor, un video no se puede reproducir en origen cruzado.

No pasa nada si pones esta etiqueta en una página web. No hay forma de iniciar el video y no se reproduce de forma autónoma. Para que el video se reproduzca, debe agregar elautoplayatributo:

<video src="video.mp4" autoplay />

Cambiar las propiedades de visualización de video

Puede establecer un ancho y un alto para el área de video, expresados en píxeles, usando elwidthyheightatributos:

<video src="video.mp4" poster="image.png" controls
height="600"
width="800" />

Visualización de contenido sivideono es apoyado

losvideola etiqueta esmuy bien apoyado, hasta IE9, por lo que hoy en día no debería haber necesidad de tener un texto de marcador de posición, pero tenemos esta opción. Simplemente agregue una etiqueta de cierre e inserte texto entre la etiqueta de apertura y cierre:

<video src="video.mp4">Video tag not supported</video>

Agregar múltiples fuentes

Los navegadores pueden implementar un códec de video pero no otro. Tal vez desee utilizar un estándar más nuevo que reduzca el tamaño del archivo a la mitad, pero aún desea admitir navegadores más antiguos.

Lo haces con elsourceetiqueta:

<video controls>
 <source src="video.mp4" type="video/mp4" />
 <source src="video.avi" type="video/avi"/>
</audio>

Puede diseñar controles usando CSS, aunque esto está fuera del alcance de esta introducción.

Precarga del video

Si no configurasautoplay, la especificación dice que los navegadores solo descargarán los metadatos del video (para averiguar la duración, por ejemplo) pero no descargarán el video en sí.

Puede forzar la precarga del video usando

<video src="video.mp4" preload="auto" />

Trabajar con eventos de video

Podemos escuchar eventos en cadavideoelemento usando JavaScript, para crear proyectos e interfaces interesantes. Hay muchos eventos diferentes para jugar.

losplayEl evento se activa cuando comienza la reproducción de video:

document.querySelector('video').addEventListener('play', () => {
  alert('Video is playing!!!')
})

También puede agregar directamente este evento (como los demás) utilizando elon<event>atributo directamente en el elemento HTML:

<video src="video.mp4" controls onplay="playing()" />
const playing = () => {
  alert('Video is playing!!!')
})

Estos son algunos eventos que puede escuchar:

  • playel video comenzó a reproducirse
  • pauseel video se pausó
  • endedreproducción de video completada
  • timeupdateel usuario interactuó con la línea de tiempo de reproducción y avanzó / retrocedió
  • volumechangeel usuario cambió el volumen

Hay muchos más eventos relacionados con la carga del video ypuedes encontrar la lista completa en MDN.

Descarga mi gratisManual HTML


Más tutoriales de HTML: