[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 HTML5</h1>
   2:  <hr>
   3:  <video  id="video1" width="640px" height="460px" poster="img.jpg">
   4:      <source src="simpsons.mp4" type="video/mp4" />
   5:  </video>
   6:  <br>
   7:  <b>Nombre:</b><label id="lblVideo"></label>
   8:  <br>
   9:  <b>Duración:</b><label id="lblDuracion"></label>
  10:  <br>
  11:  <b>Tiempo:</b><label id="lblTiempo"></label>
  12:  <br>
  13:  <input type="button" id="btnPlay" value="Play">
  14:  <input type="button" id="btnMas" value="mas">
  15:  <input type="button" id="btnMenos" value="menos">
  16:  <input type="button" id="btnMasVolumen" value="+">
  17:  <input type="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!

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *