Zeichnen Sie Base64-Video auf Canvas?

Question

Wie ich base64 Video auf die Leinwand ziehen,

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";

Ich möchte einen Text über base64 Video zeigen.

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>

Es gibt keine Video() Klasse und kein drawVideo() Verfahren vorhanden. Sie können nur drawImage() verwenden, indem Sie in jedem Intervall den Bildschirm aufrufen und dann Ihren Text hinzufügen.