[HTML5] Trabajando con Audio y Video – Parte II

Posted on Actualizado enn


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!

About these ads

Un comentario en “[HTML5] Trabajando con Audio y Video – Parte II

    Resumen Post 2012 « Todo en ASP.NET escribió:
    12/19/2012 en 22:04

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

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s