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
            insercion de audio en html5
            Inserción de audio en HTML5
            15/11/2019
            animaciones css3 keyframes
            Animaciones basadas en keyframes con la propiedad animation
            16/11/2019

            Control de reproducción de vídeo y audio con JavaScript

            Control reproducción vídeo audio JavaScript

            Control reproducción vídeo audio JavaScript

            Tabla de contenidos

              • 5.1. Métodos
              • 5.2. Propiedades
              • 5.3. Eventos
            • Ejercicios propuestos

            Como hemos visto en las secciones anteriores, los navegadores trabajan de forma diferente y algunos de los atributos de <audio> y <video> pueden estar o no habilitados por defecto.

            Para poder controlar todos los elementos de nuestro reproductor podemos utilizar JavaScript y aprovechar los nuevos métodos, propiedades y eventos incorporados en HTML5.

            5.1. Métodos

            Para gestionar la reproducción de medios en HTML5 disponemos de una lista de métodos que se pueden llamar desde JavaScript. Los métodos más utilizados son los siguientes:

            • play(): comienza a reproducir el medio desde el inicio, siempre que el medio no haya sido pausado previamente.
            • pause(): pausa la reproducción.
            • load(): carga el archivo del medio. Es útil para cargar el medio anticipadamente.
            • canPlayType(formato): para comprobar si el formato del archivo se soporta por el navegador.

            Por ejemplo, si queremos iniciar la reproducción de un vídeo después de pulsar un botón haremos lo siguiente:

             <video id="video" width="700" height="350">  
                <source src="video.mp4">   
                <source src="video.ogv"> 
            </video> 
            <input type="button" id="boton" value="Reproducir"> 
            
            <script> 
            function iniciar() { 
               var boton=document.getElementById('boton'); 
               boton.addEventListener('click', presionar, false); 
            } 
            function presionar() { 
               var video=document.getElementById('video'); 
               video.play(); 
            } 
            window.addEventListener('load', iniciar, false); 
            </script> 

            5.2. Propiedades

            Con HTML5 también disponemos de algunas propiedades que nos darán información sobre el medio, la mayoría de ellas son de lectura/escritura, por lo tanto, también podemos cambiar su valor. Las siguientes son las propiedades más utilizadas:

            • paused: tiene valor «true» si la reproducción del medio está actualmente pausada o no ha comenzado.
            • ended: tiene valor «true» si la reproducción del medio ha finalizado porque se llegó al final.
            • duration: contendrá la duración del medio en segundos.
            • currentTime: Esta propiedad de lectura/escritura contendrá un valor para informar sobre la posición en segundos en la cual el medio está siendo reproducido, o especifica una nueva posición donde continuar reproduciendo.
            • error: tiene el valor del error ocurrido.
            • muted: para desactivar (true) o activar (false) el sonido del vídeo.
            • volume: para indicar el volumen del vídeo. El valor del volumen debe ser un número entre 0 y 1, por ejemplo si indicamos medio.volume = 0.3 estaríamos configurando el volumen al 30%.

            Por ejemplo, podemos cambiar la función presionar() del ejemplo anterior, para que se inicie la reproducción del vídeo al presionar el botón y se pause la reproducción si se vuelve a presionar. En el siguiente código, cambiamos también el texto del botón indicando la operación a realizar.

            function presionar() { 
               if(!medio.paused && !medio.ended)   { 
                  medio.pause(); 
                  reproducir.value='Reproducir';   
               } 
               else 
               { 
                  medio.play(); 
                  reproducir.value='Pausa';   
               } 
            } 

            5.3. Eventos

            También disponemos de diferentes eventos que nos permiten conocer la situación del medio. Los eventos más importantes son los siguientes:

            • progress: progreso de la descarga del medio. La información estará disponible a través del atributo buffered.
            • canplaythrough: se dispara cuando el medio completo puede ser reproducido sin interrupción.
            • ended: se dispara cuando el reproductor llega al final del medio.
            • pause: se dispara cuando el reproductor es pausado.
            • play: se dispara cuando el medio comienza a ser reproducido.
            • error: se dispara cuando ocurre un error.

            Más eventos JS

            Comprueba tu aprendizaje

            Indica las opciones verdaderas sobre los métodos que nos permiten controlar el vídeo y el audio con JavaScript.

            ¡Bien! ¡Has fallado!

            Indica las opciones verdaderas sobre las propiedades que nos permiten controlar el vídeo y el audio con JavaScript.

            Selecciona 3 respuestas

            ¡Bien! ¡Has fallado!

            Ejercicios propuestos

            Actividad 5.1

            Partiendo del siguiente código en el que están implementadas las funcionalidades de los botones play/pause.

            default

            Implementa las siguientes funcionalidades extra:

            • Al pulsar el botón «reiniciar» si el vídeo está iniciado se reiniciará, es decir, comenzará a reproducirse de nuevo desde el inicio.
            • Al pulsar el botón «retrasar» la reproducción del vídeo saltará 5 segundos hacia atrás.
            • Al pulsar el botón «adelantar» la reproducción del vídeo saltará 5 segundos hacia delante.
            • Al pulsar el botón «silenciar» el sonido del vídeo se desactivará y el texto del botón cambiará a «escuchar». Al volver a pulsar el botón se activará el sonido y se cambiará de nuevo el texto a «silenciar».
            • Al pulsar el botón «menosVolumen» se bajará el volumen del vídeo 0.1 puntos hasta llegar a 0.
            • Al pulsar el botón masVolumen ( ) se subirá el volumen del vídeo 0.1 puntos hasta llegar a 1.

            Incluye el vídeo de Big Buck Bunny (clips.vorwaerts-gmbh.de/big_buck_bunny.mp4) con todas sus funcionalidades implementadas en una nueva entrada del blog de tu proyecto web con el título “Control de vídeo”. Aplica estilos a los botones teniendo en cuenta tu guía de estilo y realiza los ajustes necesarios para que se adapte a los distintos dispositivos.

            Ver ejemplo de código unicode para «play» en HTML y JS.

            Actividad 5.2

            Inserta una nueva entrada en tu blog (título: “Control de audio”). Incluye 4 botones que al pincharlos reproduzcan cada uno un audio diferente. No se debe mostrar el reproductor de audio. Aplica estilos a los botones teniendo en cuenta tu guía de estilo y realiza los ajustes necesarios para que se adapte a los distintos dispositivos.

            default

            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