Linea de Codigo

HTML5 » Tiempo visualizado del vídeo en HTML5

Febrero 6, 2012 por Víctor Cuervo . 10 visitas 1 Comentario  Imprimir

Seguimos con el análisis del manejo de vídeos en HTML5, así como con el manejo del elemento DOM HTMLMediaElement. En este caso vamos a ver como podemos ir viendo el tiempo visualizado del vídeo en HTML5. Es decir, según vaya avanzando la visualización del vídeo, calcular los segundos que hayan transcurrido de la visualización.

Lo primero será poner el vídeo en nuestra página web.

<video id="mivideo" controls>
  <source src="easyhtml5video.com/images/happyfit2.ogv" type="video/ogg"></source>
  Tu navegador no soporta el elemento <code>video</code>
</video>

Cuándo el usuario pulse al play se irán sucediendo una serie de eventos. Uno de los eventos importantes es timeupdate. Dicho evento se envía progresivamente según avanza la visualización del vídeo. Así que tendremos que crear un listener sobre dicho evento en el vídeo.

 var v = document.getElementById("mivideo");
 v.addEventListener("timeupdate",function(ev){
  ...
 },true);

Cuándo se ejecute el método asociado al listener deberemos de acceder al atributo .currentTime del HTMLMediaElement, ya que este atributo es el que contiene el tiempo transcurrido del vídeo. Este tiempo será en segundos.

Lo que nosotros hacemos es volcar el contenido del atributo .currentTime sobre una capa. Este contenido se irá actualizando cada vez que se lance el evento timeupdate en el vídeo.

v.addEventListener("timeupdate",function(ev){
   document.getElementById("tiemposegundos").innerHTML = v.currentTime;
 },true);

Si queremos "dejarlo bonito" podemos convertir el tiempo en segundos en un formato reloj, igual que explicábamos en el artículo Convertir segundos en formato hora con Javascript.

Nosotros hemos metido este código dentro de una función que la hemos llamado hora, la cual recibe una cantidad de segundos, los cuales los devuelve en un formato hh:mm:ss.

 function hora(segundos){
  var d=new Date(segundos*1000);
  // Ajuste de las 23 horas
  var hora = (d.getHours()==0)?23:d.getHours()-1;
  var hora = (hora<9)?"0"+hora:hora;
  var minuto = (d.getMinutes()<9)?"0"+d.getMinutes():d.getMinutes();
  var segundo = (d.getSeconds()<9)?"0"+d.getSeconds():d.getSeconds();
  return hora+":"+minuto+":"+segundo;
 }

Ya solo nos quedará invocar a esta función desde el listener:

v.addEventListener("timeupdate",function(ev){
   document.getElementById("tiemposegundos").innerHTML = v.currentTime;
   document.getElementById("tiempo").innerHTML = hora(v.currentTime);
 },true);