[YouTube] Player API Reference for iframe Embeds: onPlayerStateChange ne s'exécute pas

Version imprimable

J'ai dans ma page html des vidéos youtube et je veux les contrôler.

Mon code html :

Code:

1
2
3
4
<iframe  width="225" height="155" ....................></iframe>
<iframe  width="225" height="155" ....................></iframe>
<iframe  width="225" height="155" ....................></iframe>
<script src="https://www.youtube.com/iframe_api"></script>

Les id de mes vidéos youtube sont stockés dans un tableau.
Je veux que lorsque je clique sur une vidéo ou lorsqu'elle se termine, une alert se déclenche.

J'utilise pour ça l'api youtube :https://developers.google.com/youtub..._api_reference

Voici mon code javascript :

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
function onYouTubeIframeAPIReady() {
	// insert YouTube Player objects into our playerArray
         alert("1");
	for (var i = 0; i < videoArray.length; i++) {
		playerArray[i] = new YT.Player(videoArray[i].id, {
			events: {
                                'onReady': onPlayerReady,
				'onStateChange': onPlayerStateChange
			}
		});
	}
}
function onPlayerReady(event) {
       alert("2");
   event.target.playVideo();
    }
// when the player changes states
function onPlayerStateChange(event) {
	   alert("3");
	// if the video begins playing, send the event
	if (event.data == YT.PlayerState.PLAYING) {
		alert();
	}
	// if the video ends, send the event
	if (event.data == YT.PlayerState.ENDED) {
		alert();
	}
}

Rien n'est affiché lors du clique sur mes vidéos...

Merci d'avance.

D'abord je tiens à souligner que si tu veux utiliser les iframe alors il ne faut pas oublier d'ajouter ?enablejsapi=1 dans l'URL de la video pour autoriser l'api javascript à manipuler la vidéo qui est dans le iframe, et le origin c'est conseillé pour la sécurité, et c'est déconseillé de donner des dimension moins de 200x200 pour le iframe comme c'est dit dans l'API.

