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

**sihamnet** · 07/11/2017, 18h26

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

**Archimède** · 08/11/2017, 09h37

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**sihamnet** · 08/11/2017, 13h09

Merci pour votre réponse , j'a fait comme vous avez dis mais la barre de progression ne marche pas nouveau code

**Archimède** · 08/11/2017, 14h27

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...

**Archimède** · 08/11/2017, 22h17

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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...