image cliquable

par **zacdis** » 12 juin 2008, 12:21

Parfait, c'est comme y faut...Merci b.jerome, et tous les autres

Voici la page pour ceux que ça intéresse, quelques petits détails à régler, mais l'objectif est atteint, c'est cool ...

http://zenithtopo.free.fr/SITE_TEST/index.html

Il y quelques éléments qui m'ennuient sur la dite page, et sur le site de manière générale. Notamment au niveau de la "dynamique" du gabarit, suivant la résolution utilisée ...Alors pour ceux qui ont un moment, allez y vous gênez pas.
Le site n'est pas "top classe", faites pas attention, mais mon boss est plutôt satisfait, alors ... moi aussi .

A+

par **b.jerome** » 11 juin 2008, 17:05

après reflection je me suis dit que tu aimerais garder l'image 1 visible pendant que la video 2 apparait et ainsi de suite alors voilà comme je pense que j'ai pas été très clair...

tu pourra aisément suivre cette exemple si tu veux ajouter d'autre img/videos...

Code : Tout sélectionner


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Zacdis</title> 
</head> 
<body> 
<table> 
<tr> 
<td><script type="text/javascript"> 
function showDiv(n) { 
   var id; 
   var hide = 0; 
   switch(n) { 
      case 1 : id = "img"; break; 
      case 2 : id = "lecteur"; break; 
      } 
   if ( document.getElementById(id).style.display == "block" ) hide = 1; 
   document.getElementById('img').style.display = "none"; 
   document.getElementById('lecteur').style.display = "none"; 
   if ( hide != 1 ) document.getElementById(id).style.display = "block"; 
   } 
</script> 
<div><center> 
<div class="baliseDiv" id="img"> 
Clickez l'image pour voir la video...<br /><br /> 
<span class="java" onclick="showDiv(2)"><img src="images/media/gifi_gris.jpg" width="300" height="185" /></span></div> 
<div class="baliseDiv" style="display:none;" id="lecteur"> 
<object type="application/x-shockwave-flash" data="mediaplayer.swf" width="300" height="185"> 
  <param name="movie" value="mediaplayer.swf" /> 
  <param name="flashvars" value="file=elne_la_nuit.flv&autostart=true&loop=true"/> 
  <p>Adobe Flash Player (ou un plug-in Flash pour votre navigateur) est requis pour lire la video.</p> 
</object> 
<span class="java" onclick="showDiv(1)"><br /><br /> Cliclez ici pour Fermer La video</center></span> 
</div> 
</div></td> 
<td><script type="text/javascript"> 
function showDiv2(n) { 
   var id; 
   var hide = 0; 
   switch(n) { 
      case 1 : id = "img2"; break; 
      case 2 : id = "lecteur2"; break; 
      } 
   if ( document.getElementById(id).style.display == "block" ) hide = 1; 
   document.getElementById('img2').style.display = "none"; 
   document.getElementById('lecteur2').style.display = "none"; 
   if ( hide != 1 ) document.getElementById(id).style.display = "block"; 
   } 
</script> 
<div><center> 
<div class="baliseDiv" id="img2"> 
Clickez l'image pour voir la video...<br /><br /> 
<span class="java" onclick="showDiv2(2)"><img src="images/media/resize/03.jpg" width="300" height="185" /></span></div> 
<div class="baliseDiv" style="display:none;" id="lecteur2"> 
<object type="application/x-shockwave-flash" data="mediaplayer.swf" width="300" height="185"> 
  <param name="movie" value="mediaplayer.swf" /> 
  <param name="flashvars" value="file=villefranche.flv&autostart=true&loop=true"/> 
  <p>Adobe Flash Player (ou un plug-in Flash pour votre navigateur) est requis pour lire la video.</p> 
</object> 
<span class="java" onclick="showDiv2(1)"><br /><br /> Cliclez ici pour Fermer La video</center></span> 
</div> 
</div></td> 
</tr> 
</table> 
</body> 
</html>

