image cliquable

05 juin 2008, 10:24

Bonjour,

J'ai un petit soucis, j'aimerais qu'une vidéo se lance lorsque l'on clique sur une image. Jusque là tout va bien...
J'ai tout d'abord utilisé ceci :

Code : Tout sélectionner

<a href="images/media/elne_la_nuit.flv" > <img src="images/media/resize/elne2.PNG" alt="Maternité_Archi" title="Réaménagement_Architecture" /></a>

Mais rien n'y fait, le naviguateur me propose de télécharger le fichier et de l'ouvrir avec flash...pour finalement ne rien afficher.
Ensuite j'ai tenté ceci:

Code : Tout sélectionner

<a href="images/media/elne_la_nuit.flv" object type="application/x-shockwave-flash" data="mediaplayer.swf" width="200" height="150" 
param name="elne_la_nuit.flv" value="mediaplayer.swf"> <img src="images/media/resize/elne2.PNG" alt="Maternité_Archi" title="Réaménagement_Architecture" /></a>

Là, le naviguateur ouvre une autre page ou rien ne s'affiche. Je souhaiterais que la vidéo se lance "par dessus" la page initiale, et que la boite de dialogue disparaisse lorsque l'on clique dessus afin de toujours rester sur la même page.
Mon code est merdique j'en suis sur, mais où??

Plz help me.

05 juin 2008, 11:23

Le mieux est d'intégrer la vidéo dans la page Web, vu qu'il s'agit d'un Flash, comme suit :

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" />
  <!-- L'image servira de contenu de substitution si le Flash ne peut être lu
  et peut être cliquable pour servir de lien vers un autre format de la vidéo -->
  <p><a href="images/media/elne_la_nuit.mpeg" type="video/mpeg"><img src="images/media/resize/elne2.PNG" alt="Maternité_Archi" title="Réaménagement_Architecture" /></a></p>
</object>

De plus, tu ne peux qu'appeler un fichier SWF, dont le script appellera la vidéo codée au format FLV.

05 juin 2008, 11:48

Désolé si ma question est un peu naze, mais qu'est que vient faire du mpeg dans le code je ne comprend pas bien...

J'ai inséré le code dans la page, la vidéo ne démarre pas et l'image ne s'affiche pas. Qu'est qui cloche?

De plus,

tu ne peux qu'appeler un fichier SWF, dont le script appellera la vidéo codée au format FLV.

Peux tu préciser au niveau du code? Qui appele qui en gros? Je saisi pas bien

05 juin 2008, 15:28

Désolé si ma question est un peu naze, mais qu'est que vient faire du mpeg dans le code je ne comprend pas bien...

Si l'utilisateur n'a pas de lecteur Flash ou utilise un navigateur qui n'a aucun plug-in Flash, il pourra, dans l'exemple de code que j'ai donné, lire le format MPEG de la vidéo (en revanche, si l'utilisateur peut lire le Flash sur son poste, il ne verra que le Flash). En fait, c'est une façon de dire qu'il ne faut pas oublier l'accessibilité.

Autrement dit, avec l'exemple de code suivant :

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" /> 
  <img src="images/media/resize/elne2.PNG" alt="Maternité_Archi" title="Réaménagement_Architecture" />
</object>

l'utilisateur ne pouvant lire le Flash verra l'image de substitution.

Et si ce n'est toujours pas clair, encore un autre exemple :

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" />
  <p>Adobe Flash Player (ou un plug-in Flash pour votre navigateur) est requis pour lire la vidéo.</p> 
</object>

où l'utilisateur ne pouvant lire le Flash aura le texte "Adobe Flash Player..." (ce qui, soit dit en passant, n'est pas le genre de contenu de substitution recommandé).

Et parmi ceux qui ne peuvent lire le Flash, il y a les robots des moteurs de recherche.

Pour en revenir au code proprement dit, voici quelques explications :
- l'élément OBJECT permet d'insérer dans un document HTML du contenu programmatique (comme du contenu multimédia, par exemple), son attribut type précise le type MIME (ici, celui du format SWF), ses attributs witdh et height les dimensions de l'élément, son attribut data le chemin et le nom du fichier appelé (attribut facultatif),
- à l'intérieur de cet élément OBJECT, l'élément PARAM permet de préciser des paramètres, avec le couple d'attributs name et value, paramètres qui sont pris en compte par le Flash (par exemple, pour l'attribut name="movie", l'attribut value aura pour valeur le chemin vers le fichier SWF appelé).

Pour plus de détails, la spécification HTML (version française) est là.

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

06 juin 2008, 12:15

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

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

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...

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...

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 ?

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

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.

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>

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.

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.

image cliquable

Qui est en ligne