popcorn.js start and stop times

Question

Just started having a look at popcorn.js but having some trouble.

I've got a 30 second track,

however I'd like the file to start playing from 2 seconds in, and stop playing 3 seconds before the end.

Does anybody know if this is possible as I couldn't find it in the documentation?

Either that or is there a command to jump to a point in the timeline, so almost like

pop.playAt('2 second');

something like that?

Thanks

Answer 1

There are two simple steps here: 1) Advance the video to two seconds in 2) Make sure it stops at 27 seconds (30 - 3)

To advance the video, you can use the currentTime method, but you will run into an error if you try to set currentTime before the video metadata has loaded. (When you first set up a video, the browser doesn't know what the duration is until it gets the header, and you can't set currentTime later than the duration.)

var popcorn = Popcorn('#video');
if (popcorn.duration()) {
  popcorn.currentTime(2);
} else {
  popcorn.on('loadedmetadata', function() {
    popcorn.currentTime(2);
  }
}

Now, to make sure the video stops at 27 seconds, you can use the "cue" method, which takes a number of seconds and a callback function to fire at that time.

popcorn.cue(27, function() {
  popcorn.pause();
});

Now, by default, Popcorn fires events when it receives a "timeupdate" event from the video, which is usually every 1/4 second (250ms). So you may see the video run a few frames long. (e.g., it might stop at 27.1 seconds). If you need better accuracy, use the frameAnimation option, which makes popcorn try to update up to 60fps (every 16ms).

var popcorn = Popcorn('#video', {
  frameAnimation: true
});

You can also save loading time by telling the browser to only ask the web server for the part of the video you need, by appending a hint in the form of an anchor to the URL.

http://example.com/videos/myvideo.webm#t=2,27

This depends on support from the browser and the web server, but it can't hurt.

Edit: Actually, don't use frameAnimation here. The problem is that it uses requestAnimationFrame, and you can't guarantee that it will be called if your browser tab is not visible. It makes sense for animations, but not here. I will probably propose a fix for this in popcorn.js.