Draw base64 video to canvas?

Question

How to i can draw base64 video to the canvas ,

 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var video = new Video(); video.onload = function() { ctx.drawVideo(video, 0, 0); //ctx.fillText("Hello World", 10,50); }; video.src = "data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21....... aWxzdAAAACOpdG9vAAAAG2RhdGEAAAABAAAAAExhdmY1My4yNC4y"; 

I want to show some text over base64 video.

Answer 1

 $(function() { var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var video = document.createElement("VIDEO"); video.setAttribute("src","http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv"); video.play(); video.addEventListener('play', function() { var $this = this; //cache (function loop() { if (!$this.paused && !$this.ended) { ctx.drawImage($this, 0, 0); ctx.fillText("Hello World", 10,50); setTimeout(loop, 1000 / 30); // drawing at 30fps } })(); }, 0); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="theater"> <canvas id="canvas"></canvas> </div> 

There is no Video() class and no drawVideo() method present. You can only do using drawImage() by getting screen every interval, then add your text.