Los formatos de video más utilizados en web son WebM, MP4 y OGG. Con los dos primeros ya quedan cubiertos la mayoría de los navegadores y dispositivos utilizados. OGG se usa menos y
tiene un soporte menor que los dos anteriores.
MP4 (MPEG-4 Parte 14), desarrollado por ISO (International Organization for Standardization), es un formato contenedor multimedia, puede almacenar video, audio
y
datos de subtítulos. En el mismo contenedor se utilizan los códecs de vídeo H.264 y H.265, así como los códecs de audio ACC y MP3. MP4 puede proporcionar una salida en
alta calidad, igual a la del DVD en una relación de compresión de 4 MB por minuto. Es un formato compatible con la mayoría de los reproductores multimedia y el más utilizado en
dispositivos inteligentes.
WebM, desarrollado por Google, es un formato contenedor (con extensión *.webm) para archivos multimedia, es decir, para vídeos y archivos de audio. En el mismo
contenedor se utilizan los códecs de vídeo VP8 y VP9, así como los códecs de audio Vorbis y Opus. WebM está ideado para su uso con HTML5. Los códecs VP8 y VP9 están concebidos para que
en aquellos casos en los que deba llevarse a cabo una compresión considerable, la extracción pueda producirse aún con poca potencia de cálculo. El objetivo de este diseño es permitir
la reproducción de vídeos de Internet en prácticamente cualquier dispositivo (sin importar si se trata de un ordenador de sobremesa, una tablet, un smartphone o un dispositivo
multimedia como una Smart TV). Por lo general el tamaño de los archivos es más pequeño que en MP4.
La resolución es la cantidad de información que contiene un solo fotograma de vídeo, expresada en número de píxeles lógicos en cada dimensión. Por ejemplo, una
resolución de 1920 por 1080 equivale a 1080 líneas horizontales apiladas, cada una de las cuales tiene un píxel lógico de alto y 1920 píxeles lógicos de ancho. Esta resolución se suele
abreviar como 1080p porque técnicamente la anchura puede variar. Las dimensiones de 1080 por 1920 producen una relación de aspecto de 16:9, que es la relación de las pantallas de cine
y los televisores modernos. Esta es la resolución definida como Full HD.
Relación de aspecto: 16:9
Resolución
Dimensiones
2160p
3840 x 2160
1440p
2560 x 1440
1080p
1920 x 1080
720p
1280 x 720
480p
854 x 480
360p
640 x 360
240p
426 x 240
Resoluciones de video recomendadas por Youtube. Fuente: Resolution
Resolución escogida:720p. No es tan pesada como las más altas, pero mantiene una calidad aceptable para visualizar el vídeo en pantallas grandes.
Formato
mp4
4.0
12.0
35.0
25.0
3.2
webm
25.0
79.0
28.0
75.0
--
Primera versión del navegador que soporta totalmente el formato de video.
Fuente: Can I Use
2. Añadir video
Para añadir vídeo a una página web se utiliza la etiqueta <video>. Se puede especificar varias fuentes de video con la etiqueta <source>.
Aunque no es lo recomendable, se puede añadir la fuente de video directamente en el elemento <video>.
<p>Tu navegador no puede reproducir el vídeo. ¡Lo puedes <a href="video/la_voz_del_arbol_booktrailer_720p.mp4">descargar</a>
y ver con tu reproductor de video favorito!<p>
</video>
Consejo: Aunque el navegador lo reconozca igual, es recomendable usar siempre el atributo type. El navegador utiliza esto para determinar si
puede reproducir el archivo de vídeo proporcionado sin tenerlo que cargar. Si no puede, se muestra el texto alternativo indicado entre las etiquetas <video> y
</video>.
No todos los navegadores admiten los mismos formatos de vídeo. El elemento <source> permite especificar varios formatos como alternativa en caso de que el navegador
del usuario no admita uno de ellos. El navegador recorrerá las fuentes de forma secuencial y reproducirá el primer archivo fuente que soporte.
<p>Tu navegador no puede reproducir el vídeo. ¡Lo puedes <a href="video/la_voz_del_arbol_booktrailer_720p.mp4">descargar</a>
y ver con tu reproductor de video favorito!<p>
</video>
Nota: De nuevo, es recomendable usar siempre el atributo type dentro de <source>. Esto garantiza que el navegador descargue
únicamente
el archivo que es capaz de reproducir.
Elemento
video
4.0
12.0
20.0
11.5
4.0
source
90.0
12.0
3.5
75.0
14.1
Primera versión del navegador que soporta totalmente el elemento. Fuente: Can I Use
3. Hacer el video adaptativo
Se pueden variar las dimensiones del video o indicar que no se muestre el video en dispositivos pequeños a través de CSS, pero lo más sencillo y básico es indicar que el
video no rebase el contenedor:
video {
max-width: 100%;
height: auto;
}
Propiedad
max-width
4.0
12.0
2.0
10.0
3.1
height
4.0
12.0
2.0
10.0
3.1
Primera versión del navegador que soporta totalmente la propiedad. Fuente: Can I Use
4. Añadir controles
Si el atributo controls está presente, el navegador ofrecerá controles para permitir al usuario controlar la reproducción de vídeo, incluyendo el volumen, la búsqueda y la
pausa/reanudación de la reproducción.
<video controls ...>
...
</video>
Atributo
controls
4.0
12.0
3.5
11.5
3.1
Primera versión del navegador que soporta totalmente el atributo. Fuente: Can I Use
5. Recomendado: establecer anchura y altura
Es una buena idea incluir siempre los atributos de altura y anchura para que el navegador pueda asignar el ancho de banda necesario sin trabajo adicional. Si no se establecen, la página
podría parpadear y desplazarse mientras se carga el vídeo.
Los valores se asignan en píxeles.
<video width="426" height="240" ...>
...
</video>
Atributo
width/height
79.0
79.0
79.0
66.0
14.0
Primera versión del navegador que soporta totalmente el atributo.
Fuente: Can I Use
6. Opcional: otros atributos
El atributo preload da pistas al navegador sobre cuánta información o contenido precargar.
Valor
Descripción
none
El usuario puede elegir no ver el video, entonces no se precarga nada.
metadata
Los metadatos (duración, dimensiones, pistas de texto) se cargan con la página. En Chrome es el valor por defecto.
auto
Se considera deseable que se descargue el vídeo completo de inmediato. Una cadena vacía produce el mismo resultado.
El valor por defecto del atributo lo define el agente de usuario, aunque se sugiere el estado de metadatos como un compromiso entre la reducción de la carga del servidor y la
provisión de una experiencia óptima para el usuario.
El atributo preload está pensado para proporcionar una pista al agente de usuario sobre lo que el autor cree que conducirá a la mejor experiencia de usuario. El
atributo puede ser ignorado por completo, por ejemplo, basándose en las preferencias explícitas del usuario o en la conectividad disponible.
Importante: El navegador ignorará el atriburo preload si está presente autoplay (ya que si los medios se reproducen, tienen
que almacenarse en el búfer primero, independientemente del valor del atributo de precarga). Sin embargo, incluir ambos no es un error.
El atributo autoplay controla si el navegador descarga y reproduce un vídeo automáticamente. El funcionamiento exacto depende de la plataforma y del navegador.
Razones para no activar la reproducción automática:
Uso de datos excesivo.
Reproducir medios antes de que el usuario lo desee puede acaparar el ancho de banda y la CPU y, por tanto, retrasar la carga de la página.
Los usuarios pueden estar en un contexto donde reproducir audio o video resulte molesto.
El atributo muted se puede utilizar cuando el audio se considera innecesario o que pueda resultar molesto. Es un atributo boleano. Cuando está presente, indica que la
salida
de audio del video debe estar silenciada.
El atributo global (puede utilizarse en cualquier elemento html) tittle permite ofrecer información adicional sobre un elemento. La información suele mostrarse como una
descripción emergente cuando el ratón pasa sobre el elemento.
Atributo
preload
4.0
12.0
4.0
75.0
3.1
autoplay
4.0
12.0
3.5
11.5
3.1
muted
30.0
12.0
11.0
75.0
5.0
title
90.0
12.0
88.0
75.0
14.1
Primera versión del navegador que soporta totalmente el atributo.
Fuente: Can I Use
7. Añadir póster
Añadiendo el atributo poster al elemento de video los visitantes pueden hacerse una idea del contenido en cuanto se cargue el elemento, sin necesidad de descargar el vídeo
o iniciar la reproducción.
Un póster también puede ser un recurso si el src del vídeo está roto o si no se admite ninguno de los formatos de vídeo suministrados. La única desventaja de las imágenes
de póster es la petición de un archivo adicional, que consume algo de ancho de banda y requiere renderización. Es recomendable utilizar un formato comprimido como PNG o WebP.
Atributo
poster
4.0
12.0
3.6
11.5
3.1
Primera versión del navegador que soporta totalmente el atributo.
Fuente: Can I Use
8. Añadir subtítulos
Los subtitulos están directamente relacionados con la accesibilidad.
The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.
–- Tim Berners-Lee
El contenido del video por sí solo no es lo suficientemente accesible para usuarios con discapacidades auditivas o cognitivas, o incluso para usuarios que puedan estar en situaciones
temporalmente desfavorables, por ejemplo, un entorno ruidoso o un lugar de silencio, como una biblioteca. La accesibilidad puede mejorarse para estos usuarios proporcionando pistas de
texto temporizadas, como subtítulos o descripciones, junto al video.
Los vídeos deben proporcionar tanto subtítulos como transcripciones que describan con precisión su contenido. Los subtítulos permiten a las personas con pérdida de audición entender el
contenido de audio de un vídeo mientras se reproduce, mientras que las transcripciones permiten a las personas que necesitan más tiempo poder revisar el contenido de audio a un ritmo y
formato que les resulte cómodo. Además de los diálogos hablados, los subtítulos y transcripciones deben identificar la música y los efectos de sonido que comunican información
importante.
Esto incluye la emoción y el tono.
En algunas jurisdicciones, los subtítulos incluso son obligatorios por ley o por normativa.
Para añadir subtítulos o descripciones para lectores de pantalla a un vídeo web, se añade la etiqueta <track> a una etiqueta <video>. Además de los
subtítulos y las descripciones para el lector de pantalla, las etiquetas también pueden utilizarse para secciones y títulos de capítulos. Y pueden ayudar a los motores de búsqueda a
entender
lo que hay en un vídeo.
Atributo
Valor
Descripción
default
default
Indica que la pista de texto debe habilitarse automáticamente cuando el video empiece a reproducirse.
srclang
language_code
Especifica el idioma de la pista de texto (requerido si kind = "subtitles").
kind
Especifica el tipo de pista de texto. Posibles valores:
subtitles
Superpone al vídeo traducciones escritas de los diálogos y otros contenidos del video (por ejemplo, texto o imágenes). Suele estar pensada para personas oyentes que no
entienden el idioma original utilizado en el audio.
captions
Superpone al vídeo la transcripción del audio. Difieren de los subtítulos en que suelen estar en el mismo idioma que el audio y son más descriptivos, mostrando a veces
pistas no verbales como efectos de sonido o el nombre del orador actual. Están pensados para personas con discapacidades auditivas, que ven el vídeo en un lugar ruidoso o
con el audio silenciado.
descriptions
Superpone una descripción de audio completa de todo el contenido del vídeo, desde el diálogo hasta la acción, los efectos de sonido y las pistas. Destinado a personas
ciegas o que no pueden ver el vídeo.
chapters
Incluye títulos para diferentes porciones (por ejemplo, secciones o episodios) del contenido del vídeo. A veces, los capítulos se muestran como una lista interactiva en la
interfaz del navegador para facilitar la navegación por las diferentes secciones del vídeo.
src
url
Requerido. Especifica la url de la pista de texto.
label
text
Define el título de la pista de texto. En el caso de los subtítulos, debe indicar para qué idioma es el conjunto de subtítulos, por ejemplo, inglés o francés. Las etiquetas
aparecerán en la interfaz de usuario para que los usuarios puedan seleccionar fácilmente el idioma de los subtítulos que desean ver.
La tecnología para lograr esto en la web se conoce como Web Video Text Tracks, o WebVTT. Se trata de un formato (.vtt) para mostrar pistas de texto temporizadas junto con el
vídeo
utilizando el elemento html <track>.
Importante: El archivo .vtt debe llevar como primera palabra en la primera línea la palabra clave 'WEBVTT' (sin comillas y en mayúsculas) sin ningún
espacio a la izquierda para que la
pista funcione en web.
<video controls preload="metadata" width="426" height="240" poster="img/la_voz_del_arbol_screenshot.png" title="La voz del árbol (booktrailer)">
<p>Tu navegador no puede reproducir el vídeo. ¡Lo puedes <a href="video/la_voz_del_arbol_booktrailer_720p.mp4">descargar</a>
y ver con tu reproductor de video favorito!<p>
</video>
La etiqueta <track> es similar al elemento <source> en que ambos tienen un atributo src que apunta al contenido referenciado.
En el caso de la etiqueta <track>, apunta a un archivo WebVTT. El atributo kind determina el tipo de pista, subtítulos en este caso.
Cada pista de idioma irá en un elemento <track> distinto, con el idioma indicado mediante el atributo srclang, con el código de idioma correspondiente
como valor.
El atributo label especifica cómo se identificará una pista de texto concreta en la interfaz.
Por último, el atributo default indica qué pista de idioma es la predeterminada.
Importante: El atributo srclang indica el idioma de la pista de texto. Debe ser un código de idioma BCP 47 válido. Es obligatorio cuando el valor del atributo kind es
subtitles.
Si el elemento <track> tiene un atributo srclang cuyo valor no es una cadena de texto vacía y es un código válido, el idoma de la pista será el valor
del atributo. De lo contrario, el elemento no tendrá pista de idioma.
Elemento/formato
track
23.0
12.0
31.0
12.1
6.0
webvtt
18.0
12.0
31.0
15.0
6.0
Primera versión del navegador que soporta totalmente el elemento o el formato.
Fuente: Can I Use