VideoEditorJS - Blog

Editeur de vidéo en ligne 100% HTML5/JAVASCRIPT

Gestion des pistes

C'est une des parties les plus complexes du projet après le rendu, il ne s'agit pas seulement de la création des pistes mais aussi du déplacement des éléments sur les pistes fait à partir du canvas.


Le canvas est une zone de dessin vectorielle et s'utilise avec la balise CANVAS. Il y a donc un élement canvas pour chaque piste où seront dessinés les élements.

  • Création des pistes

    La fonction d'ajout des pistes s'est compliquée depuis que la fonction de chargement des projets est en place, en effet, l'ajout d'une piste se fait par deux (piste vidéo et audio) mais lors du chargement du projet et pour éviter de créer une nouvelle fonction, le chargement des pistes se fait une par une.

  • Ajout des élements

    Les élements sont toujours source d'erreur, non pas pour leur ajout mais pour leur positionnement sur la piste. Les positions changent en permanence lors du déplacement sur la piste et il faut vérifier s'il n'y à pas d'autres élements, dans ce cas il y aura une collision.
    Pour effectuer ces déplacement, nous utilisons les évènements.