Autor Tema: Problema con setinterval y links html  (Leído 2859 veces)

generico

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 8
    • Ver Perfil
Problema con setinterval y links html
« en: 16 de Febrero 2015, 20:49 »
Muy buenas a todos, ojalá encuentre ayuda por aquí porque llevo una semana con el mismo problema. Seguro que es muy fácil de solucionar pero no doy con la tecla correcta.

A ver si consigo explicarme correctamente: Quiero mostrar un vídeo y en un DIV ir mostrando una serie de anotaciones que tengo en un archivo XML. En dicho XML tengo nodos con el texto, segundo inicial y segundo final.
El código que tengo funciona bien, muestra los datos del XML correctamente, las anotaciones en su sitio, etc... ¡Pero fallan los links!

Para que vayan saltando las anotaciones, ejecuto la función updateValues cada 0,1 segundos (con setInterval) para saber el tiempo actual del video. El problema es que si en una anotación hay un link html, no se puede hacer click sobre él correctamente, es como si se reiniciara cada 0,1 segundos.

Os dejo el código para que lo veais con detenimiento. ¡Necesito ayuda urgente! Mil gracias de antemano.

Código: [Seleccionar]
<html>
 <head>
  <title>Prueba leer xml</title>
  <script type="text/javascript" src="jwplayer/jwplayer.js"></script>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.js"></script>
 </head>
 <body>
 
<script type="text/javascript">




if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","upload/anotaciones/anotacionesoriginales.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;


var cent = 0;
var anotaciones=xmlDoc.getElementsByTagName("anotacion");

function updateValues() {
   
   var vid = document.getElementById("video");
var current = vid.currentTime;

   for(i=0;i<anotaciones.length;i++){ //recorremos todas las anotaciones buscando en qué lugar nos encontramos. Si current está entre seg y seg2 es que hemos encontrado donde estamos, en qué anotación
       if(current>=anotaciones[i].getElementsByTagName("seg")[0].childNodes[0].nodeValue && current<anotaciones[i].getElementsByTagName("seg2")[0].childNodes[0].nodeValue){
   cent=i;
       }
   }
   
    //ahora hacemos un if para que los elementos de la capa SOLO CAMBIEN cuando lo que hay en el xml sea diferente de lo que hay en la capa. Así la capa no se actualiza cada 0,1 segundos
if(anotaciones[cent].getElementsByTagName("texto")[0].childNodes[0].nodeValue != document.getElementById('capa').innerHTML){
    //si estamos entre seg y seg2 vamos a mostrar el comentario, sino no mostraremos nada
if(current>=anotaciones[cent].getElementsByTagName("seg")[0].childNodes[0].nodeValue && current<anotaciones[cent].getElementsByTagName("seg2")[0].childNodes[0].nodeValue){


var img = anotaciones[cent].getElementsByTagName("img")[0].childNodes[0].nodeValue; //sacamos el valor del nodo img. Si lo definimos antes Javascript da error al no encontrar nada.
document.getElementById('capa').innerHTML = img + "<br>" +  anotaciones[cent].getElementsByTagName("texto")[0].childNodes[0].nodeValue;

}else{
document.getElementById('capa').innerHTML = " ";
}

}
}
</script>

<script type="text/javascript">
$(function(){

})
setInterval(function(){
$('#currentTime').html($('#video_container').find('video').get(0).currentTime); //esta linea y la de abajo se pueden quitar. Solo sirven para ver en current time en directo.
$('#totalTime').html($('#video_container').find('video').get(0).duration);   
updateValues();
},100)
</script>

 <div id="capa" style="width:480px; height:135px; background-color: #CAF3F0;">
    ANOTACIONES:<br>
    </div>

<div id="capa2" style="width:480px; height:135px; background-color: #CAF3F0;">
    <a href="http://google.com">link text</a>
    </div>

<div id="video_container">
    <video height=270 width=480 preload="none" controls="" id="video" tabindex="0">
      <source type="video/mp4" src="Upload/videos/videoff.mp4" id="mp4"></source>
      <p>Your user agent does not support the HTML5 Video element.</p>
    </video>
</div>

<div>Current Time : <span  id="currentTime">0 </span></div>
<div>Total time : <span id="totalTime">0</span></div>

 </body>
</html>

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2660
    • Ver Perfil
Re:Problema con setinterval y links html
« Respuesta #1 en: 16 de Febrero 2015, 21:34 »
Hola no he podido ejecutar el código ya que me falta el archivo xml. Cuando he leído la descripción me ha recordado a lo que leí aquí relacionado con problemas de ejecución de funciones de tiempo en forma de bucles aunque no estoy seguro de si está relacionado
Citar
“La idea” es realizar el proceso cada 5 segundos, sin embargo hay un fallo de planteamiento que hace que esto no funcione: lo que ocurre en realidad es que se ejecuta el bucle en todas sus iteraciones de forma prácticamente instantánea, lo que da lugar a que el setTimeout no se ejecute.

Link de donde he tomado la cita:
http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=851:efectos-javascript-visuales-imagen-texto-recursion-settimeout-no-funciona-en-blucles-for-o-while-cu01166e&catid=78:tutorial-basico-programador-web-javascript-desde-&Itemid=206

Salu2

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".