[Développement Web] 1. un lecteur flv

Un lecteur de fichiers flv

mercredi 28 janvier 2009
par olivier ramos

Pour installer le lecteur dans l’un de vos articles, il vous faut suivre la procédure suivante.

Vous téléchargez les fichiers associés au lecteur (l’intégralité de ces fichiers se trouve dans le fichier lecteurflv.zip)

Vous créez un nouvel article vide dans lequel vous copiez le code html contenu dans le fichier lecteurflv.html. Vous validez de façon à ce que l’on attribue un identifiant à l’article ainsi obtenu.

Ensuite vous créez le répertoire associé à cet article en utilisant le bouton prévu à cet effet, et vous y uploadez les fichiers lecteurflv.js et lecteurflv.css, le player flvplayer.swf ainsi que les fichiers flv et images ^*.

Enfin, vous écrirez :
lecteurflv dans le champ portant le nom "Nom du fichier CSS" (sans extension),
lecteurflv dans le champ portant le nom "Nom du script js principal (sans extension)".

Vous n’écrirez rien dans le champ portant le nom "Nom du script PHP principal (sans extension)".

Le code html (copier -coller) :

La création du répertoire et l’upload :

Le remplissage des champs :

Personnalisation possible :

^* Vous pouvez évidemment utiliser d’autres fichiers flv. Il suffira de les nommer fichier1.flv, fichier2.flv, ..., fichier5.flv . De même les premières images seront notées image1.png,..., image5.png.

Le code HTML

dimanche 30 novembre 2008
par olivier ramos

Le code html est ici très simple. Globalement, il s’agit d’un tableau constitué : - d’une première ligne destinée à recevoir le titre de la vidéo choisie, - d’une deuxième ligne avec l’écran, - d’une troisième ligne avec cinq boutons permettant de choisir sa vidéo.

Le corps de la page est le suivant :

</table>
</div>

</div>

Le style

dimanche 30 novembre 2008
par olivier ramos

L'habillage CSS initial est aussi très simple. L'intérêt viendra ensuite de pouvoir changer, grâce au code javascript, l'apparence de certains blocs en fonction des événements. On obtiendra, par exemple, l'effet d'un bouton lumineux qui s'enfonce lorsque l'on clique dessus...

table.lecteurflv{
background:#777777;
width:250px;
padding:10px;
_margin:10px;
overflow:hidden;
text-align:center;
}

#conteneurflv{
border:10px ridge #2a4042;
background:#777777;
width:370px;
margin:30px auto;
}

#ecran{
background:silver;
border:5px outset #777777;
width:320px;
}

.envoi {
border: 5px outset #777777;
width: 26px;
font-weight: bold;
text-align: center;
color:#ffffff;
height: 16px;
font-size: 17px;
margin: 0px auto;
padding:5px;
_padding:0px;
background-color:#0c2628;
cursor:pointer;
}

table td.cellule{
padding:5px;
height:50px;
width: 50px;
overflow:hidden;
}

#titre{
border: 5px inset #777777;
margin:0px auto 15px;
padding-top:5px;
_padding-top:2px;
background:#0c2628;
width:70%;
font-weight:bold;
font-size:15px;
height:30px;
text-align:center;
}

Le code javascript

dimanche 30 novembre 2008
par olivier ramos

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 :

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;
}