Alors pour utiliser tes tableaux des id que tu présente et tes iframes tel que tu veux. Je vais utiliser les ids des video directement partout(ce n'est pas obligatoire) et c'est très simple à manipuler que les indices, j'utilise les tableaux associatifs. Voici un exemple très simple bien testé avec tout ce qu'il faut pour tester.

Code:

1
2
3
4
5
6
7
<div>
    <iframe  width="250" height="200"   src="https://www.youtube.com/embed/-MifpF7p1P0?enablejsapi=1" frameborder="0" allowfullscreen style="margin-right: 10px"></iframe>
    <iframe  width="250" height="200"   src="https://www.youtube.com/embed/vkBiEuZSq9s?enablejsapi=1" frameborder="0" allowfullscreen  style="margin-right: 10px"></iframe>
    <iframe  width="250" height="200"   src="https://www.youtube.com/embed/-RLE2Q7OzME?enablejsapi=1" frameborder="0" allowfullscreen  style="margin-right: 10px"></iframe>
    <iframe  width="250" height="200"   src="https://www.youtube.com/embed/W3eJWpvIl0g?enablejsapi=1" frameborder="0" allowfullscreen  style="margin-right: 10px"></iframe><br>
</div>
<span id="affiche"></span>

Le code JavaScript, j'utilise un peu de Jquery

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 //Voici la manière dont je comprend ton tableau contenant les ids des videos qu'on veut afficher 
     var les_videos=[{id: "-MifpF7p1P0"},{id :"vkBiEuZSq9s"}, {id: "-RLE2Q7OzME"}, {id :"W3eJWpvIl0g"}];
 
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
     //On dois donner des ids aux iframes car c'est à nous de fournir
     //On peut donner chaque iframe un id aleatoire qu'on veut comme ça :
     //<iframe id="if1 width="250" height="200"...../> ça va marcher 
     //l'id du iframe c'est juste pour dire à l'API là il où va créer ou gerer le lecteur
     //Il faut differencier entre le iframe et le contenu à l'intérieur
     //Mais on va faire que les les ids des iframe soient aussi les ids des vidéo
var N={};
  $(document).ready(function (){    
        $("iframe").each(function (i){
            this.id=les_videos[i].id;//Chaque iframe prend l'id
             //Je vais profiter l'occasion pour associer des numéro aux id;
            //Juste pour associer une video à un numéro en cas de besoin
            N[id_v]=i+1;
            //N sera enfin égale à {"-MifpF7p1P0":1,"vkBiEuZSq9s":2,.....
        });     
   });  
      //On va crée nos lecteurs mais on va utiliser les id des video comme clé d'accès
      //On va utiliser un tableau associatif qui va associé l'id de la vidéo avec le player
      //Ça va aussi me faciliter de recupérer le lecteur qui a déclenché un évènement
      var lecteurs={};
      function onYouTubeIframeAPIReady() {
         for(var video in les_videos){   
              lecteurs[video.id]=new YT.Player(video.id,{
              events: {
                      'onReady': onPlayerReady,
                      'onStateChange': onPlayerStateChange
                      }
              }); }}
      function onPlayerReady(event) {
         //Je veux par exemple que seul la 2e vidéo se déclenche autoamtiquement
         // target: c'est le player, a: c'est le iframe et id son id;
          var id_v=event.target.a.id;
          if(N[id_v]===2)lecteurs[id_v].playVideo();
 
          return true;
      }
 
      function onPlayerStateChange(event) {
           // target: c'est le player, a: c'est le iframe et id son id;
        var id_v=event.target.a.id;
           if (event.data == YT.PlayerState.PLAYING) {
        $("#affiche").html("Lecutrue encours de la video dont id="+id_v+" c'est la "+N[id_v]+"e video");
         }
           if (event.data == YT.PlayerState.PAUSED) {
        $("#affiche").html("Pause de la video dont id="+id_v+", c'est la "+N[id_v]+"e video");
         }
           if (event.data ==YT.PlayerState.ENDED) {
        alert("Arret de la video dont id="+id_v+", c'est la "+N[id_v]+"e video");
            }       
      }    
      function playVideo(id_v){
        lecteurs[id_v].playVideo(); 
      }
      function stopVideo(id_v) {
 
        lecteurs[id_v].stopVideo();
      }
      function pauseVideo(id_v){
         lecteurs[id_v].pauseVideo(); 
      }

NB: une prochaine fois, si possible, quand on prend notre temps de vous aider à résoudre vos problèmes, il faut au moins dire que ça marche ou que ça ne marche pas, car nous aussi on gagne en expérience en vous répondant.

j'ai testé ton code dans une jsp mais au clique rien n'est affiché:

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script type="text/javascript">
            //Voici la manière dont je comprend ton tableau contenant les ids des videos qu'on veut afficher
             var les_videos=[{id: "-MifpF7p1P0"},{id :"vkBiEuZSq9s"}, {id: "-RLE2Q7OzME"}, {id :"W3eJWpvIl0g"}];
             var id_v;
 
              var tag = document.createElement('script');
              tag.src = "https://www.youtube.com/iframe_api";
              var firstScriptTag = document.getElementsByTagName('script')[0];
              firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
             //On dois donner des ids aux iframes car c'est à nous de fournir
             //On peut donner chaque iframe un id aleatoire qu'on veut comme ça :
             //<iframe id="if1 width="250" height="200"...../> ça va marcher
             //l'id du iframe c'est juste pour dire à l'API là il où va créer ou gerer le lecteur
             //Il faut differencier entre le iframe et le contenu à l'intérieur
             //Mais on va faire que les les ids des iframe soient aussi les ids des vidéo
             var N={};
             $(document).ready(function (){
                    $("iframe").each(function (i){
                        this.id=les_videos[i].id;//Chaque iframe prend l'id
                         //Je vais profiter l'occasion pour associer des numéro aux id;
                        //Juste pour associer une video à un numéro en cas de besoin
                        N[id_v]=i+1;
                        //N sera enfin égale à {"-MifpF7p1P0":1,"vkBiEuZSq9s":2,.....
                    });
               });
              //On va crée nos lecteurs mais on va utiliser les id des video comme clé d'accès
              //On va utiliser un tableau associatif qui va associé l'id de la vidéo avec le player
              //Ça va aussi me faciliter de recupérer le lecteur qui a déclenché un évènement
              var lecteurs={};
              function onYouTubeIframeAPIReady() {
                 for(var video in les_videos){
                      lecteurs[video.id]=new YT.Player(video.id,{
                      events: {
                              'onReady': onPlayerReady,
                              'onStateChange': onPlayerStateChange
                              }
                      }); }}
              function onPlayerReady(event) {
                 //Je veux par exemple que seul la 2e vidéo se déclenche autoamtiquement
                 // target: c'est le player, a: c'est le iframe et id son id;
                  var id_v=event.target.a.id;
                  if(N[id_v]===2)lecteurs[id_v].playVideo();
 
                  return true;
              }
 
              function onPlayerStateChange(event) {
                   // target: c'est le player, a: c'est le iframe et id son id;
                var id_v=event.target.a.id;
                   if (event.data == YT.PlayerState.PLAYING) {
                alert();
                 }
                   if (event.data == YT.PlayerState.PAUSED) {
                $("#affiche").html("Pause de la video dont id="+id_v+", c'est la "+N[id_v]+"e video");
                 }
                   if (event.data ==YT.PlayerState.ENDED) {
                alert("Arret de la video dont id="+id_v+", c'est la "+N[id_v]+"e video");
                    }
              }
              function playVideo(id_v){
                lecteurs[id_v].playVideo();
              }
              function stopVideo(id_v) {
 
                lecteurs[id_v].stopVideo();
              }
              function pauseVideo(id_v){
                 lecteurs[id_v].pauseVideo();
              }
        </script>
    </head>
    <body>
        <div>
            <iframe  width="250" height="200"   src="https://www.youtube.com/embed/-MifpF7p1P0?enablejsapi=1" frameborder="0" allowfullscreen style="margin-right: 10px"></iframe>
            <iframe  width="250" height="200"   src="https://www.youtube.com/embed/vkBiEuZSq9s?enablejsapi=1" frameborder="0" allowfullscreen  style="margin-right: 10px"></iframe>
            <iframe  width="250" height="200"   src="https://www.youtube.com/embed/-RLE2Q7OzME?enablejsapi=1" frameborder="0" allowfullscreen  style="margin-right: 10px"></iframe>
            <iframe  width="250" height="200"   src="https://www.youtube.com/embed/W3eJWpvIl0g?enablejsapi=1" frameborder="0" allowfullscreen  style="margin-right: 10px"></iframe><br>
        </div>
        <span id="affiche"></span>
    </body>
</html>

Désolé, car j'avais modifié le code une fois publié sur developpez.com mais je ne pensais pas que j'avais laissé des bug. Je n'ai pas fais attention car je n'avais pas repris pour tester.

Par exemple j'avais diminuer les variables et du coup dans la méthode $(document).ready( , j'ai fais une erreur, je fais N[id_v]=i+1 or j'avais déjà supprimé la variable id_v pour utiliser directement les_videos[i].id, en plus de ça j'ai changé un $(...).each par le for(... in ..) or je n'ai pas testé, j'ai juste changé pour une plus de visibilité du code, mais bon j'ai carrément travailler comme en php, alors qu'en javascript la clé c'est juste l'indice et non pas l'objet.

Alors j'ai rectifié tout ça, et je garde la version originale et voici le code, mais il faut essayer d’éviter les scripts en haut de page dans le head. En haut de page pour référencer les fichiers .js(obligatoire) en en bas de page juste avant de fermer le body, on met les scripts, ça fait gagner en rapidité.
Je te conseil d'utiliser le html5, donc pas de long DOCTYPE, il faut juste ajouter html point c'est tout ça c'est du html5, comme j'ai fais

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    </head>
    <body>
 
    <div>
    <iframe  width="250" height="200"   src="https://www.youtube.com/embed/-MifpF7p1P0?enablejsapi=1" frameborder="0" allowfullscreen style="margin-right: 10px"></iframe>
    <iframe  width="250" height="200"   src="https://www.youtube.com/embed/vkBiEuZSq9s?enablejsapi=1" frameborder="0" allowfullscreen  style="margin-right: 10px"></iframe>
    <iframe  width="250" height="200"   src="https://www.youtube.com/embed/-RLE2Q7OzME?enablejsapi=1" frameborder="0" allowfullscreen  style="margin-right: 10px"></iframe>
    <iframe  width="250" height="200"   src="https://www.youtube.com/embed/W3eJWpvIl0g?enablejsapi=1" frameborder="0" allowfullscreen  style="margin-right: 10px"></iframe>
    </div><br>
    <span id="affiche" style="margin-left: 20px"></span>
 
<script type="text/javascript">
      //Voici une autre manière de structure des vidéo les ids des videos que je veux affichés
      var les_videos=[{id: "-MifpF7p1P0"},{id :"vkBiEuZSq9s"}, {id: "-RLE2Q7OzME"}, {id :"W3eJWpvIl0g"}];
 
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
     //On dois donner des ids aux iframes car c'est à nous de fournir
     //On peut donner chaque iframe un id aleatoire qu'on veut comme ça :
     //<iframe id="if1 width="250" height="200"...../> ça va marcher 
     //l'id du iframe c'est juste pour dire à l'API là il où va créer ou gerer le lecteur
     //Il faut differencier entre le iframe et le contenu à l'intérieur
     //Mais on va faire que les les ids des iframe soient aussi les ids des vidéo
     var N={};
  $(function (){
        
        $("iframe").each(function (i){
            var id_v=les_videos[i].id;
            this.id=id_v;
             //Je vais profiter l'occasion pour associer des numéro aux id;
            //Juste pour associer une video à un numéro
            N[id_v]=i+1;
            //N sera enfin égale à {"-MifpF7p1P0":1,"vkBiEuZSq9s":2,.....
        });     
    });  
      //On va crée nos lecteurs mais on va utiliser les id des video comme clé d'accès
      //On va utiliser un tableau associatif qui va associé l'id de la vidéo avec le player
      //Ça va aussi me faciliter de recupérer le lecteur qui a déclenché un évènement
      var lecteurs={};
      function onYouTubeIframeAPIReady() {
        
          $.each(les_videos,function (i, video){   
              var id_v=video.id;
              lecteurs[id_v]=new YT.Player(id_v,{
              events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
              }
              });   
           });
      }
      function onPlayerReady(event) {
         //Je veux par exemple que seul la 2e vidéo se déclenche automatiquement
         // target: c'est le player, a: c'est le iframe et id son id;
          var id_v=event.target.a.id;
          if(N[id_v]===2) {
              //J'appel la méthode que j'ai défini playVideo
            playVideo(id_v);}
          
          return true;
      }
      
      function onPlayerStateChange(event) {
           // target: c'est le player, a: c'est le iframe et id son id;
        var id_v=event.target.a.id;
           if (event.data == YT.PlayerState.PLAYING) {
     
        $("#affiche").html("Lecutrue encours de la video dont id="+id_v+" c'est la "+N[id_v]+"e video");
         }
           if (event.data == YT.PlayerState.PAUSED) {
        $("#affiche").html("Pause de la video dont id="+id_v+", c'est la "+N[id_v]+"e video");
         }
           if (event.data ==YT.PlayerState.ENDED) {
  
        $("#affiche").html("FIN DE LA VIDEO id="+id_v+", c'est la "+N[id_v]+"e video");
            }      
      }
      
      function playVideo(id_v){
        lecteurs[id_v].pauseVideo(); 
      }
      function stopVideo(id_v) {
          
        lecteurs[id_v].stopVideo();
      }
      function pauseVideo(id_v){
         lecteurs[id_v].pauseVideo(); 
      }
</script>
    </body>
</html>

Moindre souci, il faut me faire part. :mrgreen:

15/03/2014, 08h28
smfrd8

ça a trés bien fonctionné :)
Encore une fois je vous remercie d'avoir pris la peine et prendre du temps pour résoudre tous ces problèmes et en plus avec perfection. chapeau Mr.
15/03/2014, 09h39
la.lune

De rien :)
On est là pour ça, nous aussi on apprend avec ces réponses. Donc ce n'est pas une peine c'est quelque chose qu'on aime faire. Déjà avec ton problème j'ai découvert une API que j'ai jamais utilisé.