11484 sujets

JavaScript, DOM et API Web HTML5

Si je veux afficher une image sur un canvas, je peux faire comme ça, sans afficher cette image d’abord :
        
        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 ?