Surimpression sur une vidéo dans un canvas html5

videocanvas

 

Dans cet article, je vous montre comment afficher ce que vous voulez en surimpression d’une vidéo. Pour mieux comprendre, je vous invite à consulter les articles :
- JOUER UNE VIDÉO DANS UNE PAGE HTML5;
- LIRE UNE VIDÉO DANS UN CANVAS HTML5.

La palette à doudouce

Ceux qui aiment le foot et regardent les analyses d’après match connaissent probablement l’utilisation d’une palette qui consiste à crayonner en surimpression sur image.

C’est ce que je vous propose de faire maintenant.

Rien de complexe, mais un seul pré requis : la vidéo doit être en pause sans quoi tout ce que vous afficherez dans le canvas sera immédiatement effacé par l’image suivante de la vidéo.

 

Le bouton pour déclencher le dessin en surimpression dans le canvas html5

Vous allez déclencher les dessins en surimpression par le biais d’un bouton html : peu importe ce qui sera dessiné à l’écran.

Commencez par ajouter le bouton dans le code html comme ceci :

 .....
 <body>
  <video id="laVideo" src="./buck_bunny.webm" controls autoplay>Video non supportee</video>
  <canvas id="leCanvas" width="427" height="240" style="border-style:solid;">Canvas non supportee</canvas>
  <br>
  <input type="button" id="bouton" value="dessiner">
 </body>
 ....

Puis créez une fonction dessinerSurCanvas dessinant par exemple un gros cercle rouge :

 

La fonction javascript qui dessine

var dessinerSurCanvas = function() {
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  var radius = 70;
 
  canvasContext.beginPath();
  canvasContext.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  canvasContext.lineWidth = 5;
  canvasContext.strokeStyle = '#FF0000';
  canvasContext.stroke();
}

 

Association de la fonction javascript au bouton

Cette fonction est à appeler sur le click du bouton : il est donc nécessaire de récupérer en javascript l’objet button en l’affectant à une nouvelle variable bouton comme ceci :

var bouton = document.getElementById("bouton");

Association du click sur le bouton à la fonction dessinerSurCanvas :

 // appel de la fonction sur l'événement clic du bouton
 bouton.addEventListener("click", dessinerSurCanvas);

En l’état, vous n’aurez pas le temps de voir le cercle s’afficher puisque l’appel de la fonction setTimeout a toujours lieu.

Il faut donc appeler cette fonction uniquement lorsque la vidéo est en cours de visionnage. Dans le cas contraire, la vidéo étant en pause, elle affiche qu’une seule et même image.

Modifiez la fonction afficherDansCanvas afin qu’elle ne se rappelle que si la vidéo est cours de visionnage. Ce qui nous est indiqué par une nouvelle variable à créer nommée videoEnCours.

En début de script, créez et initialisez cette nouvelle variable (juste après la variable bouton) :

var videoEnCours = true;

Puis conditionnez l’appel au setTimout avec cette variable :

 // la fonction afficherDansCanvas
 var afficherDansCanvas = function() {
   canvasContext.drawImage(video, 0, 0, 427, 240);
   if ( videoEnCours )
     setTimeout(afficherDansCanvas, 0);
 }

Il faut maintenant pour stopper le rappel à afficherDansCanvas fixer la variable videoEnCours à la valeur false.

Ceci se fait lorsque la vidéo est mise en pause et donc sur l’événement pause.

Créez une nouvelle fonction stopperAffichageDansCanvas qui fixe la valeur de videoEnCours à false :

 var stopperAffichageDansCanvas = function() {
   videoEnCours = false;
 }

Puis associer cette fonction à l’événement pause de la vidéo :

// appel de la fonction stopperAffichageDansCanvas sur l'événement pause de la vidéo
video.addEventListener("pause", stopperAffichageDansCanvas);

Pour terminer, il faut remettre la variable videoEnCours à la valeur true lorsque la vidéo redémarre
et donc sur l’événement play :

// appel de la fonction afficherDansCanvas sur l'événement play de la vidéo
video.addEventListener("play", function() {
  videoEnCours = true;
  afficherDansCanvas();
});

Pour tester c’est ici : démarrez la vidéo, mettez la en pause et cliquer sur le bouton Dessiner.

Le résultat :

videocanvassurimpression

Des remarques, des améliorations, des idées, des coquilles : faites le savoir. Faites savoir si cet article vous a été utile par un commentaire ou les réseaux sociaux.

 

Un commentaire pour Surimpression sur une vidéo dans un canvas html5

Laisser une réponse

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>