11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Je n'ai pas trouver de quoi donner à l'utilisateur la possibilité d'avancer sur une video d'un player html5 (fait maison).

Là j'ai une piste où je récupère la position du curseur sur la zone de lecture (enfin la barre qui montre l'avancée) et je change le currentTime.

Le truc c'est que je ne sais pas comment récupérer la position du curseur dans une div.

Quelqu'un saurait-il faire ceci ?
Ou aurait une façon plus propre de faire faire la fonctionnalité que je souhaite faire ?

Merci beaucoup
Bonjour,

Peut-être pourrais-tu t'inspirer des sliders de jQuery UI ?

Le principe est relativement simple.

Tu as une div globale qui représente le visuel. À l'intérieur tu as une seconde div dont une des extrémités représente la "progression" (donc le visuel est aussi contenu dans un div positionné en absolu, par exemple "div { right: 0 }").

Maintenant, tout le calcul se fait dans la div représenta la progession au travers de son width qui sera géré en pourcentage ("width: 67%;"). Tu n'as alors qu'à récupérer le width de cet élément pour le transposer dans ton application.

En tout cas, c'est une solution comme une autre !
Modifié par Vaxilart (09 Mar 2012 - 02:15)
Vaxilart a écrit :
Bonjour,

Peut-être pourrais-tu t'inspirer des sliders de jQuery UI ?

Le principe est relativement simple.

Tu as une div globale qui représente le visuel. À l'intérieur tu as une seconde div dont une des extrémités représente la "progression" (donc le visuel est aussi contenu dans un div positionné en absolu, par exemple "div { right: 0 }").

Maintenant, tout le calcul se fait dans la div représenta la progession au travers de son width qui sera géré en pourcentage ("width: 67%;"). Tu n'as alors qu'à récupérer le width de cet élément pour le transposer dans ton application.

En tout cas, c'est une solution comme une autre !


merci de ta réponse Smiley smile
c'est ainsi que je fais pour afficher les % de progressions, mais comment détecter si le clic de la souris est à 50% de la div par exemple ?