Popcorn.js Documentation

Players

Players allow Popcorn to be used with various other types of media other than HTML5 video and audio. This means it can be used with YouTube, Vimeo, SoundCloud, and many more. This creates the potential for various media across to be incorporated with Popcorn.js.

baseplayer( id )

Purpose

The baseplayer is used to provide the user with an empty shell which emulates the HTML5 video element. This allows the user to use Popcorn.js even without a media element ( video or audio ) which allows for events to be fired off just like your typical Popcorn instance. All events, functions, and properties that Popcorn provides are extended onto the baseplayer for convenience.

Options

  • id [String] - just like using a video or audio source, you pass along the id of the HTML element which the baseplayer will use ( in the form of “#id”, where id is the id of your element )

Use Cases

The baseplayer has numerous use cases, such as :

  • Wanting to use popcorn without a media
  • Creating a bigger global timeline in which numerous smaller popcorn instances are created from
  • Used to create a new Popcorn player plugin, as all new players inherit from the baseplayer ( see this detailed guide on creating a player plugin )

Examples

 1     Popcorn.player( "baseplayer" );
 2 
 3     var pop = Popcorn( "elementID" );
 4 
 5     pop.play();
 6 
 7     // Add popcorn events here and other functionality
 8     pop.footnote({
 9       start: 1,
10       end: 5,
11       text: "Works with the baseplayer!",
12       target: "footnote-div"
13     });

Live demo of how to use the baseplayer

vimeo( id, url )

Purpose

The Vimeo player allows the use of any vimeo video with the Popcorn.js framework.

The Vimeo player plugin allows for the use of all functions and properties that it inherits from the baseplayer ( play, pause, volume, mute, etc ). This means that once created, your vimeo instance of Popcorn will work normally like any other Popcorn instance.

Options

  • id [String] - the id of the HTML element that the youtube player will populate

  • url [String] - the url of the vimeo video you wish to use

  • Note - Things like width and height are inherited from the HTML element that the player is populating, and if are not present, default to a width of 350px and a height of 300px

Examples

 1     var pop = Popcorn.vimeo( "#video", "vimeoURL" );
 2 
 3     pop.footnote({
 4       start: 1,
 5       end: 5,
 6       text: "Works with vimeo!",
 7       target: "footnote-div"
 8     });
 9 
10     pop.play();

Live demo using vimeo

youtube( id, url )

Purpose

The YouTube player allows the use of any Youtube video with the Popcorn.js framework.

The YouTube player plugin allows for the use of all functions and properties that it inherits from the baseplayer ( play, pause, volume, mute, etc ). This means that once created, your YouTube instance of Popcorn will work normally like any other Popcorn instance.

Options

  • id [String] - the id of the HTML element that the YouTube player will populate

  • url [String] - the url of the YouTube video you wish to use

  • Note - Things like width and height are inherited from the HTML element that the player is populating, and if are not present, default to a width of 350px and a height of 300px

  • Other YouTube options such as showing Youtube controls, showing related links at the end and so on, are passed in via the query string that is appended to the YouTube video url. Take a look at this documentation for further information.

Examples

 1     var pop = Popcorn.youtube( '#video', 'http://www.youtube.com/watch?v=9oar9glUCL0' );
 2 
 3     pop.footnote({
 4       start: 1,
 5       end: 5,
 6       text: "Works with youtube!",
 7       target: "footnote-div"
 8     });
 9 
10     pop.play();

Live demo of the YouTube player