11487 sujets

JavaScript, DOM et API Web HTML5

Problème insertion dynamique de <object> avec IE [résolu]

Bonjour à tous!

J'essaie, dans mon micro-wysiwyg, de créer l'insertion de videos en flash.
Le procédé est simple: on choisi dans une liste la vidéo à insérer, le script crée une image en guise de témoin ( que l'on peut déplacer, centrer etc...) de ladite vidéo; à la preview ou à la validation, le script remplace l'image par le code d'affichage du flash.

le code:

Editor.prototype.pubVideo = function(){
	if(MOZ){
		var divs = edoc.body.getElementsByTagName('div');
		var object,param,embed;

		for(j=0 ; j<divs.length ; j++){
			if(divs[j].className=="video"){
				var path = divs[j].firstChild.id;
				object = document.createElement('object');
				param1 = document.createElement('param');
				param2 = document.createElement('param');
				object.setAttribute("type","application/x-shockwave-flash");
				object.setAttribute("data","player_flv_maxi.swf");
				object.setAttribute("width","320");
				object.setAttribute("height","240");
				param1.setAttribute("name","movie");
				param2.setAttribute("name","FlashVars");
				param2.setAttribute("value","flv="+path+"&amp;width=320&amp;height=240&amp;loadonstop=0&amp;showstop=1&amp;showvolume=1&amp;showtime=1&amp;srt=1&amp;title=test&amp;titlesize=10");
				object.appendChild(param1);
				object.appendChild(param2);
				
				divs[j].appendChild(object);
				divs[j].removeChild(divs[j].firstChild);
			}
		}
	}
}


Pas de soucis sur FF, donc, par contre appendChild refuse mystérieusement de fonctionner sur IE. Donc, juste pour voir, je tente un innerHTML:


if(IE){
	var coin = edoc.body.getElementsByTagName('div');
	for(j=0 ; j<coin.length ; j++){
		if(coin[j].className=="video"){
			var path = coin[j].firstChild.id;
			prout = '<object data="player_flv_maxi.swf" type="application/x-shockwave-flash" height="240" width="320"><param value="player_flv_maxi.swf" name="movie"><param value="flv='+path+'&amp;width=320&amp;height=240&amp;" name="FlashVars"></object>'
			coin[j].innerHTML = prout;
		}
	}
}


Et surprise: tout le code situé entre <object></object> est purement et simplement supprimé, sauf si j'enlève l'attribut "type" de la balise object, et logiquement dans ce cas rien ne fonctionne!!

Quelqu'un aurait-il une vague idée du problème??
Smiley biggol

EDIT: je voulais dire: si j'enlève l'attribute "data" de la balise <object>!!
Modifié par ami (27 May 2007 - 01:08)
Ze Nenex a écrit :
Salut ami,

Connais tu SWFObject ?

As-tu essayer de créer ton flash sous IE via l'objet ActiveXObject("ShockwaveFlash.ShockwaveFlash")


Non je connaissais pas. M'a l'air très interessant!
Vais essayer ça de suite!

Merci!!
Smiley smile
Non hélas, ça n'a pas l'air de fonctionner...
Suis obligé de me rabattre sur la balise <embed>, avec laquelle ça fonctionne, mais en perdant la validité de mes pages...

C'est assez curieux, ce truc: on dirait qu'IE tente d'interpréter à la volée les attributs "type" présents dans la balise <object>. Il faudrait pouvoir contourner cette interprétation intempestive d'Explorer...

( dire qu'avant j'avais de la peine à croire les gens qui m'affirmaient qu'IE est une sombre bouse, faudra que je pense à leur offrir un café... )

Mais je vais creuser cet objet ActiveXObject.
Bonjour,

Moi je n'ai pas d'explication mais j'ai une solution (idiote mais qui fonctionne chez moi) :
Au lieu de bêtement
1. créer mon <object>,
2. y ajouter ses attributs (id, type, data),
3. puis créer les balises <param>,
4. ajouter les attributs aux <param>,
5. ajouter les <param> dans l'<object>,
6. et enfin ajouter tout ça dans un conteneur

ce qui ne marche pas avec IE qui vire toutes les balises param si l'object à des attributs, je fais ceci :

1. créer mon objet,
2. puis créer les balises <param>,
3. ajouter les attributs aux <param>,
4. ajouter les <param> dans l'<object>,
5. ajouter tout ça dans un conteneur
6. ajouter les attributs de l'<object> (id, type, data),

C'est à dire que tout simplement, en ajoutant subrepticement les attributs à l'object APRES AVOIR inséré l'object en question dans le html, cet andouille d'ie ne s'en aperçoit pas et oublie de supprimer les balises <param> dans l'<object>.
En code ça donne ça :


//1. je crée mon object
var objetFlash=document.createElement("object");

//2. je crée mes param 
var paramMovie=document.createElement("param");
var paramQuality=document.createElement("param");
var paramWmode=document.createElement("param");

//3. j'ajoute aux params leurs atributs
paramMovie.setAttribute("name","movie");
paramMovie.setAttribute("value",d);

paramQuality.setAttribute("name","quality");
paramQuality.setAttribute("value","high");

paramWmode.setAttribute("name","wmode");
paramWmode.setAttribute("value","transparent");
	
//4. j'ajoute mes param à l'object
objetFlash.appendChild(paramMovie);
objetFlash.appendChild(paramQuality);
objetFlash.appendChild(paramWmode);

//5. je met l'object dans le html
document.getElementById("divConteneurDuFlash").appendChild(objetFlash);

//6. Et là, paf, ni vu ni connu j'ajoute les attributs à l'object : IE regarde ailleurs pendant ce temps.
objetFlash.setAttribute("id","flashtetiere");
objetFlash.setAttribute("type","application/x-shockwave-flash");
objetFlash.setAttribute("data",d);


Bon chez moi ça marche j'espère que ça fera pareil chez vous !
Hello!

Finalement j'ai utilisé swfobject et ça m'a rudement simplifié la tâche: plus besoin de mettre les balises en "dur" et je me contente donc d'insérer une image témoin avec l'url de la vidéo dans l'Id, et le lecteur flash est créé à la volée avec une toute petite fonction en javascript. Smiley smile 


var mov = document.getElementsByTagName('div');
var so;
for(i=0; i<mov.length; i++){
	if(mov[i].className == "video"){
		mov[i].removeChild(mov[i].firstChild);
		so = new SWFObject("flvplayer.swf", "movie", "320", "240", "7", "#336699");
		so.addVariable("file",mov[i].id.replace(/-/gi,"/"));
		so.write(mov[i]);
	}
}


Inconvénient : pas de javascript, pas de vidéos, mais ça reste acceptable. [/i][/i][/i][/i][/i]
Modifié par ami (27 May 2007 - 01:06)
@Meybeck :

merci infiniment!!! c'est une excellente méthode pour "tromper" IE.
J'utilise mootools et j'avais exactement ce problème; enfin résolu grâce à toi.



function injectvideo(e){
	// e est dans notre cas un lien <a>
	// contenant une image
	var src,w,h,vid;
	// le rel du lien sert de stockage de la src du flash
	src= e.getProperty('rel');
	w = e.getFirst().getProperty('width'); // taille de l'image
	h = e.getFirst().getProperty('height');
	if(!_IE){
	// ceci marche partout sauf pour IE (ha bon?)
	// dans ce cas j'utilise uniquement mootools
		vid = new Element('object',{
			'width':w,
			'height':h,
			'type':'application/x-shockwave-flash',
			'data':src
		});
		new Element('param',{'name':'movie','value':src}).inject(vid);
		new Element('param',{'name':'wmode','value':'window'}).inject(vid);
		new Element('param',{'name':'bgcolor','value':'#333333'}).inject(vid);
		e.replaceWith(vid);
	}else{
		// sinon pour IE c'est "simple"
		// d'abord déclaration de l'objet
		vid = new Element('object');

		// ensuite on déclare tout le reste
		// et on l'injecte dans l'objet
		var mov,bg,wm;
		mov = new Element('param');
		bg = new Element('param');
		wm = new Element('param');
		
		// ici je ne peux plus utiliser mootools (IE ne veut pas...)
		// je me rabat sur du DOM standard
		mov.setAttribute('name','movie');
		mov.setAttribute('value',src);
		
		bg.setAttribute('name','bground');
		bg.setAttribute('value','#333333');
		
		wm.setAttribute('name','wmode');
		wm.setAttribute('value','window');
		
		// re-mootools pour l'injection
		mov.inject(vid);
		bg.inject(vid);
		wm.inject(vid);

		// ENSUITE on défini les attributs de l'objet
		vid.setAttribute('width',w);
		vid.setAttribute('height',h);
		vid.setAttribute('data',src);
		vid.setAttribute('type','application/x-shockwave-flash');

		// finalement on peut insérer notre objet
		// avec la méthode DOM car IE fait à nouveau des siennes
		e.parentNode.replaceChild(vid,e);
	}


donc, par exemple, j'ai un lien (sur une vidéo du King) tel que:

<!-- le lien doit fonctionner si javascript est désactivé,
donc le href pointe sur la page youtube
et le rel sert uniquement au javascript pour insérer
la bonne source dans notre objet.
De plus l'image est au bon rapport
largeur/hauteur du player youtube -->
<a id="mavideo" href="http://www.youtube.com/watch?v=UispCK7Q--M" rel="http://www.youtube.com/v/UispCK7Q--M">
	<img src="mon_image.jpg"  width="200" height="165" alt="" />
</a>


Et le javascript :

// à nouveau du mootools pur sucre
$('mavideo').addEvent('click',function(event){
	// on stoppe l'action standard du lien
	var event = new Event(event);
	ev.preventDefault();
	injectvideo(this); // on appelle notre fonction
});
Sujet clos
Aller à