Statistiques| Inscription| Espace privé
Développement Web
Accueil > Dom > un lecteur flv
Le plan Les galeries
Dernière mise à jour :
vendredi 15 mai 2009
Contact
Webmestre
olivier ramos
ParamSPIP
Agenda
<<   Mars 2024   >>
Lu Ma Me Je Ve Sa Di
26 27 28 29 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31



Le code javascript
 
 
 
 

Ce script montre entre autres, la façon dont on peut :

- modifier le code HTML contenu dans un élément en utilisant sa propriété innerHTML,

- modifier le style d'un élément en utilisant sa propriété style.

Par ailleurs, on utilise ici le player de fichiers flv intitulé FlashPlayer et  disponible à l'adresse  http://www.jeroenwijering.com. On l'insère grâce à la balise d'inclusion :

<embed  width="270" height="250" flashvars="&file=firefox.flvℑ=firefox.jpg&autostart=true" allowfullscreen="true" src="flvplayer.swf" ></embed>

où :

- la valeur de l'attribut src doit être le nom du player,

- la valeur de l'attribut flashvars correspond  à une chaîne de caractères dans laquelle vous trouvez le fichier à lire (file), l'image du début (image) et une indication sur le démarrage automatique (autostart).

//************************************************************************************************************************
//                                                                                   Gestionnaire d'événements
//************************************************************************************************************************
 
// Au chargement de la page.  

window.onload=initialisation;
 
function initialisation() {
 setHover();
 lire_flv('video.flv','page2.jpg','false');
 choix=0;
 
 document.getElementById("envoi1").onmouseup=function () { eclairer1('envoi1'); }
 document.getElementById("envoi1").onmousedown=function () { foncer1('envoi1'); }
 document.getElementById("envoi1").onmouseout= function () { retournormal1('envoi1'); }
 document.getElementById("envoi1").onmouseover=function () { choix=1; eclairer1('envoi1'); lire_flv('fichier1.flv','image1.png','false'); }
 document.getElementById("envoi1").onclick=function () {  lire_flv('fichier1.flv','image1.png','true');  }
 
 document.getElementById("envoi2").onmouseup=function () { eclairer1('envoi2'); }
 document.getElementById("envoi2").onmousedown=function () { foncer1('envoi2'); }
 document.getElementById("envoi2").onmouseout= function () { retournormal1('envoi2'); }
 document.getElementById("envoi2").onmouseover=function () {choix=2;  eclairer1('envoi2');lire_flv('fichier2.flv','image2.png','false'); }
 document.getElementById("envoi2").onclick=function () {lire_flv('fichier2.flv','image2.png','true');  }  
   
 document.getElementById("envoi3").onmouseup=function () { eclairer1('envoi3'); }
 document.getElementById("envoi3").onmousedown=function () { foncer1('envoi3'); }
 document.getElementById("envoi3").onmouseout= function () { retournormal1('envoi3'); }
 document.getElementById("envoi3").onmouseover=function () {choix=3; eclairer1('envoi3'); lire_flv('fichier3.flv','image3.png','false'); }
 document.getElementById("envoi3").onclick=function () { lire_flv('fichier3.flv','image3.png','true');  }  
   
 document.getElementById("envoi4").onmouseup=function () { eclairer1('envoi4'); }
 document.getElementById("envoi4").onmousedown=function () { foncer1('envoi4'); }
 document.getElementById("envoi4").onmouseout= function () { retournormal1('envoi4'); }
 document.getElementById("envoi4").onmouseover=function () {choix=4; eclairer1('envoi4'); lire_flv('fichier4.flv','image4.png','false');}
 document.getElementById("envoi4").onclick=function () {  lire_flv('fichier4.flv','image4.png','true');}  
 
 document.getElementById("envoi5").onmouseup=function () { eclairer1('envoi5'); }
 document.getElementById("envoi5").onmousedown=function () { foncer1('envoi5'); }
 document.getElementById("envoi5").onmouseout= function () { retournormal1('envoi5'); }
 document.getElementById("envoi5").onmouseover=function () { choix=5; eclairer1('envoi5');lire_flv('fichier5.flv','image5.png','false'); }
 document.getElementById("envoi5").onclick=function () {  lire_flv('fichier5.flv','image5.png','true');  }  
   
 }
//***********************************************************************
// Les trois fonctions suivantes permettent de gérer l'apparence des boutons lumineux.
//***********************************************************************
 

function foncer1(nom){
    document.getElementById(nom).style.background="#0d555b";    
    document.getElementById(nom).style.border="3px inset #777777";
    document.getElementById(nom).style.height="20px";
    document.getElementById(nom).style.color="silver";
if (navigator.appName!="Microsoft Internet Explorer") {    
    document.getElementById(nom).style.width="30px";
    }    
}  
 
function retournormal1(nom){
    document.getElementById(nom).style.background="#0c2628";                                                                   
    document.getElementById(nom).style.color="#ffffff";
    document.getElementById(nom).style.border="5px outset #777777";
if (navigator.appName!="Microsoft Internet Explorer") {
    document.getElementById(nom).style.height="16px";
    document.getElementById(nom).style.width="26px";
    }
    document.getElementById('titre').style.background="#0c2628";
    document.getElementById('titre').style.color="silver";
if (choix==0){    document.getElementById('titre').innerHTML="";}
if (choix==1){    document.getElementById('titre').innerHTML="Everything...";}
if (choix==2){    document.getElementById('titre').innerHTML="Les navigateurs";}
if (choix==3){    document.getElementById('titre').innerHTML="Alternative";}
if (choix==4){    document.getElementById('titre').innerHTML="Danse du renard";}
if (choix==5){    document.getElementById('titre').innerHTML="Vive le sport";}
}
 
function eclairer1(nom){
    document.getElementById(nom).style.background="#03e903";    
    document.getElementById(nom).style.color="#222222";
    document.getElementById(nom).style.border="5px outset #777777";
if (navigator.appName!="Microsoft Internet Explorer") {
    document.getElementById(nom).style.height="16px";
    document.getElementById(nom).style.width="26px";
    }
if (nom=="envoi1"){    document.getElementById('titre').innerHTML="Everything...";}
if (nom=="envoi2"){    document.getElementById('titre').innerHTML="Les navigateurs";}
if (nom=="envoi3"){    document.getElementById('titre').innerHTML="Alternative";}
if (nom=="envoi4"){    document.getElementById('titre').innerHTML="Danse du renard";}
if (nom=="envoi5"){    document.getElementById('titre').innerHTML="Vive le sport";}
 
 
    document.getElementById('titre').style.color="#222222";
    document.getElementById('titre').style.background="#03e903";        
}  
//********************************************************************************
// La fonction permettant d'insérer le player player.swf dans le bloc d'identifiant "ecran".
//*********************************************************************************
 

function lire_flv(file_name,image,etat){
 
 var line="<embed  width=\"270\" height=\"250\" flashvars=\"&file="+file_name +"&image=plugins/paramspip/fichiers/dir"+idarticle+"/"+image+"&autostart="+etat+"\" allowfullscreen=\"true\" src=\"plugins/paramspip/fichiers/dir"+idarticle+"/flvplayer.swf\" ></embed>"
 document.getElementById("ecran").innerHTML = line;
 }