I need to display a video to canvas from video using the Createjs Ticker to navigate to the video timeline. I use the currentFrame/FPS to get readable time for my video tag. In Safari it's working fine but in chrome, video is lagging and my canvas is not updated. Ticker is set to 25 FPS.
Here is my HTML :
<video id="video" autoplay controls preload="auto" muted width="1280" height="720">
<source src="video.mp4" type="video/mp4" >
</video>
Here is my JS :
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);
}
I modify the Animate cc code :
this.frame_0 = function() {
root = this;
root.addEventListener("tick", tick);
function tick(evt){
copyVideoToCanvas(time(root.currentFrame));
}
function time(t) {
return t/25;
}
}
Any ideas ?