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>
