Insertar etiquetas de vídeo con HTML5

Vídeo

Imagen: freepik

Hace un par de semanas, os hablaba sobre el procedimiento para integrar audio con HTML5, en la entrada: Insertar etiquetas de audio con HTML5. Este artículo trata sobre el mismo tema, pero referido al vídeo. El proceso para agregar este elemento multimedia, también es bastante sencillo.

Atributos

El aspecto y el comportamiento del vídeo se regula de acuerdo con varios atributos.

  • SRC: enlaza el fichero a reproducir.
  • TYPE: indica el tipo de vídeo.
  • WIDTH: determina la anchura del reproductor en píxeles.
  • HEIGHT: define la altura, igualmente en píxeles.
  • CONTROLS: incorpora los controles esenciales (play, pausa y volumen).
  • AUTOPLAY: arranca el vídeo, justo al abrir la página en la que se encuentra.
  • PRELOAD: carga parte del archivo, antes de iniciar su reproducción.
  • LOOP: crea una repetición automática.

La estructuración de todos estos componentes es fácil y, por ejemplo, podría quedar así:

<video src="url-fichero.mp4" type="video/mp4" width="670" height="377" controls preload></video>

Formatos

Existen muchos formatos de vídeo diferentes y no todos ellos son compatibles con los navegadores. La red de desarrolladores de Mozilla, nos proporciona información acerca de la adecuación o no, a cada tipo: https://developer.mozilla.org/es/docs/Web/HTML/Formatos_admitidos_de_audio_y_video_en_html5.

Con el fin de que el contenido sea visible para el máximo número de usuarios, debemos emplear el elemento source, mediante el que incluiremos distintos formatos, para que sea el navegador el que elija alguno que reconozca. Además, con el objetivo de ofrecerle datos más detallados sobre cada archivo, especificaremos sus correspondientes códecs. Se hace de la siguiente forma:

<video controls preload>
   <source src="url-fichero.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
   <source src="url-fichero.ogv" type='video/ogg; codecs="theora, vorbis"' />
   <source src="url-fichero.webm" type='video/webm; codecs="vp8, vorbis"' />
   <!-- Si no es soportado ninguno -->
   Tu navegador no es compatible con el vídeo HTML5
</video>

Controles externos

Al igual que para el audio, podemos implementar mandos externos, para manejar la reproducción.

<video src="url-fichero.mp4" controls>
   <button onclick="document.getElementById('demo').play()"> Play </button>
   <button onclick="document.getElementById('demo').pause()"> Pausa </button>
   <button onclick="document.getElementById('demo').volume+=0.1"> Subir volumen </button>
   <button onclick="document.getElementById('demo').volume-=0.1"> Bajar volumen </button>
</video>

Duración

Con el empleo de una almohadilla y el código adecuado, delimitaremos el intervalo de tiempo a reproducir, de muy diversas maneras.

El vídeo comienza a los 30 segundos y termina a los 50:
<video src="url-fichero.mp4 #t=30,50" controls></video>

Empieza desde el principio y finaliza después de una hora y media:
<video src="url-fichero.mp4 #t=,01:30:00" controls></video>

Inicia a los 5 segundos y continúa hasta el final:
<video src="url-fichero.mp4 #t=5" controls></video>

Subtítulos

El atributo track nos da la opción de utilizar esta funcionalidad, que tiene una especial relevancia para vídeos. Por medio de ella, es posible vincular un archivo de texto con subtítulos.

<video src="url-fichero.mp4" controls>
   <track src="subtitulos_es.vtt" kind="subtitles" label="Spanish" srclang="es">
   <track src="subtitulos_en.vtt" kind="subtitles" label="English" srclang="en">
   <track src="subtitulos_fr.vtt" kind="subtitles" label="French" srclang="fr">
</video>