Popcorn.js - How do I remove a cue?

Question

I have added several cues to a video using popcorn JS.

How do I remove or modify a specific cue?

Answer 1

Once you've added a cue to your Popcorn instance, you can remove it the same way you remove any plugin event, with the removeTrackEvent method.

popcorn.removeTrackEvent(eventId);

The trick is getting the id of the event you want to remove. Popcorn doesn't really provide an easy way to search for track events, so you'll want to get the id and hold on to it at the time the event is created.

popcorn.cue(1, function() {
   console.log('Do that voodoo.');
});
var eventId = popcorn.getLastTrackEventId();
// some time later...
popcorn.removeTrackEvent(eventId);

The Popcorn API was originally designed to be chainable, so the cue method returns the Popcorn instance. That's why you need the separate call to getLastTrackEventId.

If you want to modify a cue, it depends on whether you want to take the same function and move it...

popcorn.cue(eventId, 2); //move it to 2 seconds

Or change the function:

popcorn.cue(eventId, function() { console.log('hi!'); }); //time stays the same