Synchroniser une video HTLM5 avec un menu

Bonjour,

je suis a la recherche d'une bonne methode pour synchroniser un élément interactif au seins d'un vidéo.

Je m'explique j'ai un bouton quand je clique dessus un menu s'affiche. Jusque là tout va bien, ensuite ce que je cherche c'est à synchroniser un élement Li à un passage de ma vidéo.

Mon code actuellement

<script language="javascript" type="text/javascript">
function bascule(elem)
   {
   etat=document.getElementById(elem).style.display;
   if(etat=="none"){
   document.getElementById(elem).style.display="block";
   }
   else{
   document.getElementById(elem).style.display="none";
   }
   }
</script>
<script>
<!--
$(document).ready(
	function(){
	
		$('#example_video_1').synchro(
			{
				playerID : 'example_video_1',
				containerID: 'slides',
				slideClass: 'slide',
				callback:changeSlide
			}					 
		);
		
		function changeSlide(){
			console.log("slide n°" + this.slideNumber + " timestamp : " + this.slideTimestamp);
			if( this.slideNumber == 1,2,3,4,5,6){
				$('li class="slide"').show();
			}else{
				$('li class="slide"').hide();
				
			}
			
		}
		
	}
);

</script>

<div id="droite">
	<video id="example_video_1" class="video-js vjs-default-skin" controls width="100%" height="100%" preload="auto">
  <source src="video/bruno1.webm" type="video/webm" media="screen">
</div>
<div><a href="" onclick="bascule('1'); return false;"><div id="savoir"><img src="images/savoirplus.png" width="198" height="52" /></div></a>
<div id='1' style='display:none;'><div id="nav">
<ul>
<li class="slide" data-start="3" data-end="5">
  <a id="lightbox" href="interactivite/overview.html" rel="wijlightbox;width=800;height=600">    	<img src="images/i2.png" width="193" height="98" /></a>
      
<script>
$(function () {

        $("#lightbox").wijlightbox({

                controlsPosition: 'outside',

                textPosition: 'outside', 

                player: 'iframe'

        });

});
</script>

       
        
</li>

<li class="slide2">
           	<img src="images/i1.png" width="193" height="98" />
   </li>
<li class="slide3">
        	<img src="images/i2.png" width="193" height="98" />
        

</li>

<li class="slide4">       	
 	<img src="images/i1.png" width="193" height="98" /></a>
        

</li>
</ul>
</div></div>
<ul>

Modifié par ivanova (29 Oct 2012 - 13:20)