Appeler une valeur avec JS dans un attribut HTML [JS - API Youtube - MDL - JQuery]

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:

---

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

---

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

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


Merci,

Marc

Code:

---

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(); } });

---

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:

---

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); }

---