將base64視頻畫到畫布上？

Question

如何我可以得出的base64視頻到畫布上，

var canvas = document.getElementById("myCanvas"); 
 
var ctx = canvas.getContext("2d"); 
 

 
var video = new Video(); 
 
video.onload = function() { 
 
    ctx.drawVideo(video, 0, 0); 
 
\t //ctx.fillText("Hello World", 10,50); 
 
}; 
 
video.src = "data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21....... 
 
aWxzdAAAACOpdG9vAAAAG2RhdGEAAAABAAAAAExhdmY1My4yNC4y";

我想顯示在視頻的base64一些文字。

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>

沒有Video()類和無drawVideo()方法本。您只能使用drawImage()通過每隔一段時間獲取一次屏幕，然後添加您的文本。