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

Answer 2

Seems like if you've used popcorn to setup an video element like var pop = Popcorn(#videoElementId); then called some methods on it like pop.footnote({...}) or what have you, then you need to just delete the code that set them up, so they're not there anymore.

If instead you're asking okay I made a footnote show, and now I want to replace it, or hide it, then you probably need to add another cue that targets the same div element that you wanted to replace. Try a footnote with text set to and empty string.