Popcorn.js Documentation

Plugins

Plugins add additional functionality to the users Popcorn video. They bring a large set of additional features from across the web, such as GoogleMaps, Facebook, Twitter, and many more. In doing so, users can add additional content from these web services and begin to create Popcorn experiences.

Attribution

Purpose

Allows the user to add proper attribution to the various sources used on the current page. In the most basic sense, the attribution plugin adds text to a specified area on the page.

Options

  • start [Number] - is the time [in seconds] that you want this plug-in to execute
  • end [Number] - is the time [in seconds] that you want this plug-in to stop executing
  • target [String] - is the id of the document element that the text needs to be attached to, this target element must exist on the DOM
  • nameofwork [String] - is the title of the attribution
  • nameofworkurl [String] - is a url that provides more details about the attribution
  • copyrightholder [String] - is the name of the person/institution that holds the rights to the attribution
  • copyrightholderurl [String] - is the url that provides more details about the copyright holder
  • license [String] - is the type of license that the work is copyrighted under
  • licenseUrl [String] - is the url that provides more details about the license type

Example

1
2
3
4
5
6
7
8
9
10
11

    var pop = Popcorn( "#video" );

    pop.attribution({
      start: 0,
      end: 10,
      nameofwork: "A Shared Culture",
      copyrightholder:"Jesse Dylan",
      license: "CC-BY-N6",
      licenseurl: "http://creativecommons.org/licenses/by-nc/2.0/",
      target: "attribdiv"
    });

Live demo of the attribution plugin

Code

Purpose

The Code plugin allows the user to run arbitrary JavaScript code according to video timing.

Options

  • start [Number] - is the time [in seconds] that you want this plugin to execute.
  • end [Number] - is the time [in seconds] that you want this plugin to stop executing.
  • onStart [Function] - the function to be run when the start time is reached.
  • onFrame [Function] - a function to be run on each paint call (e.g., called ~60 times per second) between the start and end times.
  • onEnd [Function] - a function to be run when the end time is reached.

Example

1
2
3
4
5
6
7
8
9
10
11
12

    var pop = Popcorn( "#video" );

    pop.code({
      start: 1,
      end: 3,
      onStart: function( options ) {
        document.getElementById( "test1" ).innerHTML = "Yes";
      },
      onEnd: function( options ) {
        document.getElementById( "test1" ).innerHTML = "No";
      }
    });

Live demo of the code plugin

Facebook

Purpose

The facebook plugin allows the user to bring popular aspects from facebook and display them to the user between a given start and end time. Features a like box, a stream of a user’s friends, comments on a specific post, and many more.

Options

  • Sets options according to user input or default values

  • type [String] - is the name of the plugin in fbxml format. Options: LIKE (default), LIKE-BOX, ACTIVITY, FACEPILE
  • target [String] - is the id of the document element that the text needs to be attached to. This target element must exist on the DOM
  • start [Number] - is the time [in seconds] that you want this plug-in to execute

  • end [Number] - is the time [in seconds] that you want this plug-in to stop executing

  • Other than the mandatory four parameters, there are several optional parameters (Some options are only applicable to certain plugins)

  • action [String] - like button will either “Like” or “Recommend”. Options: recommend / like (default)
  • always_post_to_friends [Boolean] - live-stream posts will be always be posted on your facebook wall if true. Options: true / false (default)
  • border_color [String] - border color of the activity feed. Names (i.e: “white”) and html color codes are valid
  • colorscheme [String] - changes the color of almost all plugins. Options: light (default) / dark
  • event_app_id [String] - an app_id is required for the live-stream plugin
  • font [String] - the font of the text contained in the plugin. Options: arial / segoe ui / tahoma / trebuchet ms / verdana / lucida grande
  • header [Boolean] - displays the title of like-box or activity feed. Options: true / false (default)
  • href [String] - url to apply to the plugin. Default is current page
  • layout [String] - changes the format of the ‘like’ count (written in english or a number in a callout). Options: box_count / button_count / standard (default)
  • max_rows [Number] - number of rows to disperse pictures in facepile. Default is 1
  • recommendations [Boolean] - shows recommendations, if any, in the bottom half of activity feed. Options: true / false (default)
  • show_faces [Boolean] - show pictures beside like button and like-box. Options: true / false (default)
  • site [String] - href for activity feed. No idea why it must be “site”. Default is current page
  • stream [Boolean] - displays the latest posts from the specified page’s wall. Options: true / false (default)
  • type [String] - determines which plugin to create. Case insensitive
  • xid [String] - unique identifier if more than one live-streams are on one page

Example

1
2
3
4
5
6
7
8
9
10

    var pop = Popcorn( "#video" );

    pop.facebook({
      type: "live-stream",
      target: "activitydiv",
      start: 1,
      end: 10,
      // id is from example http://developers.facebook.com/docs/reference/plugins/live-stream/
      event_app_id: 174243249296725
    });

Live demo of the facebook plugin;

Flickr

Purpose

The Flickr plugin allows the user to hook into the popular picture hosting site and retrieve images based on user, search term, and provided dimensions.

Options

  • start [Number] - is the time [in seconds] that you want this plug-in to execute
  • end [Number] - is the time [in seconds] that you want this plug-in to stop executing
  • userid [String] - is the id of who’s Flickr images you wish to show
  • tags [String] - is a mutually exclusive list of image descriptor tags
  • username [String] - is the username of who’s Flickr images you wish to show. Using both userid and username is redundant. An api_key is required when using username
  • apikey [String] - is your own api key provided by Flickr
  • target [String] - is the id of the document element that the images are appended to, this target element must exist on the DOM
  • numberofimages [Number] - specify the number of images to retrieve from Flickr, defaults to 4
  • height [String] - the height of the image, defaults to ‘50px’
  • width [String] - the width of the image, defaults to ‘50px’
  • padding [String] - number of pixels between images, defaults to ‘5px’
  • border [String] - border size in pixels around images, defaults to ‘0px’

Example

1
2
3
4
5
6
7
8

    var pop = Popcorn( "#video" );

    pop.flickr({
      start: 5,
      end: 15,
      userid: "35034346917@N01",
      target: "flickrdiv"
    });

Footnote

Purpose

Adds text to an element on the page.

Options

  • start [Number] - is the time [in seconds] when you want the footnote to appear.
  • end [Number] - is the time [in seconds] when you want the footnote to become hidden.
  • text [String] - The text you want to appear in the target.
  • target [String] - The id of the document element that the text is to be attached to. This target element must exist on the DOM

Example

1
2
3
4
5
6

    var p = Popcorn( "#video" ).footnote({
      start: 5,
      end: 15,
      text: 'This text will appear in "target". ',
      target: "footnotediv"
    });

GML

Purpose

Renders a GML (Graffiti Markup Language) tag inside an HTML element

Options

  • start [Number] - is the time [in seconds] that you want this plug-in to execute
  • end [Number] - is the time [in seconds] that you want this plug-in to stop executing
  • target [String] - is the id of the document element that you wish to render the graffiti in
  • gmltag [Number] - is the numerical reference to a gml tag via 000000book.com

Example

1
2
3
4
5
6
7
8

    var pop = Popcorn( "#video" );

    pop.gml({
      start: 0,
      end: 5,
      gmltag: "29582",
      target: "gmldiv"
    });

Live demo of the gml plugin

Googlemap

Purpose

Adds a map to the target div centered on the location specified by the user. See below for a variety of map options.

New for 1.5.12: The Google Maps API now requires an API key in order to load. We recommend setting the API key globally before popcorn events are loaded, using the .defaults() method of the Popcorn object. Here is an example:

var p = Popcorn( "#video" )
  .defaults ('googlemap', {
    target: 'map',
    apiKey: 'YOUR_API_KEY_HERE'
})

It is of course also possible to set the API Key individually for each map, but the API will in any case only ever be loaded once, so all calls to the mapping API will be attributed to the same maps user.

See the Google Maps API docs for instructions on how to create an API key and set permissions appropriately.

Options

  • start [Number] - is the time [in seconds] when you want the Googlemap to appear.
  • end [Number] - is the time [in seconds] when you want the Googlemap to become hidden.
  • target [String] - Target is the id of the DOM element that you want the map to appear in. This element must be in the DOM
  • apiKey [String] - is your own Google Maps API Key, required as of June 11, 2018 (new parameeter as of 1.5.12)
  • type [String, optional] - either: HYBRID (default), ROADMAP, SATELLITE, TERRAIN, STREETVIEW
  • zoom [Number, optional] - defaults to 0
  • heading [Number, optional] - STREETVIEW orientation of camera in degrees relative to true north (0 north, 90 true east, etc)
  • pitch [Number, optional] - STREETVIEW vertical orientation of the camera (between 1 and 3 is recommended)
  • lat [Number] - The Latitude that the map should be centered on.
  • lng [Number] - The Longitude that the map should be centered on. (NOTE: Lat and Lng bust be specified if no Location is provided.)
  • location [String] - An address/location to center the map on. Must be present if lat and lng are not specified.
  • onmaploaded [Function, optional] - A callback function that gets fired once the map has loaded. The callback function also receives the options object as well as a reference to the map object.

Note: using location requires extra loading time, also not specifying both lat/lng and location will cause and error.

Tweening

Tweening animates a streetview from one location to another.

  • location [String] - The start point when using an auto generated route
  • interval [Number] - is the speed in which the tween will be executed, a reasonable time is 1000 (time in milliseconds)
  • heading, Zoom, and Pitch [Number] - streetview values are also used in tweening with the autogenerated route (see above)
  • tween [Object] - An array of objects, each containing data for one frame of a tween
  • position [Object] - An object with two keys, lat and lng, both which are mandatory for a tween to work
  • pov [Object] - An object which houses heading, pitch, and zoom paramters, which are all optional, if undefined, these values default to 0

Example

1
2
3
4
5
6
7
8

    var p = Popcorn( "#video" ).googlemap({
      start: 5,
      end: 15,
      type: "ROADMAP",
      target: "map",
      lat: 43.665429,
      lng: -79.403323
    });

1
2
3
4
5
6
7
8
9
10
11

    var p = Popcorn( "#video" ).googlemap({
      start: 1,
      end: 5,
      type: "STREETVIEW",
      target: "map2",
      location: "Toronto, Ontario, Canada",
      onmaploaded: function( options, map ) {
        // map is a reference to the actual map object
        // options is the options object that was passed in initially
      }
    });

Image

Purpose

Show an image inside a given element on the page.

Options

  • start [Number] - is the time [in seconds] that you want this plug-in to execute
  • end [Number] - is the time [in seconds] that you want this plug-in to stop executing
  • href [String] - is the url of the destination of a link - optional
  • target [String] - is the id of the document element that the iframe needs to be attached to, this target element must exist on the DOM
  • src [String] - is the url of the image that you want to display
  • text [String] - is the overlayed text on the image - optional

Example

1
2
3
4
5
6
7
8
9
10
11
12
13

 
    var pop = Popcorn( "#video" );

    pop.image({
      // seconds
      start: 5,
      // seconds
      end: 15,
      href: "http://www.drumbeat.org/",
      src: "https://www.drumbeat.org/media//images/drumbeat-logo-splash.png",
      text: "DRUMBEAT",
      target: "imagediv"
    });

Live demo of the image plugin

Lastfm

Purpose

Appends information about a LastFM artist to an element on the page.

Options

  • start [Number] - is the time [in seconds] that you want this plug-in to execute
  • end [Number] - is the time [in seconds] that you want this plug-in to stop executing
  • artist [String] - is the name of who’s LastFM information you wish to show
  • target [String] - is the id of the document element that the images are appended to, this target element must exist on the DOM
  • apiKey [String] - is the API key registered with LastFM for use with their API

Example

1
2
3
4
5
6
7
8
9
10

 
    var pop = Popcorn( "#video" );

    pop.lastfm({
      start: 5,
      end: 15,
      artist: "yacht",
      target: "lastfmdiv",
      apikey: "30ac38340e8be75f9268727cb4526b3d"
    });

Live demo of the lastfm plugin

Linkedin

Purpose

Places a LinkedIn plugin inside a div

Options

  • start [Number] - is the time [in seconds] that you want this plug-in to execute
  • end [Number] - is the time [in seconds] that you want this plug-in to stop executing
  • target [String] - is the id of the document element that the plugin needs to be attached to, this target element must exist on the DOM
  • type [String] - is the name of the plugin, options are share, memberprofile, companyinsider, companyprofile, or recommendproduct
  • apikey [String] - is your own api key from obtained from https://www.linkedin.com/secure/developer
  • url [String] - is the desired url to share via LinkedIn. Defaults to the current page if no url is specified
  • counter [String] - is the position where the counter will be positioned. This is used if the type is “share” or “recommendproduct”. The options are right and top (don’t include this option if you do not want a counter)
  • format [String] - is the data format of the member and company profile plugins. The options are inline, hover, and click. Defaults to inline
  • companyid [String] - must be specified if the type is “companyprofile,” “companyinsider,” or “recommendproduct”
  • productid [String] - must be specified if the type is “recommendproduct”

Example

1
2
3
4
5
6
7
8
9
10
11
12

 
    var pop = Popcorn( "#video" );

    pop.linkedin({
      type: "share",
      counter: "right",
      url: "http://www.google.ca",
      target: "sharediv",
      apikey: "ZOLRI2rzQS_oaXELpPF0aksxwFFEvoxAFZRLfHjaAhcGPfOX0Ds4snkJpWwKs8gk",
      start: 1,
      end: 4
    });

Live demo of the linkedin plugin

Lowerthird

Purpose

Displays information about a speaker over the video, or in the target div

Options

  • start [Number] - is the time [in seconds] that you want this plug-in to execute
  • end [Number] - is the time [in seconds] that you want this plug-in to stop executing
  • target [String] - is the id of the document element that the content is appended to, this target element must exist on the DOM
  • salutation [String] - is the speaker’s honorific, e.g.: Mr., Ms., Dr., etc.
  • name [String] - is the speaker’s name.
  • role [String] - is information about the speaker, e.g.: Engineer.

Example

1
2
3
4
5
6
7
8
9
10

 
    var pop = Popcorn( "#video" );

    pop.lowerthird({
      start: 5,
      end: 15,
      salutation: "Mr",
      name: "Hyde",
      role: "Monster"
    });

Live demo of the lowerthird plugin

Manifest

Purpose

Manifests are used by our authoring tool Popcorn-Maker to create meaningful editors.

Manifests are simply objects that contain data about who wrote the plugin, each option the plugin exposes (start, end, target, etc.), as well as defining what type of element is best used to represent the specified option in the editor (input, select, dropdown, etc.) and the corresponding data for each of those elements (an array of data for select and dropdown, text for input, etc.).

Options

  • about [Object] - an object that defines who wrote this plugin
  • options [Object] - an object containing various other objects for each option that is passed on to the user

Use Case

You want your plugin to be used in butter

Examples

The following example shows what a manifest might look like (the googlemaps manifest in this example)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

 
    {
      about: {
        name: "Popcorn Google Map Plugin",
        version: "0.1",
        author: "@annasob",
        website: "annasob.wordpress.com"
      },
      options: {
        start: {
          elem: "input",
          type: "text",
          label: "In"
        },
        end: {
          elem: "input",
          type: "text",
          label: "Out"
        },
        target: "map-container",
        type: {
          elem: "select",
          options: [ "ROADMAP", "SATELLITE", "STREETVIEW", "HYBRID", "TERRAIN" ],
          label: "Type"
        },
        zoom: {
          elem: "input",
          type: "text",
          label: "Zoom"
        },
        lat: {
          elem: "input",
          type: "text",
          label: "Lat"
        },
        lng: {
          elem: "input",
          type: "text",
          label: "Lng"
        },
        location: {
          elem: "input",
          type: "text",
          label: "Location"
        },
        heading: {
          elem: "input",
          type: "text",
          label: "Heading"
        },
        pitch: {
          elem: "input",
          type: "text",
          label: "Pitch"
        }
      }

Mustache

Purpose

Adds the ability to render JSON using templates via the Mustache templating library.

Options

  • start [Number] - the time [in seconds] when the mustache template should be rendered in the target div.
  • end [Number] - the time [in seconds] when the rendered mustache template should be removed from the target div.
  • target [String] - a String – the target div’s id.
  • template [String Function] - the mustache template for the plugin to use when rendering. This can be a String containing the template, or a Function that returns the template’s String.
  • data [String Object Function] - the data to be rendered using the mustache template. This can be a JSON String, a JavaScript Object literal, or a Function returning a String or Literal.
  • dynamic [Boolean] - an optional argument indicating that the template and json data are dynamic and need to be loaded dynamically on every use. Defaults to True.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324

    var pop = Popcorn( "#video" );

    pop.mustache({
      start: 5,  // seconds
      end:  10,  // seconds
      target: 'mustache-div',
      template: '<h1></h1>'                              +
        ''                                               +
        '  content<small>12 December 2012</small>
<h1>Manifest</h1>

<p class="view">by </p>

<h1 id="manifest">Manifest</h1>

<h2 id="purpose">Purpose</h2>

<p>Manifests are used by our authoring tool <a href="http://mozillapopcorn.org/popcorn-maker/">Popcorn-Maker</a> to create meaningful editors.</p>

<p>Manifests are simply objects that contain data about who wrote the plugin, each option the plugin exposes (start, end, target, etc.), as well as defining what type of element is best used to represent the specified option in the editor (input, select, dropdown, etc.) and the corresponding data for each of those elements (an array of data for select and dropdown, text for input, etc.).</p>

<h2 id="options">Options</h2>

<ul>
  <li><strong>about</strong> [Object] - an object that defines who wrote this plugin</li>
  <li><strong>options</strong> [Object] - an object containing various other objects for each option that is passed on to the user</li>
</ul>

<h2 id="use-case">Use Case</h2>

<p>You want your plugin to be used in butter</p>

<h2 id="examples">Examples</h2>

<p>The following example shows what a manifest might look like (the googlemaps manifest in this example)</p>

<figure class="highlight"><pre><code class="language-js" data-lang="js"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
</pre></td><td class="code"><pre> 
    <span class="p">{</span>
      <span class="nl">about</span><span class="p">:</span> <span class="p">{</span>
        <span class="nl">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Popcorn Google Map Plugin</span><span class="dl">"</span><span class="p">,</span>
        <span class="nx">version</span><span class="p">:</span> <span class="dl">"</span><span class="s2">0.1</span><span class="dl">"</span><span class="p">,</span>
        <span class="nx">author</span><span class="p">:</span> <span class="dl">"</span><span class="s2">@annasob</span><span class="dl">"</span><span class="p">,</span>
        <span class="nx">website</span><span class="p">:</span> <span class="dl">"</span><span class="s2">annasob.wordpress.com</span><span class="dl">"</span>
      <span class="p">},</span>
      <span class="nx">options</span><span class="p">:</span> <span class="p">{</span>
        <span class="nl">start</span><span class="p">:</span> <span class="p">{</span>
          <span class="nl">elem</span><span class="p">:</span> <span class="dl">"</span><span class="s2">input</span><span class="dl">"</span><span class="p">,</span>
          <span class="nx">type</span><span class="p">:</span> <span class="dl">"</span><span class="s2">text</span><span class="dl">"</span><span class="p">,</span>
          <span class="nx">label</span><span class="p">:</span> <span class="dl">"</span><span class="s2">In</span><span class="dl">"</span>
        <span class="p">},</span>
        <span class="nx">end</span><span class="p">:</span> <span class="p">{</span>
          <span class="nl">elem</span><span class="p">:</span> <span class="dl">"</span><span class="s2">input</span><span class="dl">"</span><span class="p">,</span>
          <span class="nx">type</span><span class="p">:</span> <span class="dl">"</span><span class="s2">text</span><span class="dl">"</span><span class="p">,</span>
          <span class="nx">label</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Out</span><span class="dl">"</span>
        <span class="p">},</span>
        <span class="nx">target</span><span class="p">:</span> <span class="dl">"</span><span class="s2">map-container</span><span class="dl">"</span><span class="p">,</span>
        <span class="nx">type</span><span class="p">:</span> <span class="p">{</span>
          <span class="nl">elem</span><span class="p">:</span> <span class="dl">"</span><span class="s2">select</span><span class="dl">"</span><span class="p">,</span>
          <span class="nx">options</span><span class="p">:</span> <span class="p">[</span> <span class="dl">"</span><span class="s2">ROADMAP</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">SATELLITE</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">STREETVIEW</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">HYBRID</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">TERRAIN</span><span class="dl">"</span> <span class="p">],</span>
          <span class="nx">label</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Type</span><span class="dl">"</span>
        <span class="p">},</span>
        <span class="nx">zoom</span><span class="p">:</span> <span class="p">{</span>
          <span class="nl">elem</span><span class="p">:</span> <span class="dl">"</span><span class="s2">input</span><span class="dl">"</span><span class="p">,</span>
          <span class="nx">type</span><span class="p">:</span> <span class="dl">"</span><span class="s2">text</span><span class="dl">"</span><span class="p">,</span>
          <span class="nx">label</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Zoom</span><span class="dl">"</span>
        <span class="p">},</span>
        <span class="nx">lat</span><span class="p">:</span> <span class="p">{</span>
          <span class="nl">elem</span><span class="p">:</span> <span class="dl">"</span><span class="s2">input</span><span class="dl">"</span><span class="p">,</span>
          <span class="nx">type</span><span class="p">:</span> <span class="dl">"</span><span class="s2">text</span><span class="dl">"</span><span class="p">,</span>
          <span class="nx">label</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Lat</span><span class="dl">"</span>
        <span class="p">},</span>
        <span class="nx">lng</span><span class="p">:</span> <span class="p">{</span>
          <span class="nl">elem</span><span class="p">:</span> <span class="dl">"</span><span class="s2">input</span><span class="dl">"</span><span class="p">,</span>
          <span class="nx">type</span><span class="p">:</span> <span class="dl">"</span><span class="s2">text</span><span class="dl">"</span><span class="p">,</span>
          <span class="nx">label</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Lng</span><span class="dl">"</span>
        <span class="p">},</span>
        <span class="nx">location</span><span class="p">:</span> <span class="p">{</span>
          <span class="nl">elem</span><span class="p">:</span> <span class="dl">"</span><span class="s2">input</span><span class="dl">"</span><span class="p">,</span>
          <span class="nx">type</span><span class="p">:</span> <span class="dl">"</span><span class="s2">text</span><span class="dl">"</span><span class="p">,</span>
          <span class="nx">label</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Location</span><span class="dl">"</span>
        <span class="p">},</span>
        <span class="nx">heading</span><span class="p">:</span> <span class="p">{</span>
          <span class="nl">elem</span><span class="p">:</span> <span class="dl">"</span><span class="s2">input</span><span class="dl">"</span><span class="p">,</span>
          <span class="nx">type</span><span class="p">:</span> <span class="dl">"</span><span class="s2">text</span><span class="dl">"</span><span class="p">,</span>
          <span class="nx">label</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Heading</span><span class="dl">"</span>
        <span class="p">},</span>
        <span class="nx">pitch</span><span class="p">:</span> <span class="p">{</span>
          <span class="nl">elem</span><span class="p">:</span> <span class="dl">"</span><span class="s2">input</span><span class="dl">"</span><span class="p">,</span>
          <span class="nx">type</span><span class="p">:</span> <span class="dl">"</span><span class="s2">text</span><span class="dl">"</span><span class="p">,</span>
          <span class="nx">label</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Pitch</span><span class="dl">"</span>
        <span class="p">}</span>
      <span class="p">}</span>
</pre></td></tr></tbody></table></code></pre></figure>




  <small>tags: <em></em></small>

'                                             +
        '    <li><strong></strong></li>'                   +
        '  content<small>12 December 2012</small>
<h1>Manifest</h1>

<p class="view">by </p>

<h1 id="manifest">Manifest</h1>

<h2 id="purpose">Purpose</h2>

<p>Manifests are used by our authoring tool <a href="http://mozillapopcorn.org/popcorn-maker/">Popcorn-Maker</a> to create meaningful editors.</p>

<p>Manifests are simply objects that contain data about who wrote the plugin, each option the plugin exposes (start, end, target, etc.), as well as defining what type of element is best used to represent the specified option in the editor (input, select, dropdown, etc.) and the corresponding data for each of those elements (an array of data for select and dropdown, text for input, etc.).</p>

<h2 id="options">Options</h2>

<ul>
  <li><strong>about</strong> [Object] - an object that defines who wrote this plugin</li>
  <li><strong>options</strong> [Object] - an object containing various other objects for each option that is passed on to the user</li>
</ul>

<h2 id="use-case">Use Case</h2>

<p>You want your plugin to be used in butter</p>

<h2 id="examples">Examples</h2>

<p>The following example shows what a manifest might look like (the googlemaps manifest in this example)</p>

<figure class="highlight"><pre><code class="language-js" data-lang="js"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
</pre></td><td class="code"><pre> 
    <span class="p">{</span>
      <span class="nl">about</span><span class="p">:</span> <span class="p">{</span>
        <span class="nl">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Popcorn Google Map Plugin</span><span class="dl">"</span><span class="p">,</span>
        <span class="nx">version</span><span class="p">:</span> <span class="dl">"</span><span class="s2">0.1</span><span class="dl">"</span><span class="p">,</span>
        <span class="nx">author</span><span class="p">:</span> <span class="dl">"</span><span class="s2">@annasob</span><span class="dl">"</span><span class="p">,</span>
        <span class="nx">website</span><span class="p">:</span> <span class="dl">"</span><span class="s2">annasob.wordpress.com</span><span class="dl">"</span>
      <span class="p">},</span>
      <span class="nx">options</span><span class="p">:</span> <span class="p">{</span>
        <span class="nl">start</span><span class="p">:</span> <span class="p">{</span>
          <span class="nl">elem</span><span class="p">:</span> <span class="dl">"</span><span class="s2">input</span><span class="dl">"</span><span class="p">,</span>
          <span class="nx">type</span><span class="p">:</span> <span class="dl">"</span><span class="s2">text</span><span class="dl">"</span><span class="p">,</span>
          <span class="nx">label</span><span class="p">:</span> <span class="dl">"</span><span class="s2">In</span><span class="dl">"</span>
        <span class="p">},</span>
        <span class="nx">end</span><span class="p">:</span> <span class="p">{</span>
          <span class="nl">elem</span><span class="p">:</span> <span class="dl">"</span><span class="s2">input</span><span class="dl">"</span><span class="p">,</span>
          <span class="nx">type</span><span class="p">:</span> <span class="dl">"</span><span class="s2">text</span><span class="dl">"</span><span class="p">,</span>
          <span class="nx">label</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Out</span><span class="dl">"</span>
        <span class="p">},</span>
        <span class="nx">target</span><span class="p">:</span> <span class="dl">"</span><span class="s2">map-container</span><span class="dl">"</span><span class="p">,</span>
        <span class="nx">type</span><span class="p">:</span> <span class="p">{</span>
          <span class="nl">elem</span><span class="p">:</span> <span class="dl">"</span><span class="s2">select</span><span class="dl">"</span><span class="p">,</span>
          <span class="nx">options</span><span class="p">:</span> <span class="p">[</span> <span class="dl">"</span><span class="s2">ROADMAP</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">SATELLITE</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">STREETVIEW</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">HYBRID</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">TERRAIN</span><span class="dl">"</span> <span class="p">],</span>
          <span class="nx">label</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Type</span><span class="dl">"</span>
        <span class="p">},</span>
        <span class="nx">zoom</span><span class="p">:</span> <span class="p">{</span>
          <span class="nl">elem</span><span class="p">:</span> <span class="dl">"</span><span class="s2">input</span><span class="dl">"</span><span class="p">,</span>
          <span class="nx">type</span><span class="p">:</span> <span class="dl">"</span><span class="s2">text</span><span class="dl">"</span><span class="p">,</span>
          <span class="nx">label</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Zoom</span><span class="dl">"</span>
        <span class="p">},</span>
        <span class="nx">lat</span><span class="p">:</span> <span class="p">{</span>
          <span class="nl">elem</span><span class="p">:</span> <span class="dl">"</span><span class="s2">input</span><span class="dl">"</span><span class="p">,</span>
          <span class="nx">type</span><span class="p">:</span> <span class="dl">"</span><span class="s2">text</span><span class="dl">"</span><span class="p">,</span>
          <span class="nx">label</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Lat</span><span class="dl">"</span>
        <span class="p">},</span>
        <span class="nx">lng</span><span class="p">:</span> <span class="p">{</span>
          <span class="nl">elem</span><span class="p">:</span> <span class="dl">"</span><span class="s2">input</span><span class="dl">"</span><span class="p">,</span>
          <span class="nx">type</span><span class="p">:</span> <span class="dl">"</span><span class="s2">text</span><span class="dl">"</span><span class="p">,</span>
          <span class="nx">label</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Lng</span><span class="dl">"</span>
        <span class="p">},</span>
        <span class="nx">location</span><span class="p">:</span> <span class="p">{</span>
          <span class="nl">elem</span><span class="p">:</span> <span class="dl">"</span><span class="s2">input</span><span class="dl">"</span><span class="p">,</span>
          <span class="nx">type</span><span class="p">:</span> <span class="dl">"</span><span class="s2">text</span><span class="dl">"</span><span class="p">,</span>
          <span class="nx">label</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Location</span><span class="dl">"</span>
        <span class="p">},</span>
        <span class="nx">heading</span><span class="p">:</span> <span class="p">{</span>
          <span class="nl">elem</span><span class="p">:</span> <span class="dl">"</span><span class="s2">input</span><span class="dl">"</span><span class="p">,</span>
          <span class="nx">type</span><span class="p">:</span> <span class="dl">"</span><span class="s2">text</span><span class="dl">"</span><span class="p">,</span>
          <span class="nx">label</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Heading</span><span class="dl">"</span>
        <span class="p">},</span>
        <span class="nx">pitch</span><span class="p">:</span> <span class="p">{</span>
          <span class="nl">elem</span><span class="p">:</span> <span class="dl">"</span><span class="s2">input</span><span class="dl">"</span><span class="p">,</span>
          <span class="nx">type</span><span class="p">:</span> <span class="dl">"</span><span class="s2">text</span><span class="dl">"</span><span class="p">,</span>
          <span class="nx">label</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Pitch</span><span class="dl">"</span>
        <span class="p">}</span>
      <span class="p">}</span>
</pre></td></tr></tbody></table></code></pre></figure>




  <small>tags: <em></em></small>

'                                             +
        '  '                                              +
        '    <li><a href=""></a></li>'              +
        '  '                                              +
        ''                                               +
        ''                                                         +
        ''                                               +
        '  <p>The list is empty.</p>'                              +
        ''                                               ,
      data:     '{'                                                +
        '  "header": "Test 1", '                                   +
        '  "items": [ '                                            +
        '      {"name": "red", "first": true, "url": "#Red"}, '    +
        '      {"name": "green", "link": true, "url": "#Green"}, ' +
        '      {"name": "blue", "link": true, "url": "#Blue"} '    +
        '  ],'                                                     +
        '  "empty": false'                                         +
        '}',
      static: true /* The json is not going to change, load it early. */
    });

Live demo of the mustache plugin

OpenMap

Purpose

Adds an OpenLayers map and open map tiles (OpenStreetMap [default], NASA WorldWind, or USGS Topographic)

Options

  • start [Number] - is the time [in seconds] that you want this plug-in to execute
  • end [Number] - is the time [in seconds] that you want this plug-in to stop executing
  • target [String] - is the id of the DOM element that you want the map to appear in. This element must be in the DOM
  • type [String] - either: ROADMAP (OpenStreetMap), SATELLITE (NASA WorldWind / LandSat), or TERRAIN (USGS). ROADMAP/OpenStreetMap is the default.
  • zoom [String] - the amount the map is zoomed in, defaults to 2
  • lat and lng [String] - are the coordinates of the map if location is not named
  • location [String] - is a name of a place to center the map, geocoded to coordinates using TinyGeocoder.com
  • markers [Array] - is an array of map marker objects, with the following properties:
    • icon [String] - is the URL of a map marker image
    • size [Number] - is the radius in pixels of the scaled marker image (default is 14)
    • text [String] - is the HTML content of the map marker – if your popcorn instance is named ‘popped’, use <script>popped.currentTime(10);</script> to control the video
  • Note: using location requires extra loading time, also not specifying both lat/lng and location will cause a JavaScript error.

Example

1
2
3
4
5
6
7
8
9
10
11

    var pop = Popcorn( "#video" );

    pop.openmap( {
      start: 0,
      end: 20,
      type: "ROADMAP",
      target: "map",
      lat: 43.665429,
      lng: -79.403323,
      zoom: "10"
    });

Live demo of the openmap plugin

Pause

Purpose

When this plugin is used, links on the webpage, when clicked, will pause popcorn videos that specified pauseOnLinkClicked as an option

Links may cause a new page to display on a new window, or may cause a new page to display in the current window, in which case the videos won’t be available anymore. It only affects anchor tags. It does not affect objects with click events that act as anchors.

Options

  • pauseOnLinkClicked [Boolean] - Specifies whether to have the pause on link clicked functionality turned on or off

Example

1
2
3

    var pop = Popcorn( "#video" , {
      pauseOnLinkClicked: true
    });

Live demo of the pause plugin

Processing

Purpose

This plugin adds a Processing.js sketch to be added to a target div or canvas.

Options

  • start [Number] - is the time [in seconds] when you want the sketch to display and start looping.
  • end [Number] - is the time [in seconds] when you want the sketch to become hidden and stop looping.
  • target [String] - is the id of the div or canvas you want the target sketch to be displayed in. A target that is a div will have a canvas created and placed inside of it.
  • sketch [String] - specifies the filename of the Procesing code to be loaded into Processing.js
  • noLoop [Boolean] - specifies whether a sketch should continue to loop when the video is paused or seeking.

Example

1
2
3
4
5
6
7
8
9

    var pop = Popcorn( "#video" );

    pop.processing({
      start: 0,
      end: 10,
      target: "processing-div",
      sketch: "test.pjs",
      noPause: true
    });

Subtitle

Purpose

Displays a subtitle over the video, or in the target div

Options

  • start [Number] - is the time [in seconds] that you want this plug-in to execute
  • end [Number] - is the time [in seconds] that you want this plug-in to stop executing
  • target [String] - is the id of the document element that the content is appended to, this target element must exist on the DOM
  • text [String] - is the text of the subtitle you want to display.

Example

1
2
3
4
5
6
7

    var pop = Popcorn( "#video" );

    pop.subtitle({
      start: 5,
      end: 15,
      text: "this is the first subtitle of 2011",
    });

Live demo of the subtitle plugin

Tagthisperson

Purpose

Adds people’s names to an element on the page.

Options

  • start [Number] - is the time [in seconds] that you want this plug-in to execute
  • end [Number] - is the time [in seconds] that you want this plug-in to stop executing
  • person [String] - is the name of the person who you want to tag
  • image [String] - is the url to the image of the person - optional
  • href [String] - is the url to the webpage of the person - optional
  • target [String] - is the id of the document element that the text needs to be attached to, this target element must exist on the DOM

Example

1
2
3
4
5
6
7
8
9
10

    var pop = Popcorn( "#video" );

    pop.tagthisperson({
      start: 0,
      end: 10,
      person: "Anna Sob",
      image: "http://newshour.s3.amazonaws.com/photos%2Fspeeches%2Fguests%2FRichardNSmith_thumbnail.jpg",
      href: "http://annasob.wordpress.com",
      target: "tagdiv"
    });

Live demo of the tagthisperson demo

Timeline

Purpose

Adds data associated with a certain time in the video, which creates a scrolling view of each item as the video progresses

Options

  • start [Number] - is the time [in seconds] that you want this plug-in to execute
  • end [Number] - is the time [in seconds] that you want this plug-in to stop executing, though for this plugin an end time may not be needed (optional)
  • target [String] - is the id of the DOM element that you want the timeline to appear in. This element must be in the DOM
  • title [String] - is the title of the current timeline box
  • text [String] - is simply related text that will be displayed
  • innerHTML [String] - gives the user the option to add things such as links, buttons and so on
  • direction [String] - specifies whether the timeline will grow from the top or the bottom, receives input as “UP” or “DOWN”

Example

1
2
3
4
5
6
7
8
9
10

    var pop = Popcorn( "#video" );

    pop.timeline({
      start: 1,
      target: "timeline",
      title: "This is a title",
      text: "this is some interesting text that goes inside",
      innerHTML: "Click here for <a href='http://www.google.ca'>Google</a>" ,
      direction: "up"
   });

Live demo of the timeline plugin

Tumblr

Purpose

The tumblr plugin allows the user to bring in blog posts of various types, a blog avatar or a blog info and display its information at a given start and end time. All blog post types are supported (text, audio, video, photo, chat, answer, quote, link).

Options

The following options are required by all plugin types:

  • requestType [String] - is the name of the type of tumblr plugin request being made. Options: INFO, AVATAR, BLOGPOST.
  • target [String] - is the id of the document element that the text needs to be attached to. This target element must exist on the DOM.
  • start [Number] - is the time [in seconds] that you want this plug-in to execute.
  • end [Number] - is the time [in seconds] that you want this plug-in to stop executing.

The following option is required by BLOGPOST and INFO requests:

  • api_key [String] - is the API key registered with Tumblr for use with their API.

The following option is required for BLOGPOST requests:

  • blogId [Number] - is the id that identifies a unique blog post. This is used for the user to specify the specific post they want to be displayed.

The following option is optional for AVATAR requests:

  • size [Number] - is the width in pixels that the returned image will be.

The following options is optional for BLOGPOST requests:

  • width [Number] - is the width of the video or photo being returned. Defaults to 250 pixels for photo blog posts and 400 for video blog posts.

Example

1
2
3
4
5
6
7
8
9
10
11

    var pop = Popcorn("#video");
    
    pop.tumblr( {
      start: 1, 
      end: 4,
      requestType: 'blogpost',
      target: 'tumblrBlogInfodiv',
      base_hostname: "john.io",
      blogId: 10596794348,
      api_key: "7lQpV9mMr2PiYjd20FavZcmReq8cWU0oHTS6d3YIB8rLUQvvcg" 
    } );

Live Demo of the Tumblr Plugin

Twitter

Purpose

Appends a Twitter widget to an element on the page.

Options

  • start [Number] - is the time [in seconds] that you want this plug-in to execute
  • end [Number] - is the time [in seconds] that you want this plug-in to stop executing
  • src [String] - is the hash tag or twitter user to get tweets from
  • target [String] - is the id of the document element that the images are appended to, this target element must exist on the DOM
  • height [Number] - is the height of the widget [in pixels], defaults to 200
  • width [Number] - is the width of the widget [in pixels], defaults to 250

Example

1
2
3
4
5
6
7
8
9

    var pop = Popcorn( "#video" );

    pop.twitter({
      start: 5,
      end: 15,
      title: "Steve Song",
      src: "@stevesong",
      target: "twitterdiv",
    });

Live demo of the twitter plugin

Webpage

Purpose

Creates an iframe showing a website specified by the user

Options

  • start [String] - is the time [in seconds] that you want this plug-in to execute
  • end [String] - is the time [in seconds] that you want this plug-in to stop executing
  • id [String] - is the id that you want assigned to the iframe
  • target [String] - is the id of the document element that the iframe needs to be attached to, target element must exist on the DOM
  • src [String] - is the url of the website that you want the iframe to display

Example

1
2
3
4
5
6
7
8
9

    var pop = Popcorn( "#video" );

    pop.webpage({
      id: "webpages-a",
      start: 0,
      end: 5,
      src: "http://webmademovies.org/",
      target: "webpagediv"
    });

Live demo of the webpage plugin

Wikipedia

Purpose

Displays a wikipedia article in the target specified by the user by using a new DOM element instead of overwriting them

Options

  • start [Number] - is the time [in seconds] that you want this plug-in to execute
  • end [Number] - is the time [in seconds] that you want this plug-in to stop executing
  • target [String] - is the id of the document element that the text from the article needs to be appended to, this target element must exist on the DOM
  • lang [String] - (optional, defaults to english) is the language in which the article is in.
  • src [String] - is the url of the article
  • title [String] - (optional) is the title of the article
  • numberofwords [Number] - (optional, defaults to 200) is the number of words you want to display.

Example

1
2
3
4
5
6
7
8
9

    var pop = Popcorn( "#video" );

    pop.wikipedia({
      start: 0,
      end: 10,
      src: "http://en.wikipedia.org/wiki/Cape_Town",
      title: "this is an article",
      target: "wikidiv"
    });

Live demo of the wikipedia plugin

Wordriver

Purpose

Displays a string of text, fading it in and out while transitioning across the height of the parent container for the duration of the instance (duration = end - start)

Options

  • start [Number] - is the time [in seconds] that you want the Word River animation to begin
  • end [Number] - is the time [in seconds] that you want the Word River animation to finish
  • text [String] - the text you want to be displayed by Word River
  • target [String] - the target div to append the text to
  • color [String] - the color of the text. Can be an Hex value i.e. #FFFFFF

Example

1
2
3
4
5
6
7
8
9

    var pop = Popcorn( "#video" );

    pop.wordriver({
      start: 1,
      end: 3,
      text: "hello",
      target: "wordriverdiv",
      color: "red"
    });

Live demo of the wordriver plugin