11540 sujets

JavaScript, DOM et API Web HTML5

Sélécteur objet flash jQuery

Bonjour à tous,

Je rencontre actuellement un problème dans un code javascript / jQuery.
J'utilise l'API youtube, pour pouvoir créer un player youtube, désactiver le son par défaut, et n'activer le son qu'au survol du player.

Voici mon code : 
<script type="text/javascript">
        var player = undefined;
        var playerId = "myPlayer"; //ID de l'élément HTML
        var params = { allowScriptAccess: "always" };
        var atts = { id: "playerVideo" };
         
        swfobject.embedSWF("http://www.youtube.com/v/qyuPn4DPCdA?enablejsapi=1&playerapiid=ytplayer&version=3",
                           "ytapiplayer", "853", "480", "8", null, null, params, atts);
         
        //Callback de l'API
        function onYouTubePlayerReady(playerApiId){
            //Récupération player à partir de l'ID de l'élément HTML
            player = document.getElementById("playerVideo");
	
             
			
			 
            if( typeof player != "undefined" ){
                player.mute();
                player.playVideo();
            }
        }
		
		
    </script>


Jusque la, le player s'affiche bien, avec le son désactivé.

Or, je m'attaque désormais à l'activation du son au survol du player.

J'ai créé cette fonction, dans un premier temps, pour vérifier que le survol fonctionne bien.

$("#playerVideo").hover(
			  function () {
				 alert("Survol player");
			  }
			);


Mais rien ne se passe ...

Quel est le sélécteur jQuery à utiliser ?

Merci à vous !
Salut,

Le problème vient de là:
"Documentation jQuery" a écrit :
jQuery's event system requires that a DOM element allow attaching data via a property on the element, so that events can be tracked and delivered. The object, embed, and applet elements cannot attach data, and therefore cannot have jQuery events bound to them.


Quelques idées (non testées):
- Essayer d'attacher l'événement sans jQuery (avec addEventListener/attachEvent)
- Essayer d'englober le player Youtube dans une div et attacher l'événement sur cette div
J'ai essayé ta deuxième proposition, en mettant une ouverture de div avant mon script, et une fermeture apres.

Malheureusement, lorsque je consulte mon code avec Firebug, ma div se trouve apres mon script ..

Comment puis-je faire ?
Bon j'ai réussi laborieusement.

En fait, on ne peut attacher des événements sur un <object> ni avec jQuery ni avec addEventListener. On est visiblement obligé d'utiliser l'ancienne méthode.

J'ai changé les id pendant les tests mais je suis pas très sûr d'à quoi ils servent. J'ai aussi changé la vidéo, je suis fan Smiley lol 
<!DOCTYPE html>
<html>
<body>
    <div id="ytapiplayer">
        You need Flash player 8+ and JavaScript enabled to view this video.
    </div>
  
    <!-- Lib à téléchager -->
    <script src="http://code.jquery.com/jquery-1.7.2.js" type="text/javascript"></script>
    <script src="http://www.fabienbourigault.fr/youtube/swfobject.js"></script>
	<script type="text/javascript">
        var player = undefined;
        var playerId = "myPlayer"; //ID de l'élément HTML
        var params = { allowScriptAccess: "always" };
        var atts = { id: "ytapiplayer" };
         
        swfobject.embedSWF("http://www.youtube.com/v/9e9NSMY8QiQ?enablejsapi=1&playerapiid=ytplayer&version=3",
                           "ytapiplayer", "853", "480", "8", null, null, params, atts);
         
		 
	function reactiveSon(evt){
		//console.log("Yataaaaaaaaaa !");
		player.unMute();
	}

        //Callback de l'API
        function onYouTubePlayerReady(playerApiId){
            //Récupération player à partir de l'ID de l'élément HTML
            player = document.getElementById("ytapiplayer");
	
            if( typeof player != "undefined" ){
                player.onmouseover = reactiveSon;
		player.mute();
                player.playVideo();
				
				
            }
        }

    </script>
</body>
</html>
Il faut passer par une fonction. Au final, avec des fonctions anonymes, ça donnerait:
player.onmouseout = function(){
    player.mute();
};
player.onmouseover = function(){
    player.unMute();
};
Super, tout fonctionne Smiley smile

Pour tous ceux qui voient ce message, serait-il possible de tester mon script sur vos navigateurs, et de m'indiquer si tout fonctionne ?

http://bit.ly/StKITS

- Lancement de la vidéo automatique avec son muet
- Au survol, le son s'active
- Lorsqu'on ressort de la zone, la vidéo se met en pause

Merci de m'indiquer le navigateur sous lequel vous avez effectué le test Smiley smile

Merci beaucoup !
Modifié par Fabien2 (13 Jan 2013 - 18:39)
Sujet clos
Aller à