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
<<   Mai 2019   >>
Lu Ma Me Je Ve Sa Di
29 30 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 1 2



Un lecteur de plusieurs fichiers de type flv.
On donne un exemple de modification du DOM par l’utilisation :
- de la propriété innerHTML d’un élément qui permet de modifier le contenu html de la balise associée,
- de la propriété style qui permet d’en modifier le style.
 
 
 
 
Un lecteur de plusieurs fichiers de type flv.
On donne un exemple de modification du DOM par l’utilisation :
- de la propriété innerHTML d’un élément qui permet de modifier le contenu html de la balise associée,
- de la propriété style qui permet d’en modifier le style.
 
 
 
 
Pour voir le lecteur en plein écran, cliquez sur l’un des deux liens.
 
lire la suite de l'article
 
 
 
 
Un lecteur de fichiers flv
 
 
 
 

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
 
 
 
 

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 :

<div align="center">

<div id="conteneurflv">
<table
class="lecteurflv" >

<tr>
 <td colspan="5">
 <div id="titre">&nbsp;</div>
 </td>
</tr>

<tr>
 <td
colspan="5" >
 <div id="ecran"></div> 
 </td>
</tr>

<tr>
 <td
class="cellule">
 <div
class="envoi" id="envoi1">1</div>
 </td>

 <td class="cellule">
 <div
class="envoi" id="envoi2">2</div>
 </td>

 
<td class="cellule">
 <div
class="envoi" id="envoi3">3</div>
 </td>

<td class="cellule">
 <div
class="envoi" id="envoi4">4</div>
 </td>

<td class="cellule">
 <div
class="envoi" id="envoi5">5</div>
 </td>

</tr>

</table>
</div>

</div>

 
 
 
 
 
Le style
 
 
 
 

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
 
 
 
 

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;
 }
 
 
 
 
 
 
Document(s) joint(s) :
fichier1.flv
Descriptif : aucun.
fichier2.flv
Descriptif : aucun.
fichier4.flv
Descriptif : aucun.
fichier5.flv
Descriptif : aucun.
video.flv
Descriptif : la vidéo par défaut.
fichier3.flv
Descriptif : aucun.
lecteurflv.zip
Descriptif : tous les fichiers relatifs au lecteur flv.
flvplayer.swf en zip
Descriptif : aucun.
Image(s) jointe(s) :
  • Titre : image1.png
  • Taille : 320 par 240
  • Poids : 109.9 ko
  • Format : PNG
Descriptif : aucun.
  • Titre : image2.png
  • Taille : 320 par 240
  • Poids : 18.7 ko
  • Format : PNG
Descriptif : aucun.
  • Titre : image5.png
  • Taille : 320 par 240
  • Poids : 16.7 ko
  • Format : PNG
Descriptif : aucun.
  • Titre : page2.jpg
  • Taille : 320 par 250
  • Poids : 9.5 ko
  • Format : JPG
Descriptif : l’image par défaut
  • Titre : image3.png
  • Taille : 320 par 240
  • Poids : 101 ko
  • Format : PNG
Descriptif : aucun.
  • Titre : image4.png
  • Taille : 320 par 240
  • Poids : 30.1 ko
  • Format : PNG
Descriptif : aucun.