El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

JavaScript esencial

Eventos multimedia en JavaScript

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Los videos o audios con los que lleguemos a trabajar tienen también sus propios tipos de eventos. Aprende cómo saber en qué momento se pausa, reproduce o detiene la reproducción de contenidos multimedia. Conoce los tipos de eventos y cómo aplicarlos en tus proyectos.
03:10

Transcripción

Si tu proyecto tiene que ver con contenido multimedia, como audio o vídeo, pues también vas a poder interactuar con los eventos que dependan de este tipo de contenidos. En este caso tenemos un vídeo y vamos a hacer la relación hacia JavaScript a través de esta clase llamada'bostonVideo'. Una vez que nosotros tenemos esta relación, tenemos para este ejemplo tres'addEventlisteners'. En el primer'addEventListener', nosotros vamos a agregar el evento'play'. ¿Qué vamos a hacer? Vamos a escuchar el momento en el que le dimos Play a este vídeo. Actualizamos el navegador y pulsamos el botón Play. Una vez que lo hacemos, vemos que dice: "El vídeo se ha iniciado", por tanto ya pudimos escuchar este evento. También nosotros podemos escuchar cuando el evento ha terminado, y para esto necesitaremos trabajar con un evento llamado'ended' para saber cuando ya terminó. Vamos al último'addEventListener'que tenemos, escribimos el nombre del evento, que es'ended', actualizamos nuestro navegador, pulsamos Play y vamos a recorrer un poco el cursor. Una vez que estamos cerca del final, lo soltamos y verificamos cuando ha terminado y se detona el evento que dice: "El evento ha terminado". Con esto tenemos ya dos eventos, pero dejamos uno pendiente, este evento que nosotros vamos a escuchar aquí es un evento llamado 'seeking'. Este evento llamado'seeking' lo que va a hacer es escuchar el momento en el que nosotros estamos moviendo la ubicación de este control de vídeo. Por ejemplo, yo doy un clic y empiezo a moverlo. Vemos como en la Consola sale un mensaje que dice: "Se está buscando en el vídeo" y, de hecho, nosotros podemos reaccionar también a esto y trabajar con los tiempos. Sí, este tipo de objetos tiene algunos métodos y algunas propiedades a través de las cuales podremos acceder dependiendo del evento en donde nosotros estemos trabajando. Para este caso, nosotros vamos a trabajar con el objeto'this' y vamos a traernos el tiempo actual según lo que estemos buscando. Actualizamos nuestro navegador, pulsamos Play y una vez que lo hacemos, movemos, y si te das cuenta viene el texto "Se está buscando en el vídeo" y aparece el segundo, y si nosotros movemos vamos a verificar rápidamente que los datos concuerden. Si tú puedes ver en el contador, inicia en el segundo dos y en la parte de abajo de la Consola dice 2. 06. Conforme vamos avanzando, vamos viendo como los tiempos coinciden. De esta manera, a través de la propiedad'currentTime', yo puedo acceder al tiempo dependiendo de la ubicación que tiene este control en el vídeo. Lo mismo podemos hacer con el audio, porque ambos son contenidos multimedia. Y si el contenido de tu proyecto trabaja mucho con audio y con vídeo, la recomendación es que domines los eventos que están relacionados a este tipo de contenido para que la experiencia de usuario que buscas plasmar en tu sitio sea una experiencia muchísimo más enriquecida y que tu usuario pueda valorarla.

JavaScript esencial

Aprende y conoce JavaScript empezando por entender sus conceptos más básicos y esenciales, pero considerando en todo momento la nueva especificación del lenguaje ES6.

5:26 horas (90 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:12/09/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.