Problema con setInterval y links html

genericobro · 16 Febrero 2015, 20:47 PM

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>

T. Collins · 16 Febrero 2015, 21:01 PM

Puedes poner el contenido de XML ?

Supongo que esta condición siempre es true:

Código (javascript) [Seleccionar]

if(anotaciones[cent].getElementsByTagName("texto")[0].childNodes[0].nodeValue != document.getElementById('capa').innerHTML)

Porque:

Código (javascript) [Seleccionar]

document.getElementById('capa').innerHTML = img + "<br>" + anotaciones[cent].getElementsByTagName("texto")[0].childNodes[0].nodeValue;

Si capa = img + <br> + texto
capa != texto

genericobro · 17 Febrero 2015, 18:40 PM

Ohhhhh T. Collins ¡¡¡¡¡MIL MILLONES DE GRACIAS!!!!!! esa tontería era.
Estaba cegado mirando otras cosas y no me daba cuenta que el problema era ese if. Bufff te estoy eternamente agradecido.

El XML, por si te quedaste con la curiosidad contenía lo siguiente:

Código [Seleccionar]

<rss>
    <anotacion>
        <texto>Esta es la pri anotación inicial y lleva LINK &lt;a href="http://google.com" target="_blank" rel="nofollow"&gt;http://google.com&lt;/a&gt;</texto>
		<seg> 0 </seg>
		<seg2>2</seg2>
		<img> </img>
    </anotacion>
    <anotacion>
        <texto>Anotasion</texto>
		<seg> 2 </seg>
		<seg2>4</seg2>
		<img><![CDATA[<img src="upload/images/arbol.jpg" width="400" height="110">]]></img>
    </anotacion>
    <anotacion>
        <texto>A partir del segundo 4 esta será la anotación y despues VIENE HUECO hasta segundo 10</texto>
		<seg> 4 </seg>
		<seg2>6</seg2>
		<img> </img>
    </anotacion>
    <anotacion>
        <texto>Desde el segundo 10 hasta el 12 deberia aparecer este texto</texto>
		<seg> 10 </seg>
		<seg2>12</seg2>
		<img> </img>
    </anotacion>
	<anotacion>
        <texto>Esta anotación es la última y dura hasta el segundo 20 &lt;a href="http://google.com" target="_blank" rel="nofollow"&gt;http://google.com&lt;/a&gt;</texto>
		<seg> 12 </seg>
		<seg2>60</seg2>
		<img><![CDATA[<img src="upload/images/gif.gif" width="110" height="110">]]></img>
    </anotacion>
</rss>

Es tan solo un ejemplo tonto.

Muchísimas gracias, si tengo más dudas ya se a qué foro acudir

Un abrazo.

Test Foro de elhacker.net SMF 2.1

Problema con setInterval y links html

genericobro

T. Collins

genericobro