EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            recursos css
            Herramientas útiles y referencias CSS
            02/11/2019
            api de video html5
            Inserción de vídeo en HTML5
            13/11/2019

            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.1. Formatos de archivos de vídeo
            • 1.2. Optimización de archivos de vídeo
            • 1.3. Conversión y edición de vídeos
            • 1.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.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:

            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.

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

            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 aprendizaje

            Los formatos de vídeo habituales para trabajar en la web son:

            ¡Bien! ¡Has fallado!

            Indica las respuestas verdaderas sobre el reproductor VLC:

            Selecciona 3 respuestas

            ¡Bien! ¡Has fallado!

            Ejercicios propuestos

            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

            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



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results