La etiqueta video de HTML5

La etiqueta video de HTML5 llegó para ofrecer una alternativa de reproducción de contenido multimedia directamente en el navegador, sin necesidad de instalar plugins adicionales.

Debo reconocer que esta característica es una de las que más llama la atención cuando dicto capacitaciones a público enfocado en multimedia. Y la ventaja es que es fácil de implementar en su modo básico.

Para utilizarlo, hoy en día basta con incluir la siguiente etiqueta:

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

En el atributo src debemos indicar la ruta y el nombre del archivo que deseamos ofrecer para la reproducción.

El formato de video que mayor compatibilidad presenta en la actualidad es MP4 (con códec H.264). Los formatos WebM y Ogg funcionan en versiones de Chrome y Firefox.

Si deseamos incluir diferentes formatos de video, podemos utilizar la etiqueta <source>, dentro de video, de la siguiente manera:

<video>
  <source src="nombre_archivo_video.mp4" type="video/mp4">
  <source src="nombre_archivo_video.ogg" type="video/ogg">
  <p>Mensaje para navegadores no compatibles</p>
 </video>

También es importante señalar que la etiqueta video soporta subtítulos mediante el elemento track. A continuación veremos un ejemplo de como utilizarlo:

 <video>
  <source src="nombre_archivo_video.mp4" type="video/mp4">
  <source src="nombre_archivo_video.ogg" type="video/ogg">
  <p>Mensaje para navegadores no compatibles</p>
  <track src="subtitulo_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="subtitulo_es.vtt" kind="subtitles" srclang="fr" label="Francés">
</video>

Dentro de los atributos que podemos aplicarle a la etiqueta <video> destacamos los siguientes:

• autoplay: reproducción automática.
• controls: muestra los controles del video.
• height / width: permite establecer alto y ancho del video.
• loop: indica que el video se reproducirá de manera continuada (volverá a comenzar una vez que termine).
• muted: el video inicia sin sonido.
• poster: permite indicar la imagen de vista previa del video.

Compatibilidad y características adicionales

En materia de compatibilidad, la etiqueta funciona a partir de Internet Explorer 9 (y superiores) y en la versiones modernas de Chrome, Firefox, Safari y Microsoft Edge.

Es importante señalar, que existen muchas más características a las que se puede acceder si profundizamos sobre la API de JavaScript vinculada con el Video de HTML5. Mediante esta API (y sumando un poco de CSS) es posible incluso crear nuestro propio reproductor de video con controles configurables y apariencia personalizada.

Para saber más sobre la etiqueta video de HTML5: https://www.w3.org/TR/2011/WD-html5-20110113/video.html.

Para saber más sobre las APIs de HTML5: https://damiandeluca.com.ar/10-apis-de-html5.

Más sobre Diseño y desarrollo Web

Acerca de Damián De Luca

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.