Gracias al avance en la velocidad de la conexión de datos, hoy en día es de lo más común descargar y ver vídeos dentro de cualquier página web. En el curso relacionado con HTML vimos cómo insertar un vídeo incrustado mediante la etiqueta <iframe>, en esta unidad vamos a ver cómo insertar un vídeo mediante la etiqueta <video> de HTML5 y cómo podemos mostrar y modificar sus controles.
Antes de conocer cómo podemos insertar un vídeo en HTML5 vamos a ver los distintos tipos de formatos de vídeo y sus conversiones.
1.1. Formatos de archivos de vídeo
Los vídeos digitales se pueden guardar en formatos diferentes con extensiones específicas. Los formatos de vídeo habituales para trabajar en la web son MP4, OGG y WebM.
- MP4 (ficheros con extensión .mp4 o .mov) ofrece un buen ratio de compresión/calidad. Es impulsado por Apple y Microsoft.
- OGG (ficheros con extensión .ogv) está basado en un estándar libre y abierto. También es un formato de audio. Impulsado por Mozilla, Opera y Firefox.
- WebM (ficheros con extensión .webm) es un formato creado especialmente para la web, también es gratuito e impulsado por los mismos que apoyan el formato OGG (Mozilla, Opera y Firefox).
1.2. Optimización de archivos de vídeo
Para optimizar el peso del archivo de vídeo será necesario editarlo para establecer algunos de los siguientes parámetros:
- El códec de compresión de vídeo utilizado.
- Método de BitRate. Utilizar un bitrate variable VBR puede optimizar la calidad del vídeo y repercutir en el peso final del archivo frente a un bitrate constante CBR.
- Velocidad de transmisión (bitrate). Configurar bitrates más bajos: 1000 Kbps, 768 kbps, 360 Kbps, etc.
- Dimensiones. Cuanto más pequeña sea la altura y anchura en píxeles de los fotogramas de un vídeo, menos tamaño ocupará su archivo.
- Velocidad de fotogramas. Se puede reducir el número de fotogramas por segundo que mostrará el vídeo: 30, 24, 20, 16, etc.
- Fotogramas clave. Durante la compresión también se puede indicar cada cuánto se guardará un fotograma completo (fotograma clave): 24, 48, 96, 128, etc. Cuanto mayor sea esta cadencia más bajo será el peso del archivo resultante.
1.3. Conversión y edición de vídeos
Para reducir la calidad de cualquier vídeo o para convertir su formato no necesitamos hacer uso de programas profesionales como Final Cut Pro o Adobe Premier Pro. Podemos hacer uso de aplicaciones en la nube o de reproductores multimedia que nos ofrecen múltiples funcionalidades.
VLC media player
VLC es un reproductor multimedia libre y de código abierto multiplataforma y un «framework» que reproduce la mayoría de archivos multimedia. Puedes descargar el reproductor desde la página web videolan.org.
Algunas de las funcionalidades que nos ofrece este reproductor son las siguientes:
- Conversión de formatos (vídeo y audio): Menú / Medio / Convertir o en Archivo / Convertir.
- Controles avanzados: Menú / Ver / Controles avanzados.
- Reproducción y guardado de vídeos online como Youtube.
- Ventana / Efectos de vídeo.
1.4. Sitios web para la descarga de vídeos
A continuación se propone un listado de sitios web para la descarga de vídeos gratuitos libres de derechos de autor o con licencias Creative Commons para utilizarlos en proyectos propios.
- Coverr.co
- Pixabay.com
- videvo.net
- es.videezy.com
- lifeofvids.com
- dareful.com
- pexels.com
- Más sitios web para la descarga de vídeos
Comprueba tu apendizaje
Ejercicio propuesto
Actividad 1
Descarga un vídeo desde alguna de las plataformas vistas en el punto 1.4 «Sitios web para la descarga de vídeos. Utiliza VLC Media Player para convertir el vídeo en los distintos formatos habituales en la web (MP4. OGG, WebM).
- Fíjate en el tipo de compresión (Theodora + Vorbis: ogg, H.264 + MP3: mp4, etc.) ya que lo necesitaremos en la siguiente sección.
- Modifica la tasa de bits u otras características con el fin de realizar una conversión de buena calidad pero que ocupe lo mínimo posible.
Ilustraciones de Katerina Limpitsouni: https://dribbble.com/NinaLimpi