elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Estamos en la red social de Mastodon


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Problema con setInterval y links html
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Problema con setInterval y links html  (Leído 2,265 veces)
genericobro

Desconectado Desconectado

Mensajes: 8


Ver Perfil
Problema con setInterval y links html
« en: 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:
<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>


En línea

T. Collins

Desconectado Desconectado

Mensajes: 206


Ver Perfil
Re: Problema con setInterval y links html
« Respuesta #1 en: 16 Febrero 2015, 21:01 pm »

Puedes poner el contenido de XML ?

Supongo que esta condición siempre es true:

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

Porque:

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

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


« Última modificación: 16 Febrero 2015, 21:26 pm por T. Collins » En línea

genericobro

Desconectado Desconectado

Mensajes: 8


Ver Perfil
Re: Problema con setInterval y links html
« Respuesta #2 en: 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:
<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.
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Ayuda! links de flash no me van en html
Diseño Gráfico
ryo_23 1 1,846 Último mensaje 1 Junio 2005, 16:45 pm
por aNexos
Alternativa al setinterval o sleep en javascript
Desarrollo Web
WHK 0 3,645 Último mensaje 6 Diciembre 2011, 14:02 pm
por WHK
setInterval tumba conexion
Desarrollo Web
kakashi20 0 1,533 Último mensaje 3 Octubre 2013, 18:07 pm
por kakashi20
SetInterval no esta declarado.
Desarrollo Web
bemone 3 2,466 Último mensaje 18 Marzo 2014, 05:24 am
por engel lex
setInterval
Desarrollo Web
kakashi20 4 2,347 Último mensaje 14 Abril 2014, 23:38 pm
por EFEX
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines