Popcorn.js Documentation

Players - deprecated

Players are deprecated, it is advised to use Media Wrappers instead.

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, and SoundCloud. This creates the potential for various media 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
2
3
4
5
6
7
8
9
10
11
12
13

    Popcorn.player( "baseplayer" );

    var pop = Popcorn( "elementID" );

    pop.play();

    // Add popcorn events here and other functionality
    pop.footnote({
      start: 1,
      end: 5,
      text: "Works with the baseplayer!",
      target: "footnote-div"
    });

Live demo of how to use the baseplayer

soundcloud( id, url )

Purpose

The SoundCloud player allows the use of any SoundCloud audio tracks with the Popcorn.js framework.

The SoundCloud 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 SoundCloud instance of Popcorn will work normally like any other Popcorn instance.

Options

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

  • url [String] - the url of the SoundCloud audio track you wish to use

  • Note - Currently SoundCloud does not support all of the events that the HTML5 media elements do, view the full list of events for more details

Examples

1
2
3
4
5
6
7
8
9
10

    var pop = Popcorn.soundcloud( "#video", "http://soundcloud.com/lilleput/popcorn" );

    pop.footnote({
      start: 1,
      end: 5,
      text: "Works with SoundCloud!",
      target: "footnote-div"
    });

    pop.play();

Live demo of the SoundCloud player

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
2
3
4
5
6
7
8
9
10

    var pop = Popcorn.vimeo( "#video", "vimeoURL" );

    pop.footnote({
      start: 1,
      end: 5,
      text: "Works with vimeo!",
      target: "footnote-div"
    });

    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
2
3
4
5
6
7
8
9
10

    var pop = Popcorn.youtube( "#video", "http://www.youtube.com/watch?v=9oar9glUCL0" );

    pop.footnote({
      start: 1,
      end: 5,
      text: "Works with youtube!",
      target: "footnote-div"
    });

    pop.play();

Live demo of the YouTube player