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
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
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 [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’
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
1varp=Popcorn("#video").googlemap({ 2start:1, 3end:5, 4type:"STREETVIEW", 5target:"map2", 6location:"Toronto, Ontario, Canada", 7onmaploaded:function(options,map){ 8// map is a reference to the actual map object 9// options is the options object that was passed in initially10}11});
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
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”
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)
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 [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.
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
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.
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
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 [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.
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
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] - 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