La etiqueta video de HTML5

HTML5

El elemento video en 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">
Mensaje para navegadores no compatibles con este estándar
</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">
Mensaje
  <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.

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.

Más sobre Diseño y desarrollo Web


Acerca de

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Diseño y Programación Web y Mobile. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios digitales. Dicto capacitaciones y consultorías sobre lenguajes y herramientas de desarrollo Web

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*


Cursos y capacitaciones para empresas y profesionales

  • HTML & CSS (maquetado web).
  • CSS3 & Responsive Web Design (diseño web adaptado a móviles y tablets).
  • Flexbox & Grids (técnicas modernas de CSS).
  • LESS & SASS (CSS preprocessors).
  • Responsive E-mail (diseño de emails multidispositivo).
  • Bootstrap (el framework de diseño más utilizado).
  • HTML5 (Nivel inicial y Avanzado + APIs).
  • PhoneGap/Cordova (Aplicaciones para Android e iOS basadas en lenguajes Web).
  • JavaScript (Nivel inicial y avanzado con ECMAScript 6).
  • jQuery (una de las librerías más famosas de JavaScript).
  • Angular (framework para construir aplicaciones Web con JavaScript).
  • PHP & MySQL (programación del lado servidor y bases de datos).

Encontrame en las redes sociales. Contactame.