par contre comme je l'ai dit dans un message précédent il serait plus judiciable d'utilise la librairie swfObject qu'a citée Cyrano pour controler le flash. Par ce que le en imaginant que la personne ferme la video avant la fin elle continuera de jouer en étant invisible ce qui peu être ennuyeux si la video comporte du son... de plus la video ne sera plus en auto start si la personne ferme la video et tente de la revoir, il lui faudra appuyer sur le play du lecteur...

par **b.jerome** » 11 juin 2008, 16:41

C'est normal il faut modifier le javascript en conséquence... si tu as plusieurs image/video il faut donner des nouveaux noms aux ID des balises.

exemple

Code : Tout sélectionner

   switch(n) { 
      case 1 : id = "img"; break; 
      case 2 : id = "lecteur"; break; 
      case 3 : id = "img2"; break; 
      case 4 : id = "lecteur2"; break; 
      case 5 : id = "img3"; break; 
      case 6 : id = "lecteur3"; break; 
      }

toi tu as dupliquer la fonction showDiv() ce qui ne sert a rien ou alors faut lui changer de nom. Mais il faudra tout de même changer les id des balises DIV et le numero corespondant dans la balise span. heu je sais pas si c'est très clair ?

par **zacdis** » 11 juin 2008, 15:18

Salut,

Merci d'avoir répondu, le code de b.jerome répond à mes attentes ou celles de mon boss plutot ...

, c'est cool
Mais bon voilà deux choses se profilent :

1°. Voilà à quoi ressemble mon code ( vous marrez pas...)

Code : Tout sélectionner

<center>
<a href="images/media/Controle_lasergram.ppt"> <img src="images/media/Paillat.bmp" Width="200"Height="104" alt="M.N.T. site du Pallat" title="Paillat_RN116" /></a>
<a href="images/media/ass_gifi.flv" type="application/x-shockwave-flash" > <img src="images/media/gifi_gris.jpg" Width="210"Height="105" alt="Réaménagement local commercial" title="Local_commercial" /></a>
<a href="relief.html"> <img src="images/media/resize/cube.PNG" Width="100"Height="105" alt="Remblai" title="Cube_remblai" /></a>
<a href="images/media/elne_la_nuit.flv"> <img src="images/media/resize/03.jpg" Width="122" Height="105" alt="Cité médievale" title="Cité_Villefranche" /></a> 
<a href="images/media/villefranche.flv"> <img src="images/media/resize/53.PNG" Width="140" Height="105" alt="Cité médievale" title="Cité_Villefranche" /></a> 
</center>

