Discussion :

[M_DNL]

Hello,

Je suis débutant JS, donc merci de me reprendre si mon vocabulaire est mauvais ou imprécis...

Mon projet utilise l'API Youtube, le plugin JQuery RochestB et la librairie Material Design Lite. Si mon message doit plutôt être posté dans la catégorie JQuery, merci également de me le dire. Je penses que l'origine du problème est lié à une erreur de syntaxe JS.


Je bosse sur de l'intégration de videos Youtube sur une page, et j'ai commencé à créer une barre de contrôle indépendante (pas celle de Youtube).
Pour l'instant tout est ok, j'arrive à mettre ma vidéo en pause, passer à la vidéo suivante etc...


Mais là j'essaie d'intégrer la barre de "temps", je ne connais pas le nom de l'élément, mais la barre qui indique où on est rendu dans la vidéo et qui permet d'avancer dans la vidéo en déplaçant le sélecteur.


L'idée est d'intégrer une barre horizontale (MDL slider range) et de remplacer la valeur MAX par la durée de la vidéo en cours de lecture, et la valeur VALUE par la position actuelle dans la vidéo.

Ma barre : HTML :

Code :

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

<input class="mdl-slider mdl-js-slider" type="range" id="s0" min="0" max="???" value="???" step="1">

L'API Youtube permet de récupérer la durée de vidéo en cours de lecture en secondes ( player.getDuration():Number ) et la position dans la vidéo en secondes ( player.getCurrentTime():Number ). plus d'infos

Mon code JS :

Code :

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

1
2
3
4
5
6
<script>
$("#s0").attr({
   "max" : var player=$('#video').data('ytPlayer').player; player.getDuration():;
   "value" : var player=$('#video').data('ytPlayer').player; player.getCurrentTime():;
});
</script>

Ne fonctionne pas. Je penses que ma syntaxe est mauvaise, si un truc vous saute au yeux dans mon code...

Si vous connaissez quelqu'un capable de trouver la solution à mon problème, n'hésitez pas à lui partager mon poste


Merci,

Marc

[danielhagnoul]

Code :

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

1
2
3
4
$("#s0").attr({
   "max" : function(){ var player=$('#video').data('ytPlayer').player; return player.getDuration(); },
   "value" : function(){ var player=$('#video').data('ytPlayer').player; return player.getCurrentTime(); }
});

[M_DNL]

Merci @danielhagnoul , mais ça ne fonctionne toujours pas.

J'ai essayé en rafraîchissant la fonction toute les secondes, ne marche pas non plus..

Code :

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

1
2
3
4
5
6
7
8
9
10
 
    function setCursor() {
        $("#s0").attr({
   "max" : function(){ var player=$('#video').data('ytPlayer').player; return player.getDuration(); },
   "value" : function(){ var player=$('#video').data('ytPlayer').player; return player.getCurrentTime(); }
});
 
    console.log("1 second");
    setTimeout(setCursor, 1000);
}