Si je veux afficher une image sur un canvas, je peux faire comme ça, sans afficher cette image d’abord :
Je peux afficher une vidéo dans un canvas comme ça :
Mais je suis obligé de garder la vidéo originale affichée, sans ça, la vidéo sur le canvas est gelée. Si je n’affiche pas du tout la balise vidéo, le canvas reste gelé à la première image.
Quelqu’un connaîtrait le moyen de contourner cette contrainte ?
var image = new Image();
image.src = "images/panthere_neige.jpg" ;
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
image.onload = function() {
var largeur = 300;
var coeff = largeur / image.width;
image.width = largeur;
image.height = image.height * coeff;
document.getElementById("imageContainer").appendChild(canvas);
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0, canvas.width, canvas.height);
}
Je peux afficher une vidéo dans un canvas comme ça :
var video = document.createElement('video');
video.src = "videos/guepard.mp4";
videoContainer = document.getElementById('container');
videoContainer.appendChild(video);
video.width = 300;
video.id = "video";
video.autoplay = true;
video.controls = true;
video.loop = true;
video.muted = true;
var videoCanvas = document.getElementById('videoCanvas');
var videoContext = videoCanvas.getContext('2d');
intervall = window.setInterval(function() {
videoContext.drawImage(video, 0, 0, 300, 170)
}, 20);
Mais je suis obligé de garder la vidéo originale affichée, sans ça, la vidéo sur le canvas est gelée. Si je n’affiche pas du tout la balise vidéo, le canvas reste gelé à la première image.
Quelqu’un connaîtrait le moyen de contourner cette contrainte ?