donc jusqu`à maintenant j'étais presque arrivé au résultat escompté : les images sont bien présentes, lorsque l'on clique dessus le téléchargement de la vidéo correspondante est lancé, pas de pblme... Malheureusement c'est au moment de la lecture que ca ne va pas, suivant la machine utilisée, la vidéo est lu par le lecteur par défaut du pc en question, et le format (flv) n'est bien bien que rarement supporté.
Donc ma question est : comment proposer de télécharger le pluggin adéquate pour lire le format flv s'il n'ya pas de lecteur adéquate présent sur la machine?
Je crois que la réponse est dans les portions de code postées plus haut, mais je n'ai pas trouvé

2°. J'ai voulu conservé la présentation de ma page web (quelques images cote à cote), et insérer le code de b.jerome pour voir si ca fonctionne bien. J'ai fais le test avec deux img pour deux vidéos différentes, en insérant le code de b.jerome dans un tableau.
Voilà le code :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Zacdis</title>
</head>
<body>
<table>
<tr>
<td><script type="text/javascript">
function showDiv(n) {
   var id;
   var hide = 0;
   switch(n) {
      case 1 : id = "img"; break;
      case 2 : id = "lecteur"; break;
      }
   if ( document.getElementById(id).style.display == "block" ) hide = 1;
   document.getElementById('img').style.display = "none";
   document.getElementById('lecteur').style.display = "none";
   if ( hide != 1 ) document.getElementById(id).style.display = "block";
   }
</script>
<div><center>
<div class="baliseDiv" id="img">
Clickez l'image pour voir la video...<br /><br />
<span class="java" onclick="showDiv(2)"><img src="images/media/gifi_gris.jpg" width="300" height="185" /></span></div> 
<div class="baliseDiv" style="display:none;" id="lecteur">
<object type="application/x-shockwave-flash" data="mediaplayer.swf" width="300" height="185">
  <param name="movie" value="mediaplayer.swf" /> 
  <param name="flashvars" value="file=elne_la_nuit.flv&autostart=true&loop=true"/>
  <p>Adobe Flash Player (ou un plug-in Flash pour votre navigateur) est requis pour lire la video.</p>
</object>
<span class="java" onclick="showDiv(1)"><br /><br /> Cliclez ici pour Fermer La video</center></span>
</div>
</div></td>
<td><script type="text/javascript">
function showDiv(n) {
   var id;
   var hide = 0;
   switch(n) {
      case 1 : id = "img"; break;
      case 2 : id = "lecteur"; break;
      }
   if ( document.getElementById(id).style.display == "block" ) hide = 1;
   document.getElementById('img').style.display = "none";
   document.getElementById('lecteur').style.display = "none";
   if ( hide != 1 ) document.getElementById(id).style.display = "block";
   }
</script>
<div><center>
<div class="baliseDiv" id="img">
Clickez l'image pour voir la video...<br /><br />
<span class="java" onclick="showDiv(2)"><img src="images/media/resize/03.jpg" width="300" height="185" /></span></div> 
<div class="baliseDiv" style="display:none;" id="lecteur">
<object type="application/x-shockwave-flash" data="mediaplayer.swf" width="300" height="185">
  <param name="movie" value="mediaplayer.swf" /> 
  <param name="flashvars" value="file=villefranche.flv&autostart=true&loop=true"/>
  <p>Adobe Flash Player (ou un plug-in Flash pour votre navigateur) est requis pour lire la video.</p>
</object>
<span class="java" onclick="showDiv(1)"><br /><br /> Cliclez ici pour Fermer La video</center></span>
</div>
</div></td>
</tr>
</table>
</body>
</html>

Le soucis c'est que les deux images renvoi à la même vidéo

http://zenithtopo.free.fr/SITE_TEST/img_video.html

Pourquoi?? Qu'est qui ne va pas (encore...)

??

Merci

par **b.jerome** » 10 juin 2008, 20:49

Tout juste, et il existe une librairie JavaScript dédiée à ceci : SWFObject : ça détecte le FlashPlayer installé s'il y en a un et le cas échéant, ça remplace le contenu d'une balise définie par un fichier swf (flash), sinon, le contenu original reste en place. J'utilise moi-même ce système au bureau et c'est fort pratique : on a par exemple deux sortes de fichiers, un gif animé par exemple ou une simple image fixe, et un fichier flash : dans tous les cas, l'internaute aura un contenu.

Très pratique.

Il me semble que ca ne s'applique pas vraiment à son cas...Enfin peut être que j'ai rien compris

mais je crois que lui il souhaite afficher une video après avoir clické sur une image et pas un contenu au cas ou l'internaute n'aurait pas le player flash.

A moins que cette librairie puisse être utiliser pour faire ce qu'il recherche ?

Ceci dit il est vrai que swfobject est une librairie utile et d'ailleur le player jeroenwijering exploite cette librairie.

par **Cyrano** » 10 juin 2008, 19:46

Pour passer d'une image (élément IMG) à la vidéo en Flash (élément OBJECT), je me demande si le mieux ne serait pas de passer par du JavaScript, qui manipulerait le DOM pour remplacer l'élément IMG par l'élément OBJECT.

Tout juste, et il existe une librairie JavaScript dédiée à ceci : SWFObject : ça détecte le FlashPlayer installé s'il y en a un et le cas échéant, ça remplace le contenu d'une balise définie par un fichier swf (flash), sinon, le contenu original reste en place. J'utilise moi-même ce système au bureau et c'est fort pratique : on a par exemple deux sortes de fichiers, un gif animé par exemple ou une simple image fixe, et un fichier flash : dans tous les cas, l'internaute aura un contenu.

Très pratique.

par **b.jerome** » 10 juin 2008, 18:33

Bon dans le désordre.

2°. Quelle est l'utilité d'insérer une flashvars dans la fonction Object?

la flashvars permet d'ajouter des variables qui sont envoyées à ton player flash. En l'occurence ici elle indique de "jouer" tel fichier.

Non, le lecteur que j'utilise n'est pas le jeroenwijering. Je l'ai dl, est-il plus efficace que les autres lecteurs flv??

Plus efficace je ne sais pas, il est plutôt complet, il y a une bonne doc et pas mal d'exemple a suivre etc... Après c'est une affaire de gouts.

1°. Comment insérer une image par dessus le lecteur, de la même taille que celui-ci, qui lorsque l'on clique sur l'image lance la vidéo ?

Voilà un petit truc rapide je ne sais pas si ca peu t'avancer...

http://musibank.com/php/zacdis.html

Faudrait ensuite utiliser l'api JS du player pour fermer automatiquement quand la lecture est fini, ou pour le stopé quand on click sur le lien fermer. Mais bon...faut voir si ca peu t'orienter vers quelque chose.

le code

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Zacdis</title>
</head>
<body>
<script type="text/javascript"> 
function showDiv(n) { 
   var id; 
   var hide = 0; 
   switch(n) { 
      case 1 : id = "img"; break; 
      case 2 : id = "lecteur"; break; 
      } 
   if ( document.getElementById(id).style.display == "block" ) hide = 1; 
   document.getElementById('img').style.display = "none"; 
   document.getElementById('lecteur').style.display = "none"; 
   if ( hide != 1 ) document.getElementById(id).style.display = "block"; 
   } 
</script>
<div><center>
<div class="baliseDiv" id="img">
Clickez l'image pour voir la video...<br /><br />
<span class="java" onclick="showDiv(2)"><img src="img.jpg" width="300" height="185" /></span></div>  
<div class="baliseDiv" style="display:none;" id="lecteur"> 
<object type="application/x-shockwave-flash" data="mediaplayer.swf" width="300" height="185"> 
  <param name="movie" value="mediaplayer.swf" />  
  <param name="flashvars" value="file=video.flv&autostart=true&loop=true"/> 
  <p>Adobe Flash Player (ou un plug-in Flash pour votre navigateur) est requis pour lire la video.</p> 
</object>
<span class="java" onclick="showDiv(1)"><br /><br /> Cliclez ici pour Fermer La video</center></span> 
</div> 
</div>
</body>
</html>

par **Victor BRITO** » 10 juin 2008, 16:43

Pour passer d'une image (élément IMG) à la vidéo en Flash (élément OBJECT), je me demande si le mieux ne serait pas de passer par du JavaScript, qui manipulerait le DOM pour remplacer l'élément IMG par l'élément OBJECT.

par **zacdis** » 10 juin 2008, 09:45

Salut,

Le code

Code : Tout sélectionner

<object type="application/x-shockwave-flash" data="mediaplayer.swf" width="200" height="150">
  <param name="movie" value="mediaplayer.swf" />
  <param name="wmode" value="transparent" />
  <param name="flashvars" value="file=mavideo.flv"/>
  <p>Adobe Flash Player (ou un plug-in Flash pour votre navigateur) est requis pour lire la vidéo.</p>
</object>

fonctionne très bien, mais ce n'est toujours pas ce que je cherche à obtenir

Dans le cas présent, le lecteur est "encastré" dans la page et la vidéo se lance lorsque que l'on clique "play", parfait, je l'ai utilisé sur mon site, ca marche très bien. Cependant

j'aimerais qu'une vidéo se lance lorsque l'on clique sur une image

Et ca je n'ai toujours pas trouvé comment l'intégrer...

1°. Comment insérer une image par dessus le lecteur, de la même taille que celui-ci, qui lorsque l'on clique sur l'image lance la vidéo ?

2°. Quelle est l'utilité d'insérer une flashvars dans la fonction Object?

Non, le lecteur que j'utilise n'est pas le jeroenwijering. Je l'ai dl, est-il plus efficace que les autres lecteurs flv??

Merci

par **b.jerome** » 09 juin 2008, 12:01

Salut,

J'ai bien compris pour l'accessibilité et la fonction "Object". Celà dit pourquoi dans aucun des attributs de la fonction, on ne fait appel à ma vidéo qui se nomme"elne_la_nuit.flv", comment le lecteur sait il quelle vidéo lancer?

Voilà ce que j'obtiens en insérant la portion de code dans ma page

Le lecteur se lance mais rien ne vient, pas de vidéo.
Les fichiers "mediaplayer.swf" et "elne_la_nuit.flv" sont à la racine de mon répertoire, au même niveau que ma page web, quel est mon soucis? Code et/ou agencement des fichiers?

Merci

Tu peux ajouter une flashvars

flashvars="file=mavideo.flv" par exemple mais biensur ca dépend de la maniére dont fonctionne le player que tu as récupérer je supose qu'il y a une doc pour les différentes flashvars utiliser avec ce player.

pour reprendre un exemple de victor BRITO

Code : Tout sélectionner

<object type="application/x-shockwave-flash" data="mediaplayer.swf" width="200" height="150"> 
  <param name="movie" value="mediaplayer.swf" /> 
  <param name="wmode" value="transparent" />
  <param name="flashvars" value="file=mavideo.flv"/>
  <p>Adobe Flash Player (ou un plug-in Flash pour votre navigateur) est requis pour lire la vidéo.</p> 
</object>

C'est le player jeroenwijering ?

par **zacdis** » 09 juin 2008, 08:19

Non je ne l'ai pas crée, il s'agit d'un lecteur que j'ai téléchargé et décompressé.
Je vais essayer de changer de lecteur, c'est peut-être une piste...

par **chrislabricole** » 06 juin 2008, 21:16

Le fichier mediaplayer.swf, c'est toi qui l'a créé ? ou tu as les sources ? pour pouvoir l'éditer...

Sinon je pense qu'il faudrait un autre player...

par **zacdis** » 06 juin 2008, 14:19

Désolé d'insister, mais ... alors qu'est-ce qu'il faut faire?
Tester le site sur une autre machine, ou le mettre en ligne et tester en live??
... le mettre à la poubelle? moi aussi??

Merci

par **Victor BRITO** » 06 juin 2008, 12:15

Là, je pense qu'il s'agit d'un problème lié davantage à ActionScript qu'au HTML.

par **zacdis** » 06 juin 2008, 09:24

Salut,

J'ai bien compris pour l'accessibilité et la fonction "Object". Celà dit pourquoi dans aucun des attributs de la fonction, on ne fait appel à ma vidéo qui se nomme"elne_la_nuit.flv", comment le lecteur sait il quelle vidéo lancer?

Voilà ce que j'obtiens en insérant la portion de code dans ma page

Le lecteur se lance mais rien ne vient, pas de vidéo.
Les fichiers "mediaplayer.swf" et "elne_la_nuit.flv" sont à la racine de mon répertoire, au même niveau que ma page web, quel est mon soucis? Code et/ou agencement des fichiers?

Merci

image cliquable

Répondre

Étendre la vue Revue du sujet : image cliquable