我需要使用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);
}
有什么想法吗?