11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Modal window, onload et flv

Bonjour,

J'ai une page index.php sur laquelle je souhaiterai afficher une vidéo .flv dans une "modal window" (sorte de popup de ce genre) au chargement de la page.
J'utilise la librairie jQuery et j'ai bien trouvé des tas de plug-in pour afficher une video .flv, ou pour afficher une image dans une 'modal window' au chargement de la page, mais je trouve ces solutions excessivement lourdes pour ce que je souhaite faire, c'est à dire afficher une vidéo unique sur ma page index.
N'étant malheureusement pas très doué en javascript et plus précisément jQuery je viens quémander votre aide.

Merci d'avance!
Modifié par Norfou (26 Feb 2010 - 14:06)
Après pas mal de recherches je suis arrivé à quelque chose qui est pas loin de ce que je veux.
J'utilise un code javascript assez simple qui va afficher une popup couplé au lecteur de .flv Dewtube.

Voici le code que j'utilise :


<div id="boxes">
	<div id="modal_window" class="window">
		<p>Popup window modal | <a href="#" class="close"/>Fermer</a></p>
		<object type="application/x-shockwave-flash" data="dewtube.swf" width="480" height="270">
			<param name="allowFullScreen" value="true" />
			<param name="movie" value="dewtube.swf" />
			<param name="flashvars" value="movie=bande_annonce.flv&autostart=1" />
		</object>
	</div>
<!-- Mask pour recouvrir tout l'ecran -->
	<div id="mask"></div>
</div>




#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}
  
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}

#boxes #modal_window {
  width:480px; 
  height:330px;
  padding: 0 10px;
  background-color:#ffffff;
}




$(document).ready(function() {	
	$(window).load(function(e) {	
		//Id du bloc affiché dans la popup
		var id = $('#modal_window');
	
		//Recupere la hauteur et largeur de l'ecran
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
	
		//Donne la taille recuperé au bloc #mask
		$('#mask').css({'width':maskWidth,'height':maskHeight});
		
		//Effet de transition		
		$('#mask').fadeTo("slow",0.6);	
	
		//Récupère la largeur et hauteur de la fenêtre
		var winH = $(window).height();
		var winW = $(window).width();
              
		//Aligne la popup au centre
		$(id).css('top',  winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);
	
		//Effet de transition
		$(id).fadeIn(1000); 
	});
	
	//Si le bouton "fermer" est cliqué
	$('.window .close').click(function (e) {
		//Cancel the link behavior
		e.preventDefault();
		
		$('#mask').hide();
		$('.window').hide();
	});		
	
	//Si la boite "mask" est cliquée
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});			
	
});


Tout fonctionne parfaitement sous Firefox et Google Chrome, mais malheureusement pas sous Internet Explorer qui affiche bien la popup mais pas la video...

Auriez-vous une idée du problème?

Merci beaucoup!
Merci pour vos réponses.

J'ai essayé en utilisant la librairie swfobject et la méthode statique, ca fonctionne sous Firefox et Google Chrome mais pas Internet Explorer pour lequel j'ai seulement le son.
Vous pouvez avoir un apercu en suivant ce lien.

Merci encore pour votre aide!

Edit : J'ai finalement trouvé la solution, la vidéo ne s'affichait pas sous IE car lors de l'appel du fichier flv je n'indiquait pas la taille et la largeur du fichier.
Ce qu'il faut faire : <param name="flashvars" value="monfichier.flv&amp;width=303&amp;height=227&autostart=1" />
Ce qu'il ne faut pas faire : <param name="flashvars" value="movie=monfichier&autostart=1" />
Modifié par Norfou (26 Feb 2010 - 14:05)
Sujet clos
Aller à