jouer du flash dans un contenu integré par JQuery

Version imprimable

28/02/2010, 16h49
Lionel_aw

jouer du flash dans un contenu integré par JQuery

Bonjour à tous,

je me suis servi de Jquery avec succès pour recharger des parties d'une page web, un peu pour simuler les frames que l'on utilisait il y a 10 ans.
ça marche nickel, j'utilise la fonction $.ajax() pour recharger des bouts d'HTML.

j'ai voulu améliorer le truc en rajoutant une animation flash dans le bout d'html qui est chargé par Jquery et ça marche pas.

J'utilise Dreamweaver CS4 et ce dernier utilise des appels de swfobject pour charger le swf.
J'ai donc copié tout le code de la balise OBJECT ect qui englobe le swf ainsi que l'appel de script qui utilise swfobject dans le bout d'html appellé par la fonction $.ajax()
ça marche si je prévisualise ce bloc Html dans un navigateur.

Par contre l'animation n'est pas visible dans ma page finale, une fois chargée par Jquery, même si l'espace pris par l'animation est réservé dans la page web.

quelqu'un a t-il une idée?

merci
01/03/2010, 17h09
danielhagnoul

Bonjour.

Une idée ? live(), Voir : http://www.developpez.net/forums/d83...s/#post4805186
01/03/2010, 18h03
Lionel_aw

merci !

mais je vois pas comment ça peut solutionner mon problème...

mon problème est il lié au script qui fait jour swfobject et qui n'est pas executé quand je charge le bout d'html dans ma page?

merci
01/03/2010, 22h39
danielhagnoul

Bonsoir.

C'était une idée. Si vous chargez du HTML et du code par une transaction AJAX vous pourriez en avoir besoin. Sans code difficile de dire si c'est bien le cas.

voici, en pseudo code la description de mon problème.

Dans le div aa c'est du html normal, une animation flash est chargée avec swfObject par un script en bas de page.

Dans le div bb, le code est chargé par Jquery avec la fonction $.ajax()
Il y a aussi une animation swf dans cette partie et j'ai ajouté le script d'appel de swfObject dans ce code mais ça ne charge pas l'animation. Seul le html est chargé.
Code:

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 32 33 <html> <body> <div id="aa"> ....des éléments html .... <obect id="FlashID"> charge un swf par swfObject </object> </div> <div id="bb"> .....du html chargé par Jquery dont le code ci dessous <object> id="FlashID_n"> charge un swf par swfObject </object> <script type="text/javascript"> swfobject.registerObject("FlashID_n"); </script> </div> <script type="text/javascript"> swfobject.registerObject("FlashID"); </script> </body> </html>

02/03/2010, 22h26
danielhagnoul

Citation:

Envoyé par danielhagnoul

Bonsoir.

C'était une idée. Si vous chargez du HTML et du code par une transaction AJAX vous pourriez en avoir besoin. Sans code difficile de dire si c'est bien le cas.

Citation:

Dans le div bb, le code est chargé par Jquery avec la fonction $.ajax()

Code ?

Ben voici un fragment du code Jquery

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
	page=($(this).attr("href")); // on recupere l' adresse du lien
 
	$.ajax({  // ajax
		url: page, // url de la page � charger
		cache: false, // pas de mise en cache
		success:function(html){ // si la requêté est un succès
		afficher(html);	    // on execute la fonction afficher(donnees)
		},
		error:function(XMLHttpRequest, textStatus, errorThrows){ // erreur durant la requete
		}
	});
	return false; // on desactive le lien
   });
});
 
function afficher(donnees){ // pour remplacer le contenu du div contenu
	$("#insidePhoto").empty(); // on vide le div
	$("#insidePhoto").append(donnees); // on met dans le div le résultat de la requete ajax
	$("#isolate").hide();		// cache le lien 'home' pour page isolée
}

et le code HTML que je charge

Code:

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
32
33
34
35
36
37
38
39
40
41
42
 
<div id="isolate">
  <a href="http://www.gibioctet.fr">retour au site web</a>
  </div>
 
<h3>La photo commerciale et industrielle</h3>
<p>La photographie commerciale, industrielle et d objets. R&eacute;alisation de photographies publicitaires, int&eacute;rieur et ext&eacute;rieur. Travail soign&eacute;, incrus*tation de textes, compositions etc.</p>
      <img src="../images/photo/michel.jpg" width="640" height="400" alt="" />
<p>R&eacute;alisation de photographies pour vos plaquettes commerciales (avec le respect des contraintes techniques impos&eacute;es par les imprimeurs), pour vos catalogues et books, pour votre site web.</p>
<img src="../images/photo/joelle.jpg" width="640" height="435" alt="Bijou de sac Jo&euml;lle Fyleyssant" />
 
<img src="../images/photo/dino.jpg" width="640" height="441" />
 
<object id="FlashID15" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="610" height="600">
  <param name="movie" value="animz.swf" />
  <param name="quality" value="high" />
  <param name="wmode" value="opaque" />
  <param name="swfversion" value="6.0.65.0" />
  <!-- Cette balise <param> invite les utilisateurs de Flash Player en version 6.0 r65 et ultérieure à télécharger la version la plus récente de Flash Player. Supprimez-la si vous ne voulez pas que cette invite soit visible. -->
  <param name="expressinstall" value="../Scripts/expressInstall.swf" />
  <!-- La balise <object> suivante est destinée aux navigateurs autres qu'IE. Supprimez-la d'IE à l'aide d'IECC. -->
  <!--[if !IE]>-->
  <object type="application/x-shockwave-flash" data="animz.swf" width="610" height="600">
    <!--<![endif]-->
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="6.0.65.0" />
    <param name="expressinstall" value="../Scripts/expressInstall.swf" />
    <!-- Le navigateur affichera le contenu alternatif suivant pour les utilisateurs d'un lecteur Flash de version 6.0 ou de versions plus anciennes. -->
    <div>
      <h4>Le contenu de cette page n&eacute;cessite une version plus r&eacute;cente d’Adobe Flash Player.</h4>
      <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtenir le lecteur Adobe Flash" width="112" height="33" /></a></p>
    </div>
    <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
</object>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID15");
//-->
 </script>

Détail :

Code:

1
2
3
4
function afficher(donnees){ // pour remplacer le contenu du div contenu
	$("#insidePhoto").html(donnees); // on remplace le contenu de la division par le résultat de la requete ajax
	$("#isolate").hide();		// cache le lien 'home' pour page isolée
}

Idée : recharger le script swfobject :

Code:

1
2
3
4
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
	swfobject.registerObject("FlashID15");
</script>

02/03/2010, 23h08
Lionel_aw

Merci Daniel pour la réponse,

mais je ne comprends pas , où recharger le code???

:cry:

Lionel
02/03/2010, 23h15
danielhagnoul

Comme je le montre, dans le code HTML chargé par AJAX et inclus dans la division #insidePhoto
02/03/2010, 23h15
Lionel_aw
en fait cette ligne
Code:

1 2 <script type="text/javascript" src="swfobject.js"></script>
était déja dans le html chargé, je l'ai enlevée avant de faire le copier collé , ça ne vient pas de là.
02/03/2010, 23h18
danielhagnoul

Désolé, je n'ai pas d'autre idée.

Vous utilisez bien la dernière version (2.2) http://code.google.com/p/swfobject/ ?
02/03/2010, 23h42
Lionel_aw

c'est la version qui est intégrée par dreamweaver cs4