Question

如何将base64视频绘制到画布上，

＆＃13;

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

＆＃13;

我想在base64视频上显示一些文字。

Answer 1

＆＃13;

$(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);
});

＆＃13;

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

＆＃13;

没有Video()类，也没有drawVideo()方法。您只能通过每隔一段时间获取屏幕来使用drawImage()，然后添加您的文本。

将base64视频绘制到画布？

1 个答案: