HTML5 Canvas के अंदर वीडियो प्रदर्शित करें

Canvas में वीडियो रेंडरिंग

HTML5 Canvas के अंदर वीडियो प्रदर्शित करने के लिए निम्नलिखित कोड स्निपेट आज़माएं।

var canvas1 = document.getElementById('canvas');
var context = canvas1.getContext('2d');
var video = document.getElementById('video');

video.addEventListener('play', function () {
    var $this = this;
    (function loop() {
        if (!$this.paused && !$this.ended) {
            context.drawImage($this, 0, 0);
            setTimeout(loop, 1000 / 30); // ~30 FPS
        }
    })();
}, 0);

यह वीडियो फ्रेम्स को Canvas पर ~30 FPS पर ड्रॉ करने के लिए एक रेंडर लूप बनाता है।