Discussion :

[cjacquel]

Bonjour,

J'ai une vidéo dans une balise Vidéo.

Comment dessiner un graphique sur la vidéo qui évolue avec les frames de la vidéo ?

Merci,
Christophe,

[Bovino]

Euh... en HTML ?

[cjacquel]

HTML5/JS

[Bovino]

Oui, donc ce sera en fait du JavaScript
discussion déplacée.

Dans l'idée, tu peux essayer d'utiliser un <canvas> que tu positionnes par-dessus la vidéo, mais pour synchroniser l'animation de ton canvas avec la vidéo, ça risque d'être largement compliqué...
Sincèrement, je ne pense pas que JavaScript soit vraiment adapté à ce genre de demande...

[SpaceFrog]

même en optant pour la solution canvas au dessus de la vidéo qui ne me parait à la base pas viable ... je vois mal comment synchroniser les deux ...

le plus fiable me semblerait de décomposer la video avec bink et de superposer tes graphiques sur les frames de la video et recompiler le video

[Invité]

en utilisant un canvas vue que l'on doit passer par un setTimeout on peut controler l'affichage de la video apres il faut voir le format des donnés, il risque aussi d'y avoir un decalage du son, et a voir aussi la fluidité de l'ensemble

[Bovino]

vue que l'on doit passer par un setTimeout

Ou mieux, par requestAnimationFrame.

[Invité]

si l'evolution du graphique est constant ce qu'il faudrait c'est recupere la duree de la video en seconde et la divisé par le nombre de frame ou la distance lineaire du graph (x si horizontal)ce qui donnera la distance parcouru par seconde et si on veut plus de fluidité c'est comme au cinema 25 images par secondes on redivise donc par 25 et on met un timer a 40 milliseconde (1000/25=40). ce doit être quelque chose comme ca.

[SylvainPV]

On peut repérer la position en cours de la vidéo comme ceci :

Code :

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

1
2
3
4
var video = document.querySelector("video");
video.addEventListener("timeupdate", function(){
   console.log(video.currentTime);
});

video.currentTime retourne un nombre décimal en secondes, avec une précision à 3 chiffres derrière la virgule sur Chrome. Ça devrait être suffisant pour synchroniser ton animation.