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 that you want this plug-in to execute
end [Number] - is the time 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 copyrightholder
license [String] - is the type of license that the work is copyrighted under
licenseUrl [String] - is the url that provides more details about the ticense type
The facebook plugin allows the user to bring popular aspects from facebook and display it to the user between a gien start and end time. Features a like box, a stream of a users 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 that you want this plug-in to execute
end [Number] - is the time 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 a 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
1varpop=Popcorn("#video"); 2 3pop.facebook({ 4type:"live-stream", 5target:"activitydiv", 6start:1, 7end:10, 8// id is from example http://developers.facebook.com/docs/reference/plugins/live-stream/ 9event_app_id:17424324929672510});
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 [String] - is the time that you want this plug-in to execute (in seconds)
end [String] - is the time that you want this plug-in to stop executing (in seconds)
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 retreive 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’
Places a LinkedIn plugin inside a div ( http://developers.facebook.com/docs/plugins/ )
Options
start [Number] - is the time that you want this plug-in to execute
end [Number] - is the time 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 inlined, 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”
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, ect ), as well as defining what type of element is best used to represent the specified option in the editor ( input, select, dropdown ) and the corresponding data for each of those elements ( an array of data for select and dropdown, text for input ).
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 )
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
1varpop=Popcorn("#video"); 2 3pop.mustache({ 4start:5,// seconds 5end:10,// seconds 6target:'mustache-div', 7template:'<h1></h1>'+ 8''+ 9' '+10' <li><strong></strong></li>'+11' '+12' '+13' <li><a href=""></a></li>'+14' '+15''+16''+17''+18' <p>The list is empty.</p>'+19'',20data:'{'+21' "header": "Test 1", '+22' "items": [ '+23' {"name": "red", "first": true, "url": "#Red"}, '+24' {"name": "green", "link": true, "url": "#Green"}, '+25' {"name": "blue", "link": true, "url": "#Blue"} '+26' ],'+27' "empty": false'+28'}',29static:true/* The json is not going to change, load it early. */30});
Adds an OpenLayers map and open map tiles (OpenStreetMap [default], NASA WorldWind, or USGS Topographic)
Options
start [Number] - is the time that you want this plug-in to execute
end [Number] - is the time 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.
When this plugin is used, links on the webpage, when clicked, will pause popcorn videos that especified 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 th pause on link clicked functionality turned on or off
This plugin adds a Processing.js sketch to be added to a target div or canvas.
Options
start [Number] - is the time [in seconds] that you want the sketch to display and start looping.
end [Number] - is the time [in seconds] 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.
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 that you want this plug-in to execute
end [Number] - is the time that you want this plug-in to stop executing, tho 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 text 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
1varpop=Popcorn("#video"); 2 3pop.timeline({ 4start:1, 5target:"timeline", 6title:"This is a title", 7text:"this is some interesting text that goes inside", 8innerHTML:"Click here for <a href='http://www.google.ca'>Google</a>", 9direction:"up"10});
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 that you want this plug-in to execute.
end [Number] - is the time 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.
Displays a wikipedia aricle in the target specified by the user by using new DOM element instead overwriting them
Options
start [Number] - is the time that you want this plug-in to execute
end [Number] - is the time 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 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 displaid.
Example
1varpop=Popcorn("#video");23pop.wikipedia({4start:0,5end:10,6src:"http://en.wikipedia.org/wiki/Cape_Town",7title:"this is an article",8target:"wikidiv"9});
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] - when to begin the Word River animation
end [Number] - when to finish the Word River animation
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 Hex value i.e. #FFFFFF )