Lancer un événement sur play de youtube iframe embed

Version imprimable

07/11/2017, 18h26
sihamnet

Lancer un événement sur play de youtube iframe embed

Bonjour,

J'essaye de lancez un événement(démarrer l’animation d'une barre de progression) quand je démarre la vidéo YouTube mais ça ne marche pas
Est ce que vous pouvez vérifiez mon code dans le lien ci dessous

jsfiddle

Salut, tu n'as pas créé d'objet youtube player donc à mon avis, il ne peut rien se passer...

Code:

<div id="player"></div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '....',
          width: '.....',
          videoId: '.....',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

Tout est décrit ici : https://developers.google.com/youtub...eference?hl=fr

08/11/2017, 13h09
sihamnet

Merci pour votre réponse , j'a fait comme vous avez dis mais la barre de progression ne marche pas nouveau code
08/11/2017, 14h27
Archimède

Je ne vois pas d'implémentation de la fonction onPlayerStateChange(event)...donc rectifie déjà le tir après je n'ai pas le temps de tester aujourd'hui désolé, j'ai du travail pour demain...

arrrêt de setinterval

Ci-dessous, je commande le démarrage de la video avec onReady et je la stoppe au bout de 3 secondes dans onStateChange...
et tu pourras constater que ça fonctionne. Le problème vient donc maintenant de ta fonction progress (je te laisse voir...)

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
 
<!DOCTYPE html>
 
<html>
<head>
    <title>Page Title</title>
</head>
 
<body>
   <iframe id="player" class="player" src="https://www.youtube.com/embed/5Wn85Ge22FQ?&enablejsapi=1&autoplay=0&showinfo=0&controls=0&rel=0" frameborder="0" allowfullscreen></iframe>
 
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var stop=false;
 
 
 
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
});
}
    
      
function onPlayerStateChange(event){
 if (event.data == YT.PlayerState.PLAYING) progress();
}
 
function onPlayerReady(event) {
 event.target.playVideo();
}
 
function progress() {
if (!stop) var timer=setInterval(function(){
                                   player.stopVideo();
                                   stop=true;
                                 },3000);
else clearInterval(timer);
}
        
</script>   
</body>
</html>

Pour ta fonction progress(), tu auras besoin de player.getCurrentTime() et de player.getDuration()... sinon ta progress Bar ne pourra pas fonctionner...

09/11/2017, 08h51
SpaceFrog

La Doc officielle avec toutes les méthodes ....
https://developers.google.com/youtub...eference?hl=fr

Ci-joint un bout de code que j'avais commencé et qui fonctionne :

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
 
<!DOCTYPE html>
 
<html>
<head>
    <title>jauge youTube</title>
<style>
#jauge {
  width: 90%;
  margin: 10px auto;
  height: 22px;
  background-color: #0A5F44;
}
 
#progressBar_div {
  height: 100%;
  padding: 0 10px;
  line-height: 22px;
  width: 100%;
  background-color: #CBEA00;
}    
</style>
 
</head>
 
<body>
<div id="jauge">
  <div id="progressBar_div"></div>
</div>
   <iframe id="player" class="player" src="https://www.youtube.com/embed/5Wn85Ge22FQ?&enablejsapi=1&autoplay=0&showinfo=0&controls=0&rel=0" frameborder="0" allowfullscreen></iframe>
 
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
var barre=document.getElementById("progressBar_div");  //prise en main sous javascript de la progressBar
barre.style.visibility="hidden";  // on la cache au départ
 
 
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
});
}
    
      
function onPlayerStateChange(event){
 if (event.data == YT.PlayerState.PLAYING) setInterval( function(){  progress( player.getCurrentTime(),player.getDuration() ); },100 );  //rafraichissement de la progressBar tous les 100 ms
}
 
function onPlayerReady(event) {
  event.target.playVideo();  //quand le lecteur est prêt, on démarre la lecture de la video
  barre.style.transform="scaleX(0)"; //on oblige la progressbar à avoir une largeur 0 au départ
  barre.style.visibility="visible"; // on la rend visible
}
 
 
 function progress(timeCurrent, timetotal) {
  var pourcentage= timeCurrent / timetotal;  //pourcentage de lecture de la video de 0 à 1 
  barre.style.transform="scaleX("+pourcentage+")";// agrandissement en x de la taille de la progressBar en fonction du pourcentage de lecture 
  barre.style.transformOrigin="left";  //repositionnement de l'origine à gauche pour la position de la barre
}
        
