Etiquetas para Vídeos

Vídeos: <video>

   <!-- Ejemplo de uso si únicamente disponemos del recurso de audio en un formato compatible -->
   <video src="https://archive.org/download/NuclearExplosion/NuclearExplosionwww.keepvid.com.mp4" controls loop muted preload="none" poster="https://upload.wikimedia.org/wikipedia/commons/3/35/Redwing_Mohawk_002.jpg" height="240" width="320">Explosión nuclear</video>

   <!-- Ejemplo de uso si disponemos del mismo recurso de audio en varios formatos compatibles -->
   <video controls loop muted preload="none" poster="https://upload.wikimedia.org/wikipedia/commons/3/35/Redwing_Mohawk_002.jpg" height="240" width="320">
     Explosión nuclear
     <source src="https://archive.org/download/NuclearExplosion/NuclearExplosionwww.keepvid.com.mp4" type="video/mp4">
     <source src="https://archive.org/download/NuclearExplosion/NuclearExplosionwww.keepvid.com.ogv" type="video/ogg">
   </video>

Ejemplo de uso de etiqueta "<video>"cdpn.io

Mediante este elemento podremos incrustar un fichero de vídeo en nuestra página web para que pueda ser reproducido a través del propio navegador. Cualquier texto situado entre las etiquetas <video>...</video> se mostrará por parte del navegador en caso de que no se pueda reproducir el elemento multimedia. Resulta por tanto recomendable añadirlo en aras a mejorar la experiencia de usuario sea cual sea su mecanismo de acceso a la web. El elemento <video> dispone de varios atributos que permiten configurar la reproducción del mismo:

Atributo	Descripción	Ejemplo
src	URL del fichero de vídeo: Ruta Absoluta: Origen externo a la propia web Ruta Relativa: Origen interno	<video src="https://archive.org/download/NuclearExplosion/NuclearExplosionwww.keepvid.com.mp4"></video>
controls	Si se añade provee de un interfaz de control de reproducción del vídeo: play, pause, mute,...	<video src="https://archive.org/download/NuclearExplosion/NuclearExplosionwww.keepvid.com.mp4" controls></video>
loop	Si se añade, la reproducción se realizará en bucle sin final	<video src="https://archive.org/download/NuclearExplosion/NuclearExplosionwww.keepvid.com.mp4" controls loop></video>
muted	Si se añade, la reproducción se iniciará en silencio	<video src="https://archive.org/download/NuclearExplosion/NuclearExplosionwww.keepvid.com.mp4" controls loop muted></video>
preload	Indica al navegador si debe descargar el recurso de vídeo durante la carga de la página web: none: no descargar nada metadata: descargar los metadatos del recurso auto: se puede descargar el fichero de vídeo durante el proceso de carga de la página.	<video src="https://archive.org/download/NuclearExplosion/NuclearExplosionwww.keepvid.com.mp4" controls loop muted preload="none"></video>
autoplay	Si se añade, la reproducción se inicia automáticamente.	<video src="https://archive.org/download/NuclearExplosion/NuclearExplosionwww.keepvid.com.mp4" controls loop muted preload="none" autoplay></video>
poster	Especifica el frame o imagen que se va autilizar como portada del vídeo previo paso a su reproducción	<video src="https://archive.org/download/NuclearExplosion/NuclearExplosionwww.keepvid.com.mp4" controls loop muted preload="none" autoplay poster="https://upload.wikimedia.org/wikipedia/commons/3/35/Redwing_Mohawk_002.jpg"></video>
height y width	Especifican la altura y ancho de la pantalla de reproducción del vídeo	<video src="https://archive.org/download/NuclearExplosion/NuclearExplosionwww.keepvid.com.mp4" controls loop muted preload="none" autoplay poster="https://upload.wikimedia.org/wikipedia/commons/3/35/Redwing_Mohawk_002.jpg" height="240" width="320"></video>

