1

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 ?

Adrien Castagliola
  • 911
  • 2
  • 11
  • 30
  • preload must have a value (f.ex. `preload="auto"`). Where is currentFrame defined? (the browser doesn't expose frames though, only time in seconds). Where are copyVideoToCanvas and initVideo called from? (I assume there is some createjs code that isn't shown?) –  Feb 02 '17 at 15:20
  • Setting video.currentTime is also async and not necessairly realtime (see f.ex. [this answer](http://stackoverflow.com/a/19176124/1693593) - you can also test the demo in the comments in Chrome to see if it produce the same issue). –  Feb 02 '17 at 15:23
  • Thanks for the answer, I edited my code @K3N – Adrien Castagliola Feb 02 '17 at 15:36

0 Answers0