</script>   
</body>
</html>

C'est plus simple que ta fonction progress() en jquery... Le seul inconvénient et le repositionnement de la barre en left qui engendre un petit effet de saccade dû au retour en arrière... Sous Chrome, ça fonctionne très bien et ça saccade un peu sous FF. Ce n'est pas compatible avec IE et Edge (je viens de faire un essai... event.target.playVideo() non pris en charge apparemment)
Sinon, une petite balise canvas avec animation pourrait faire l'affaire pour éviter l'effet de saccade sous FF...

10/11/2017, 16h09
sihamnet

je vous remercie pour votre réponse, votre code marche parfaitement mais ce que je veux faire n'a rien avoir avec la barre de progression de YouTube, mais une barre de progression indépendante de YouTube, de 20 secondes qui commence à s’animer quand la vidéo de YouTube intégrée démarre.

est ce que vous pouvez m'aidez dans ce sens ?
10/11/2017, 16h19
Archimède

Donc tu veux faire une barre de progression qui démarre lorsque la vidéo se déclenche et qui donne après un compte à rebours de 20 secondes, c'est ça ? et tu stoppes la vidéo à la fin ?
10/11/2017, 16h30
sihamnet

Oui tout à fait, je veux que la barre de progression se transforme à un bouton après 20 secondes et que la vidéo se continue jusqu'à la fin, est ce que c'est possible de le faire en modifiant le code javascript que vous avez proposez?

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
 
<!DOCTYPE html>
 
<html>
<head>
    <title>jauge youTube</title>
<style>
#jauge {
  width: 90%;
  margin: 10px auto;
  height: 22px;
  background-color: #0A5F44;
}
 
#progressBar_div {
  height: 100%;
  line-height: 22px;
  width: 100%;
  background-color: #CBEA00;
}    
</style>
 
</head>
 
<body>
<div id="jauge">
  <div id="progressBar_div"></div>
</div>
   <iframe id="player" class="player" src="https://www.youtube.com/embed/5Wn85Ge22FQ?&enablejsapi=1&autoplay=0&showinfo=0&controls=0&rel=0" frameborder="0" allowfullscreen></iframe>
 
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
var barre=document.getElementById("progressBar_div");  //prise en main sous javascript de la progressBar
barre.style.visibility="hidden";  // on la cache au départ
var t=0;
const intervalTimer=100;//100 ms
 
 
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
        events: {
                 'onReady': onPlayerReady
              // 'onStateChange': onPlayerStateChange
                }
});
}
    
      
/*function onPlayerStateChange(event){
 if (event.data == YT.PlayerState.PLAYING) setInterval( function(){  progress( player.getCurrentTime(),player.getDuration() ); },100 );  //rafraichissement de la progressBar tous les 100 ms
}*/
 
function onPlayerReady(event) {
  event.target.playVideo();  //quand le lecteur est prêt, on démarre la lecture de la video
  barre.style.transform="scaleX(0)"; //on oblige la progressbar à avoir une largeur 0 au départ
  barre.style.visibility="visible"; // on la rend visible
  var timer=setInterval( function(){
                                    if (t<20) { t+=intervalTimer/1000;
                                                progress(t,20);}
                                               else{ clearInterval(timer);
                                                     document.getElementById("jauge").style.visibility="hidden";
                                                     barre.style.visibility="hidden";
                                                     //après, tu fais apparaître ton bouton...
                                                    }
                                    },intervalTimer );
  
}
 
 
 function progress(timeCurrent, timetotal) {
  var pourcentage= timeCurrent / timetotal;  //pourcentage de lecture de la video de 0 à 1 
  barre.style.transform="scaleX("+pourcentage+")";// agrandissement en x de la taille de la progress bar en fonction du pourcentage de lecture 
  barre.style.transformOrigin="left";  //repositionnement de l'origine à gauche pour la position de la barre
}
        
</script>   
</body>
</html>

bonne soirée