EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Tutoriales
  • Blog
✕
            Sin resultados Ver todos los resultados

            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

            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.

            Contenidos del artículo

            • 5.1. Métodos
            • 5.2. Propiedades
            • 5.3. Eventos
              • Indica las opciones verdaderas sobre los métodos que nos permiten controlar el vídeo y el audio con JavaScript.
              • Indica las opciones verdaderas sobre las propiedades que nos permiten controlar el vídeo y el audio con JavaScript.
              • Actividad 5.1
              • Actividad 5.2

            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

            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!

            Ejercicio propuesto

            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

            Navegación de entradas

            ← Inserción de audio en HTML5
            Animaciones basadas en keyframes con la propiedad animation →

            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

            Tutoriales

            • Diseño de Interfaces
            • Usabilidad web
            • Accesibilidad web
            • HTML
            • XML
            • CSS Nivel Inicial
            • CSS Nivel Intermedio
            • CSS Nivel Avanzado
            • Bootstrap 5
            • Ver más tutoriales

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            TUTORIALES

            • Contenidos por bloques
            • Diseño de Interfaces Web
            • Lenguajes de Marcas y Sistemas de Gestión de Información

            SÍGUENOS

                 

            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



              © 2023 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          Sin resultados Ver todos los resultados