如何从视频标签中将视频绘制到画布? (Chrome问题)

时间:2017-02-02 14:16:23

标签: javascript html video canvas createjs

我需要使用Createjs Ticker从视频中显示视频到画布,以导航到视频时间轴。我使用currentFrame / FPS来获取视频标签的可读时间。在Safari中,它的工作正常,但在Chrome中,视频滞后,我的画布没有更新。 Ticker设置为25 FPS。

这是我的HTML:

var script = document.createElement( 'script' );
                script.type = 'text/javascript';
                script.innerHTML = "var x = '-----BEGIN CERT\nMIIDvTCCAqWgAsdfsdfTAktS\nMR4wHAYDVQQKExVTb2Z0Zm9ydW0gQ29yc45656b24xHjAcBgNVBAsTFVNlY3Vy\naXR5IFJORCBEaXZpc2lvbjEcMBoGA1UEAxMTU29mdGZvcnVtIFB1YmxpYyBDQTE\nODQzMzhaFw0yMj45645gNVBAYTAktSMREwDwYDVQQKDAhq\ncG1vcmdhbjER\n-----END CERT-----\n;';";
                $("body").append( script );

这是我的JS:

<video id="video" autoplay controls preload="auto" muted width="1280" height="720">
    <source src="video.mp4" type="video/mp4" >
</video> 

我修改了Animate cc代码:

var video;
var first = true;
var first_2 = true

document.addEventListener('DOMContentLoaded',initVideo,false);

function initVideo() {
  video = document.getElementById("video");
  video.addEventListener('canplaythrough', function() {
    if(first){
      first = false;
      init(); // Create Ticker
    }
  },false);

    video.addEventListener('play', function() {
      if(first_2){
        first_2 = false;
        video.pause();
      }
  });
}

function copyVideoToCanvas() {
    video.currentTime = currentFrame/25;
    exportRoot.videoBase.removeAllChildren();
    var btmp = new createjs.Bitmap(video);
    exportRoot.videoBase.addChild(btmp);
}

有什么想法吗?

0 个答案:

没有答案