Inicio Video en la web
Artículo
Cancelar

Video en la web

Artículo en construcción.

Introducción

El vídeo digital es un tipo de sistema de grabación de vídeo que funciona usando una representación digital de la señal de vídeo, en vez de una representación analógica.

toda la información que se transmite a través de Internet es digital, es decir, mediante cadenas de unos y ceros. Hay una serie de características de los archivos de vídeo que es importante tener en cuenta a la hora de realizar una optimización de cara a su uso en la Web. Estas características son:

  1. Duración del clip: tiempo que dura la reproducción de vídeo. Se presenta en el formato HH:MM:SS (Horas:Minutos:Segundos).
  2. Tamaño del clip: es el espacio que ocupa el vídeo en el dispositivo de almacenamiento. Se mide normalmente en MB.
  3. Tamaño de cada fotograma: es el tamaño en píxeles de cada fotograma distinguiendo el ancho y el alto. De este tamaño se desprende otra característica, la Relación de aspecto, que es la comparación del ancho respecto al alto. Los valores habituales para la relación de aspecto son 4:3 (normal) y 16:9 (panorámico).
  4. Número de fotogramas por segundo (fps): es el número de imágenes estáticas que se suceden en un segundo y que al visionarse secuencialmente transmiten la sensación de movimiento.
  5. Códec: algoritmo de compresión/descompresión usado durante la generación del archivo.

Estas características se encuentran señaladas en las propiedades de un archivo de video como se puede ver en la siguiente figura:

alt text Propiedades de un archivo de vídeo

¿Cuántos FPS suele tener una película?

Las películas con imágenes en movimiento suelen tener una tasa de 24 fotogramas por segundo.

Un clip de video de 65,1 MB de 35 segundos es considerado adecuado para la web

No. Es un tamaño enorme.

¿El tamaño de un clip de vídeo suele medirse en MB?

Si.

¿El número de fotogramas total del vídeo es proporcional a su duración si suponemos una tasa de FPS constante?

Si.

¿La duración de un clip de vídeo es proporcional al número de fotogramas?

No.

¿La duración del vídeo influye en el tamaño del archivo?

Si.

Uso de vídeo en la Web

Cuando decidimos incorporar un vídeo a nuestra Web, debemos tener en cuenta que este tipo de archivos almacenan gran cantidad de información por cada segundo.

Cuando incorporamos vídeo a la Web debemos recordar que no todos los usuarios tienen una buena conexión por lo que, si es un vídeo para descarga completa y posterior reproducción, debemos tener en cuenta el peso del archivo, mientras que, en el caso de utilizar una solución de streaming, debemos tener en cuenta la tasa de transferencia o tasa de bit.

Para añadir un vídeo a nuestra web lo podemos hacer de dos formas:

  1. Enlaces ancla/anchor. Descarga directa.
  2. Incrustar un reproductor.

En la web de Referencia de Mozilla tienes el artículo Contenido de audio y video donde puedes aprender cómo se puede añadir elementos de audio y video en una web.

Formatos de vídeo

En este apartado, haremos un resumen de las principales características de los formatos de vídeo más usados en la Web:

  1. Realvideo: es un formato de vídeo patentado por RealNetworks. Se utiliza sobre todo para difusión de vídeo por Internet. Para su visualización es necesario tener instalado el reproductor de RealPlayer. Realvideo se encuentra en el contenedor de RealMedia y su extensión de archivo puede ser .rv, .ram, .rm y .rmvb.
  2. Matroska:formato que permite hacer streaming online con gran calidad. Es un formato contenedor de código libre que permite almacenar un número ilimitado de archivos de vídeo, sonido, imágenes y subtítulos con posibilidad de bitrate variable tanto en audio como en vídeo.
  3. OGG: pensado para hacer streaming online de audio y de vídeo.
  4. MOV: es la extensión de los archivos del formato contenedor QuickTime el cual permite contener archivos de vídeo y audio de diferentes formatos, subtítulos, imágenes, dibujos, efectos e interactividad. Permite hacer streaming online.
  5. MPEG-4: ofrece una alta tasa de compresión con poca pérdida de calidad debido a su sistema de compresión consistente en eliminar aquello que el ser humano no es capaz de distinguir. Vale para hacer streaming y para descarga.
  6. Flashvídeo: Es un formato contenedor usado para entregar el vídeo a través de Internet usando Adobe Flash Player. FLV y FL4 son extensiones de archivo propias de este formato.
  7. WMV (Windows Media Video): es un formato de vídeo diseñado para las aplicaciones de streaming en Internet, como competidor de Realvideo. Normalmente se encuentra formando parte del formato contenedor ASF.
  8. WebM (Web Media): es un formato contenedor pensado para ser utilizado como formato multimedia estándar en el lenguaje HTML5. Emplea el códec VP8 en el vídeo y el Ogg Vorbis en el audio, ambos libres, logrando una excelente calidad con unos bitrates bajos.

Recuerda que para que estos vídeos puedan reproducirse es necesario que tengamos instalados en nuestro equipo los mismos códecs que se emplearon en su codificación. Normalmente, cuando un usuario intenta reproducir un vídeo de una Web, su navegador detectará si falta algún complemento necesario para su reproducción y aparecerá un mensaje en la parte superior de la página solicitándole que lo instale. Cuando esto no ocurre habrá que recurrir a una descarga manual de los códecs necesarios y a su posterior instalación.

¿Qué es un codec?

Un codec es un programa que se encarga de comprimir y descomprimir datos de video o audio utilizando algoritmos matemáticos para reducir su tamaño.

(Voluntario) Si quieres saber más sobre los codecs puedes leer el artículo ¿Qué son Exactamente los Codec y por qué los Necesito Tanto?.

¿Es lo mismo un códec de video que un formato de video?

No son lo mismo aunque la confusión entre ambos términos es muy común debido a que a veces tienen el mismo nombre como ocurre con el Windows Media Video, el MPEG, el Windows Media Audio y el MP3.

Podemos exportar un archivo a formato MOV especificando el MPEG-4 como códec compresor del vídeo y el MP3 como códec compresor del audio.

Recuerda que el usuario tendrá que tener los mismos códecs instalados en sus sistema para poder visualizar el vídeo.

¿30 fotogramas por segundo es la tasa de fotogramas más apropiada para los vídeos de la Web?

No. En la Web basta normalmente con una tasa de fotogramas de 10 a 15 fps e incluso menos en algunos casos.

Conversiones de formatos

Existen multitud de programas que realizan la conversión entre los diferentes formatos de vídeo. Algunos de ellos son:

  1. HandBrake: Conversor de video gratuito y de código abierto.
  2. Freemake Video Converter.
  3. FFmpeg: Herramienta de línea de comandos para conversión y procesamiento de video y audio.
  4. AVS Video Converter: Gratuito.
  5. Herramientas de conversión online.

Con una conversión podemos reducir notoriamente el tamaño de un vídeo. A continuación se muestra un ejemplo real:

NÚMERODESCRIPCIÓNANTESDESPUÉS
1Peso del archivo65,1 MB3,10 MB
2Tamaño del fotograma (Ancho x Alto)640 x 480352 x 288
3Tasa de fotogramas30 fps15 fps
4FormatoAVI3GP

Edición y montaje de vídeos

Los primeros pasos para realizar un vídeo para la Web coinciden con los pasos para realizar cualquier vídeo:

  1. Planificación: Tenemos que disponer de un guión previo de lo que queremos hacer, que dependerá de lo que queramos transmitir. Deberemos filmar las escenas o recurrir a escenas que tengamos ya filmadas. En este paso debemos decidir la duración total del vídeo, ya que de ello dependerá los recortes o añadidos que tengamos que hacer a las secuencias que tengamos filmadas. Debemos saber si vamos a incorporar imágenes para separar las secuencias filmadas, si nos interesa el audio de la grabación o lo vamos a sustituir por otro o si lo vamos a subtitular. Todo es importante.
  2. Edición y montaje: En este paso, emplearemos un software apropiado que nos permita realizar todas las tareas previstas en la planificación.

Recuerda que un vídeo almacena gran cantidad de información y su peso es proporcional a su duración. Si crees que no es necesario evítalo.

Existen diferentes editores de vídeo en la actualidad:

  • Kdenlive: Gratuito y profesional. RECOMENDADO.
  • OpenShot: Gratuito y profesional.
  • Final Cut Pro: Profesional. Solo para dispositivos Apple.
  • Adobe Premiere Pro: Profesional.
  • Sony Vegas: Profesional.
  • DaVinci Resolve: Profesional.
  • AVS Video Editor: Sencillo.
  • iMovie: Sencillo y gratuito. Solo para dispositivos Apple.
  • Filmora: Sencillo.
  • Shotcut: Gratuito.
¿Qué se debe tener en cuenta a la hora de crear un vídeo para la Web?

El peso total del clip de vídeo que dependerá del tamaño y número de fotogramas y de la duración del vídeo.

Bibliografía

Este artículo está licenciado bajo CC BY 4.0 por el autor.

Audio en la web

Arrays en JavaScript