EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Contacto
  • Blog
Contenido adicional
  • Metodología Scrum

Formatos de archivos de vídeo y conversiones

formatos de archivos de video y optimizacion

formatos de archivos de video y optimizacion

Tabla de contenidos

  • 1. Formatos de archivos de vídeo
  • 2. Optimización de archivos de vídeo
  • 3. Conversión y edición de vídeos
  • 4. Sitios web para la descarga de vídeos
  • Ejercicios propuestos

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 la unidad 2 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. 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).

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:

En el Audio:

  1. El códec de compresión de audio utilizado: MPEG Layer 1, MPEG Layer 2, MP3, etc.
  2. Resolución. Establecer resoluciones más pequeñas: 32-bits, 16-bits, 8-bits, 4-bits, etc.
  3. Tasa de muestreo. Definir valores inferiores: 44100 Hz., 22050 Hz., 11025 Hz, etc.
  4. Velocidad de transmisión (bitrate). Configurar bitrates más bajos: 128 Kbps, 96 Kbps, 64 Kbps, etc.
  5. Calidad estéreo/mono. Reducir la calidad de “stereo” a “mono”.

En el Vídeo:

  1. El códec de compresión de vídeo utilizado.
  2. 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.
  3. Velocidad de transmisión (bitrate). Configurar bitrates más bajos: 1000 Kbps, 768 kbps, 360 Kbps, etc.
  4. 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.
  5. Velocidad de fotogramas. Se puede reducir el número de fotogramas por segundo que mostrará el vídeo: 30, 24, 20, 16, etc.
  6. 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.

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.
Funcionalidad de conversión de formatos en VLC

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

Ejercicios propuestos

Actividad 1.1

Descarga un vídeo desde alguna de las plataformas vistas en el punto 4. 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

Compartir

UD6. Sonido, Vídeo y animaciones

  • 1. Formatos de vídeo y conversiones
  • 2. Inserción de vídeo en HTML5
  • 3. Formatos de audio y optimizaciones
  • 4. Inserción de audio en HTML5
  • 5. Control de vídeo y audio con JavaScript
  • 6. Animaciones con propiedad animation
  • 7. Canvas en HTML5
  • 8. Animaciones en Canvas
  • 9. Referencias y recursos: sonido, vídeos y animaciones

Diseño de Interfaces Web

  • UD1. Planificación de interfaces gráficas
  • UD2. HTML
  • UD3. CSS básico
  • UD4. CSS avanzado
  • UD5. Imágenes, licencias y software de gestión
  • UD6. Sonido, vídeo y animaciones
  • UD7. Plantillas y frameworks de desarrollo
  • UD8. Integración de contenido interactivo
  • UD9. Diseño de webs accesibles
  • UD10. Usabilidad web
  • Metodología Scrum

ENLACES

  • Nosotros
  • Contacto
  • Mapa del sitio
  • Blog

CodePen

codepen

CURSOS

  • Diseño de Interfaces Web

REDES SOCIALES

NUESTRA MISIÓN

Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

Únete y recibe gratis contenido exclusivo



    © 2020 Eniun Diseño Web y Marketing Digital
    Política de privacidad y cookies
    • Metodología Scrum
    Contenido adicional
    • Metodología Scrum
    • Metodología Scrum
    Utilizamos cookies de terceros para personalizar el contenido, los anuncios y con motivos de análisis del tráfico. La navegación por la web implica la aceptación de nuestra Política de Cookies.Estoy de acuerdo