Como se deduce del ejemplo expuesto al principio del apartado, existe también la posibilidad de incorporar nuestro recurso de vídeo proporcionando múltiples fuentes en diferentes formatos. La ventaja de dicha implementación es la de que si por cualquier motivo el navegador no puede reproducir el primer formato, lo intentará con el segundo y así sucesivamente. Adicionalmente el navegador podrá seleccionar entre la lista de fuentes de vídeo aquel recurso cuyo codec soporte. Para añadir múltiples fuentes de vídeo deberemos utilizar la etiqueta <source> contenida dentro del elemento <video>...</video>. Dicha etiqueta sirve al mismo propósito que el atributo src ya referido.

El elemento <source> dispone de un par de atributos para indicar la fuente del recurso:

Atributo	Descripción	Ejemplo
src	URL del fichero de vídeo	<source src="https://archive.org/download/NuclearExplosion/NuclearExplosionwww.keepvid.com.mp4">
type	Especifica el tipo de recurso multimedia (MIME). Los principales tipos MIME son: video/mp4: Ficheros MP4 (Ficheros MPEG-4 con códec de vídeo H264 y códec de audio AAC) video/ogg: Ficheros OGV (Ficheros OGG con códec de vídeo Theora y códec de audio Vorbis) video/webm: Ficheros WEBM (Ficheros WebM con códec de vídeo VP8 y códec de audio Vorbis)	<source src="https://archive.org/download/NuclearExplosion/NuclearExplosionwww.keepvid.com.mp4" type="video/mp4">

Puedes consultar todos los tipos MIME de vídeo disponibles en: https://www.iana.org/assignments/media-types/media-types.xhtml#video También puedes consultar los formatos compatibles para los diferentes navegadores en: https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility

Como puedes apreciar hasta el momento el elemento <video> es muy similar al ya referido <audio>, salvo por el hecho de que <video> permite contener un elemento adicional denominado <track>. Mediante este nuevo elemento, se pueden añadir subtítulos para su visualización durante la reproducción. Conozcamos las claves de esta nueva funcionalidad:

• Los subtítulos deben cargarse en formato WebVTT (Web Video Text Tracks).

• Los subtítulos hacen referencia también a toda aquella información textual y descriptiva necesaria para las personas con discapacidad visual y/o auditiva.

• Se admiten múltiples etiquetas <track> para soporte en múltiples idiomas o mejora de la accesibilidad.

• La etiqueta <track> es de tipo singleton y no requiere cierre alguno.

Echa un vistazo a la especificación oficial del formato WebVTT: https://w3c.github.io/webvtt/ y prueba a crear tus propios subtítulos, ¡es más fácil de lo que crees!

Completamos nuestro ejemplo inicial añadiendo algunos subtítulos locales en nuestro servidor web.

   <video controls loop muted preload="none" poster="https://upload.wikimedia.org/wikipedia/commons/3/35/Redwing_Mohawk_002.jpg" height="240" width="320">
     Explosión nuclear
     <source src="https://archive.org/download/NuclearExplosion/NuclearExplosionwww.keepvid.com.mp4" type="video/mp4">
     <source src="https://archive.org/download/NuclearExplosion/NuclearExplosionwww.keepvid.com.ogv" type="video/ogg">
     <track src="subtitols-ca.vtt" kind="subtitles" srclang="ca" label="Català">
     <track src="subtitols-es.vtt" kind="subtitles" srclang="es" label="Español (España)" default>
   </video>

Conozcamos ahora el significado de cada atributo presente en nuestro ejemplo:

Atributo	Descripción	Ejemplo
src	URL del fichero de subtítulos	<track src="subtitols-es.vtt">
kind	Especifica el tipo de subtítulos/textos. chapters: capítulos descriptions: descripción de la escena (para personas con discapacidad visual). metadata: información de metadatos. subtitles: subtítulos como tales. captions: información de efectos sonoros y música (para personas con discapacidad auditiva).	<track src="subtitols-es.vtt" kind="subtitles">
srclang	Especifica el idioma de los subtítulos	<track src="subtitols-es.vtt" kind="subtitles" srclang="es">
label	Etiqueta de la pista de subtítulos (visible para el usuario)	<track src="subtitols-es.vtt" kind="subtitles" srclang="es" label="Español (España)">
default	Indica la pista que debe mostrarse por defecto (de entre las posibles)	<track src="subtitols-es.vtt" kind="subtitles" srclang="es" label="Español (España)" default>