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
            formatos de archivos de video y optimizacion
            Formatos de archivos de vídeo y conversiones
            13/11/2019
            formatos de audio optimizacion web
            Formatos de archivos de audio y optimizaciones
            14/11/2019

            Inserción de vídeo en HTML5

            api de video html5

            Tabla de contenidos

            • 2.1. Elemento <video> en HTML5
            • 2.2. Tipos MIME
            • Ejercicios propuestos

            En la sección anterior hemos estudiado los distintos formatos de los vídeos. Además, hemos visto algunos bancos de vídeos gratuitos y hemos convertido un vídeo en los distintos formatos habituales en la web: MP4, OGG y WebM.

            En esta sección vamos a estudiar con detalle la inserción de vídeo en una página web, sin utilizar complementos ni reproductores externos. Para ello vamos a utilizar la etiqueta de HTML5 <video>.

            2.1. Elemento <video> en HTML5

            El elemento <video> dispone de varios atributos que nos permiten establecer sus diferentes valores de comportamiento.

            • Width y height, definen las dimensiones del reproductor de vídeo.
            • Src, indica la fuente del vídeo. Este atributo puede ser reemplazado por el elemento <source> y su propio atributo src para declarar varias fuentes con diferentes formatos. En el siguiente ejemplo el navegador leerá la etiqueta <source> y decidirá qué archivo reproducir de acuerdo a los formatos que soporte.
            <video id="medio" width="700" height="350" controls>
                 <source src="video.mp4">
                 <source src="video.ogg">
                 Tu navegador no soporta vídeo
            </video>
            • Controls, muestra los controles de vídeo que nos ofrece el navegador. Cuando se incluye el atributo el navegador activará su propia interface de control del vídeo. De esta forma el usuario podrá reproducir el vídeo, pausarlo, etc.
            • Autoplay, al incluir este atributo, el navegador comienza a reproducir el vídeo automáticamente. Revisa que el navegador no esté bloqueando la reproducción automática, por defecto Firefox bloquea la reproducción.
            • Loop, al incluir este atributo, el navegador reproduce nuevamente el vídeo cuando llega a su final.
            • Poster, provee una imagen que será mostrada mientras el usuario espera a que cargue el vídeo.
            • Preload, puede recibir tres valores:
              • none: el vídeo no se cachea.
              • metadata: recomienda al navegador que capture información acerca de la fuente (dimensión, duración, etc.).
              • auto: descarga del archivo lo más pronto posible.
            <video id="reproductor" width="700" height="350" preload="none" controls loop poster="portada.jpg">
                <source src="video.mp4">
                <source src="video.ogv">
                Tu navegador no soporta vídeo
            </video> 

            2.2. Tipos MIME

            Conviene especificar el contenido de un vídeo para que el navegador sepa identificar el tipo de formatos de nuestros archivos y sepa cómo manejarlos. En el siguiente ejemplo el navegador elegirá solamente un vídeo. Al especificar el atributo type (no obligatorio), permitimos que el navegador conozca el tipo MIME (del inglés Multi-Purpose Internet Mail Extensions) y los tipos de codecs que debe utilizar antes de descargar el vídeo. Si no indicamos dicho atributo, el navegador intentará averiguar, mediante prueba y error, cuál es el tipo adecuado.

             <video> 
                  <source src="video.webm" type="video/webm"> 
                   <source src="video.ogg" type="video/ogg">  
                   <source src="video.mp4" type="video/mp4">
                   <img src="imagen.png" alt="Video no soportado">   
                   Tu navegador no soporta vídeo   
            </video> 

            Comprueba tu aprendizaje

            Indica los atributos que nos permiten establecer valores sobre el elemento video.

            Selecciona 4 respuestas

            ¡Bien! ¡Has fallado!

            Es obligatorio especificar el atributo type dentro de la etiqueta source:

            ¡Bien! ¡Has fallado!

            Ejercicios propuestos

            Actividad 2

            Crea una nueva entrada en tu blog en la que debes incluir, mediante la etiqueta <video>, el vídeo trabajado en la sección anterior.

            • Incluye el vídeo en los formatos webm, ogg y mp4.
            • Indica los valores correspondientes en el atributo type.
            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