« Volver
in asp.net html5 read.

[HTML5] Trabajando con Audio y Video – Parte II.

En el post anterior (míralo acá) se hizo una introducción a los elementos para manejar audio y video disponibles en HTML5, se revisaron sus propiedades principales y se comentaron algunas pequeñas diferencias entre el audio y el video a nivel de configuración.

Bien, y en este post la idea es ir un poco más allá y poder revisar algunas funcionalidades que se tiene para poder manipular estos elementos mediante JavaScript, así entonces se podrá crear controles personalizados para trabajar con estos elementos.

Entonces algunas de las funciones JavaScript que tenemos disponibles son:

· paused: retorna true si el video/audio esta pausado

· play(): inicia o continua la reproducción del video/audio

· pause(): pausa la reproducción

· volumen: permite establecer el volumen, el rango de valores va desde 0 (sin volumen) hasta 1 (volumen máximo).

· duration: retorna la duración del archivo, este valor esta dado en segundos

· currentSrc: retorna el nombre del archivo que se está reproduciendo.

Adicionalmente otro evento bastante importante es timeupdate, con el cual podemos detectar el tiempo de reproducción actual del media, así podemos ir mostrando el avance de la reproducción.

El siguiente código muestra la implementación de las funciones citadas anteriormente:

1: $(document).on("ready", function(){ 2: var video = document.getElementById("video1"); 3: var play = document.getElementById("btnPlay"); 4: var nombre = document.getElementById("lblVideo"); 5: var duracion = document.getElementById("lblDuracion"); 6: var tiempo = document.getElementById("lblTiempo"); 7: $("#btnPlay, #video1").on("click", function(){ 8: if (video.paused) 9: { 10: $(play).attr("value","stop"); 11: video.play(); 12: $(nombre).text(video.currentSrc); 13: $(duracion).text(video.duration); 14: } 15: else 16: { 17: $(play).attr("value","play"); 18: video.pause(); 19: } 20: }) 21: $("#btnMas").on("click", function(){ 22: video.volume = 1; 23: }) 24: $("#btnMenos").on("click", function(){ 25: video.volume = 0; 26: }) 27: $("#btnMasVolumen").on("click", function(){ 28: var vol = video.volume; 29: video.volume = vol + 0.1; 30: }) 31: $("#btnMenosVolumen").on("click", function(){ 32: var vol = video.volume; 33: video.volume = vol - 0.1; 34: }) 35: $(":input").css("cursor","pointer"); 36: $(video).on("timeupdate", function(){ 37: $(tiempo).text(video.currentTime); 38: }) 39: })

Y el HTML sería:

1: <h1>Video en HTML5h1> 2: <hr> 3: <videoid="video1"width="640px"height="460px"poster="img.jpg"> 4: <sourcesrc="simpsons.mp4"type="video/mp4"/> 5: video> 6: <br> 7: <b>Nombre:b><labelid="lblVideo">label> 8: <br> 9: <b>Duración:b><labelid="lblDuracion">label> 10: <br> 11: <b>Tiempo:b><labelid="lblTiempo">label> 12: <br> 13: <inputtype="button"id="btnPlay"value="Play"> 14: <inputtype="button"id="btnMas"value="mas"> 15: <inputtype="button"id="btnMenos"value="menos"> 16: <inputtype="button"id="btnMasVolumen"value="+"> 17: <inputtype="button"id="btnMenosVolumen"value="-">

Y para ver esto trabajando les dejo el ejemplo para su descarga, en el ejemplo solo se tiene un archivo de tipo mp4, por lo cual lo podrán ver funcionar el ejemplo en Internet Explorer 9 o en Chrome.

Descarga el ejemplo!

comments powered by Disqus