diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..c8af71c --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +# OS X ignores +.DS_Store + +# Jekyll ignores +_site diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..aaa6d8e --- /dev/null +++ b/_config.yml @@ -0,0 +1,9 @@ +# Github defaults +safe: true +lsi: false +pygments: true + +# Popcorn.js settings +auto: true +server: true + diff --git a/effects/2012-12-12-index.md b/effects/2012-12-12-index.md new file mode 100644 index 0000000..e69de29 diff --git a/effects/_posts/2012-12-12-applyclass.md b/effects/_posts/2012-12-12-applyclass.md new file mode 100644 index 0000000..c96f0ae --- /dev/null +++ b/effects/_posts/2012-12-12-applyclass.md @@ -0,0 +1,34 @@ +# ApplyClass # + +## Purpose ## + +Apply css class to jquery selector. Selector is relative to plugin target's id + +## Options ## + +* **class** - specifies the class to apply to the plugin container, can be seperated by spaces for more then one class + +## Examples ## + + var popcorn = Popcorn( "#video" ); + + popcorn.footnote({ + start: 2, + end: 6, + text: "TOGGLING EVENTS", + target: "footnote", + effect: "applyclass", + applyclass: "test1, test2" + }) + .footnote({ + start: 20, // seconds + end: 45, // seconds + target: "footnotediv", + text: "Visit webmademovies.org for more details", + effect: "applyclass", + applyclass: "applyoverlay: .overlay, hover: parent" + }); + + popcorn.play(); + +Simple applyclass effect [jsFiddle](http://jsfiddle.net/68tzd/) diff --git a/getting-started/2012-12-12-index.md b/getting-started/2012-12-12-index.md new file mode 100644 index 0000000..e69de29 diff --git a/getting-started/_posts/2012-12-12-gettingstarted.md b/getting-started/_posts/2012-12-12-gettingstarted.md new file mode 100644 index 0000000..2d8df2f --- /dev/null +++ b/getting-started/_posts/2012-12-12-gettingstarted.md @@ -0,0 +1,19 @@ +# Getting Started # + +We urge the video community, Javascript developers, and film makers alike to get involved and help with development in order to ensure an easy to use and adaptable library. There are many ways one can get involved; some include critiquing current work, filling out tickets/bugs, requesting additional functionality, spreading the word, and helping with documentation. Included below are ways to keep track of popcorn.js. + +## Download Source ## + +We have started a [GitHub repository](https://github.com/webmademovies/popcorn-js) feel free to fork from it or download the source. If you want to contribute the this is the [developer repository](http://github.com/cadecairos/popcorn-js/) + +## Workflow Guide ## + +The developer workflow guide can be found on [Lighthouse](https://webmademovies.lighthouseapp.com/projects/63272/workflow) + +## Issue Tracker ## + +We have started a [Lighthouse project](https://webmademovies.lighthouseapp.com/projects/63272/overview). It is public so feel free to add tickets. + +## IRC ## + +To get involved in the conversation or just stop by to see whats happening visit the #popcorn channel at irc://moznet/popcorn diff --git a/index.css b/index.css new file mode 100644 index 0000000..503cea9 --- /dev/null +++ b/index.css @@ -0,0 +1,389 @@ +body { + background-color:#F6F4F2; + font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; + font-size:16px; +} + +h1, ul, li { + margin:0px; + padding:0px; +} + +.caps { + text-transform: capitalize; +} + +#header { + background-color:#515151; + background:#515151 -webkit-gradient( + linear, + left top, + left bottom, + color-stop(0.2, #515151), + color-stop(0.8, #302F2D) + ); + background:-moz-linear-gradient(center bottom , #515151 20%, #747474 80%); + border-top:1px solid #919192; + height:32px; + left:0px; + position:fixed; + top:0px; + width:100%; + z-index:1; +} +#subheader { + background-color:#CBCBCB; + background:-webkit-gradient(linear, + left top, + left bottom, + color-stop(0.0, #F9F9F9), + color-stop(1.0, #CBCBCB) + ); + background:-moz-linear-gradient(center bottom , #CBCBCB 0%, #F9F9F9 100%); + border-top:1px solid #383A3C; + border-bottom:1px solid #919395; + height:32px; + left:0px; + position:fixed; + top:32px; + width:100%; + z-index:1; +} +#sidebar { + background-color:#ECEAE7; + bottom:0px; + left:0px; + overflow:auto; + padding:20px 40px 0px 0px; + position:fixed; + text-align:right; + top:66px; + width:180px; + z-index:1; +} +#scrollable { + bottom:0px; + left:220px; + position:fixed; + overflow:auto; + right:0px; + top:64px; +} +#content { +/* top:64px;*/ +/* bottom:0px;*/ +/* right:0px;*/ +/* left:220px;*/ +/* margin:64px auto 0px 220px;*/ + margin:20px 60px; +/* position:absolute;*/ +/* overflow:auto;*/ + z-index:0; +} + +#header h1, +#header h1 a, +#subheader h1 { + color:#F6F4F2; + font-size:18px; + font-weight:normal; + line-height:32px; + margin:0px; + text-align:center; + text-shadow:0px -1px 1px #222222; +} + +#header h1 a strong { + font-weight:bold; +} + +#header h1 { + text-align:left; + margin-left:20px; +} + +#subheader h1 { + color:#000000; + text-shadow:#FFFFFF 0px 1px 0px; +} + +#header small, +#subheader small { + color:#EFEFEF; + font-size:14px; + line-height:32px; + position:absolute; + top:0px; + right:20px; + text-shadow:-1px 1px 1px #666666; +} + +#sidebar .vertical_divider { + background-color:#CCCCCC; + bottom:0px; + border-right:1px solid #FFFFFF; + position:absolute; + top:0px; + right:0px; + width:1px; +} + +#sidebar h1 { + color:#000000; + font-size:18px; + padding:0px; + margin:30px 0px; + font-weight:normal; + text-shadow:#FFFFFF 0px 1px 0px; +} + +#sidebar ul, +#sidebar li { + margin:0px; + padding:0px; +} +#sidebar li, +#sidebar li a { + color:#767573; + font-size:14px; + list-style:none; + margin:15px 0px; + text-shadow:#FFFFFF 0px 1px 1px; +} +#sidebar li a { + -webkit-transition:color .15s ease-out; + -moz-transition:color .15s ease-out; + -o-transition:color .15s ease-out; +} +#sidebar li a:hover { + color:#242220; + -webkit-transition:color .15s ease-in; + -moz-transition:color .15s ease-in; + -o-transition:color .15s ease-in; +} + + +#otherbar { + display:none; +} + +#content { + font-size:13px; + line-height:160%; + max-width:750px; +} + +#content h1 { + border-bottom:2px solid; + font-size:2em; + font-weight:normal; + margin:2.0em 0px 1.3em 0px; + padding-bottom:0.6em; +} +#content h2 { + color:#242220; + font-size:1.4em; + font-weight:bold; + margin:1.3em 0px 0.8em 0px; + text-shadow:#FFFFFF 0px 1px 1px; +} +#content h3 { + font-size:1em; + font-weight:bold; + margin:0.8em 0px 0.5em 0px; + text-shadow:#FFFFFF 0px 1px 1px; +} + +hr { + display:none; + border:none; + margin:40px 0px; + border-top:1px solid #CCCCCC; + border-bottom:1px solid #FFFFFF; +} + +p,blockquote,pre,ul { + margin:1em 0px; +} + +h2:after, +h3:after { + content: ":"; +} + +blockquote { + color:#767573; + font-style:normal; + margin-left:35px; + padding-left:20px; + position:relative; + text-shadow:#FFFFFF 0px 1px 0px; +} +blockquote code { + font-style: normal; +} +blockquote p { + padding:10px 0px; +} +blockquote::before { + font-style: normal; + content: '\201C'; + font-size: 450%; + font-family:Georgia, Palatino, 'Times New Roman', Times;; + position: absolute; + left: -25px; + top:0.3em; + color: #E0E0E0; +} + +ul { + margin-left:40px; +} +ul > li { + list-style:disc; + list-style-position:outside; +} +ul ul { + margin-bottom:0.5em; + margin-top:0.5em; +} + + + +code { + font-family:"DejaVu", "Monaco", "Courier New", "Courier"; + font-size:90%; + padding:2px 4px; + white-space:pre-wrap;; +} + +pre { +/* border:1px solid #CCCCCC;*/ + background:#F2F0EE; + -webkit-border-radius:11px; + -moz-border-radius:11px; + border-radius:11px; + display:block; + line-height:110%; + margin:1.5em 0px 3em 0px; + padding:15px 20px; + white-space:pre-wrap; +} +pre code { + background:none; + border:none; + font-size:11px; + padding:0px; +} + +a[href] { +/* color:inherit;*/ + color:#F06433; + text-decoration:none; + text-shadow:#FFF 0px 1px 0px; +} +a[href]:hover { + color:#d0410f; +} + +.prettyprint a[href], +.prettyprint a[href] span { + text-decoration:underline; + text-shadow:none; +} +.prettyprint a[href] :hover, +.prettyprint a[href] span :hover { + text-decoration:none; +} + +code a[href] { + color:inherit; +/* border-bottom:1px dotted #000000;*/ + text-decoration:underline; +} +code a[href]:hover { + color:inherit; + text-decoration:none; +} + +a[href].external:after { + content: "*"; + font-style: super; + opacity: .5; +} + +#index { + -webkit-column-width: 235px; + -webkit-column-rule-width: 5px; + -moz-column-width: 235px; + -moz-column-rule-width: 5px; + column-width: 235px; + column-rule-width: 5px; +} + +#index h2:after, +#index h3:after { + content:""; +} + +#index h2 { + margin:0px; + padding:0px; +} + +#index { + padding: 10px 1px; +} + +#index ul { + margin:0px 0px 30px 0px; + padding:0; +} + +#index ul li { + list-style: none; +} + +#index ul li a { + +} + +#home h1 { + border-bottom:1px solid #919395; + padding-bottom:20px; + margin:30px 0px; +} + +#home h2 { + font-weight:normal; + margin:0px 0px 10px 0px; + padding:0px; +} + +#home h2:after { + content:''; +} + +#home h2 a { + text-shadow:#FFFFFF 0px 1px 1px; +} + +#home span { + color:#8B8078; + font-size:14px; + text-shadow:#FFFFFF 0px 1px 0px; +} + +#home ul { + float:left; + margin:0px; + padding:0px; +} +#home ul li { + float:left; + height:120px; + list-style:none; + margin:0px; + padding:0px 20px; + width:200px; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..2d053ba --- /dev/null +++ b/index.html @@ -0,0 +1,104 @@ +--- +layout: post +title: Popcorn.js Documentation +--- + + + + + + + Popcorn.js API Documentation + + + + + + +
+

Home

+ +
+ + + +
+
+
+

API Reference

+
    + {% for item in (1..num_words) %} + {% capture this_word %} + {{ get_items | split:' ' | sort | join:' ' | truncatewords:item | remove:'...' | split:' ' | last }} + {% endcapture %} +
  • +

    {{ this_word }}

    + {% for post in site.posts %} + {% if this_word contains post.title %} + {{ post.content }} + {% endif %} + {% endfor %} +
    • + {% endfor %} +
+

Guides

+
    +
  • +

    Keyword Index

    + Full index of the Popcorn.js Documentation. +
    • +
+
+
+
+ + + + + diff --git a/instance-methods/_posts/2012-12-12-autoplay.md b/instance-methods/_posts/2012-12-12-autoplay.md new file mode 100644 index 0000000..f0ddf10 --- /dev/null +++ b/instance-methods/_posts/2012-12-12-autoplay.md @@ -0,0 +1,17 @@ +# autoplay( flag ) # + +## Purpose ## + +autoplay is a Popcorn instance method, defined as a passthrough accessor to the HTMLMediaElement prototype property of the same name. autoplay is used set the video automatically play if it is set to true. + +## Options ## + +* **flag** - boolean value specifying whether the video should autoplay or not + +## Use Cases ## + +* Begin playing the video as soon as it is able to + +## Examples ## + +* set the video to autoplay as soon as it is able to [jsFiddle](http://jsfiddle.net/popcornjs/b7C8C/) diff --git a/instance-methods/_posts/2012-12-12-compose.md b/instance-methods/_posts/2012-12-12-compose.md new file mode 100644 index 0000000..250d404 --- /dev/null +++ b/instance-methods/_posts/2012-12-12-compose.md @@ -0,0 +1,21 @@ +# compose( name, definitionObject, manifest ) # + +## Purpose ## + +compose, which is also known as effects, works very similar to a traditional Popcorn.js plugin. We create start and end functions as we would in a typical plugin and add an appropriate effect that will be triggered in each block. Typically this means add an effect on start and remove it on end, but is in no way limited to this. Compose creates the huge potential for css transitions between Popcorn events and really adds another depth to the users web made movie experience. compose is not limited to effects tho, and can be used for many other things as well. Keep in mind that plugins events will be fired first and then any composed events will be fired after. + +## Options ## + +* **name** - a string of the given name for the compose plugin +* **definitionObject** - is an object literal containing typical plugin methods ( setup, start, end ) where the compose logic will live +* **manifest** - an optional manifest can be included + +## Use Cases ## + +* You want a unique effect to be displayed at alongside an already existing plugin +* Create transitions + +## Examples ## + +* Create a simple compose plugin to log data [jsFidlle](http://jsfiddle.net/popcornjs/q4rWE/) +* Simple css compose effect [jsFiddle](http://jsfiddle.net/popcornjs/jHL9m/) diff --git a/instance-methods/_posts/2012-12-12-cue.md b/instance-methods/_posts/2012-12-12-cue.md new file mode 100644 index 0000000..5a79cf2 --- /dev/null +++ b/instance-methods/_posts/2012-12-12-cue.md @@ -0,0 +1,19 @@ +# cue( time, callback ) # + +## Purpose ## + +cue is an alias to exec(), meaning it provides the same functionality but is simply accessed through a seperate function name. Cue was created with film makers in mind by using a familiar keyword in order to make developing Popcorn.js projects simpler. + +## Options ## + +* **time** - the time in which the cue will be fired at +* **callback** - a callback function that will be executed at a given **time** in a cue + +## Use Cases ## + +* Perform an action at some point in the video +* Unique functionality that is not big enough to warrant a plugin + +## Example ## + +* Log data at points in the video [jsFiddle](http://jsfiddle.net/popcornjs/a38mA/) diff --git a/instance-methods/_posts/2012-12-12-currenttime.md b/instance-methods/_posts/2012-12-12-currenttime.md new file mode 100644 index 0000000..f57d40b --- /dev/null +++ b/instance-methods/_posts/2012-12-12-currenttime.md @@ -0,0 +1,19 @@ +# currentTime # + +## Purpose ## + +Set or Get the Popcorn video object instance currentTime + +## Options ## + +* **seconds** - if seconds exists, we are setting the currentTime ( go to that time in the video ), and if it is not present, we are returning what the currentTime is + +## Use Case ## + +* Navigate to a certain point in the video +* figure out what time we are at in the video + +## Examples ## + +* get the currentTime of the video as it plays [jsFiddle](http://jsfiddle.net/popcornjs/a3TGF/) +* set the currentTime and then play [jsFiddle](http://jsfiddle.net/popcornjs/bpge3/) diff --git a/instance-methods/_posts/2012-12-12-defaults.md b/instance-methods/_posts/2012-12-12-defaults.md new file mode 100644 index 0000000..5080918 --- /dev/null +++ b/instance-methods/_posts/2012-12-12-defaults.md @@ -0,0 +1,22 @@ +# defaults # + +## Purpose ## + +Set defaults for any property of a plugin. + +This allows numerous plugins of a single type to all use the same default values. This can be done by either calling the instance method or by doing so in the popcorn constructor. + +## Options ## + +* **pluginName** - a string of the name of the plugin in which you want to set default values for +* **options** - is an object that contains the values that will be defaulted for the given plugin + +## Use Cases ## + +* Use the same default values for numerous plugin calls +* Reduce code size + +## Examples ## + +* Using the instance method [jsFiddle](http://jsfiddle.net/popcornjs/mMXnf/) +* Using the Popcorn constructor [jsFiddle](http://jsfiddle.net/popcornjs/HhjGv/) diff --git a/instance-methods/_posts/2012-12-12-disable.md b/instance-methods/_posts/2012-12-12-disable.md new file mode 100644 index 0000000..56cbfd3 --- /dev/null +++ b/instance-methods/_posts/2012-12-12-disable.md @@ -0,0 +1,13 @@ +# disable # + +## Purpose ## + +Disable a plugin; stops the playback events for a specified plugin of a calling Popcorn instance. + +## Options ## + +* **pluginName** - a string of the name of the plugin that will disabled + +## Example ## + +* disable the playback of a footnote plugin [jsFiddle](http://jsfiddle.net/popcornjs/yuyFu/) diff --git a/instance-methods/_posts/2012-12-12-duration.md b/instance-methods/_posts/2012-12-12-duration.md new file mode 100644 index 0000000..83eabb4 --- /dev/null +++ b/instance-methods/_posts/2012-12-12-duration.md @@ -0,0 +1,13 @@ +# duration # + +## Purpose ## + +Get the videos duration. If the duration is not yet available, NaN will be returned. + +## Options ## + +* returns a number representing the duration of the video in seconds + +## Example ## + +* get the duration of the video [jsFiddle](http://jsfiddle.net/popcornjs/Z4Z37/) diff --git a/instance-methods/_posts/2012-12-12-enable.md b/instance-methods/_posts/2012-12-12-enable.md new file mode 100644 index 0000000..5710c8a --- /dev/null +++ b/instance-methods/_posts/2012-12-12-enable.md @@ -0,0 +1,13 @@ +# enable # + +## Purpose ## + +Enable a previously disabled plugin of a calling Popcorn instance. + +## Options ## + +* **pluginName** - a string of the name of the plugin that will disabled + +## Example ## + +* enable a previously disabled plugin [jsFiddle](http://jsfiddle.net/popcornjs/4Ps9x/) diff --git a/instance-methods/_posts/2012-12-12-exec.md b/instance-methods/_posts/2012-12-12-exec.md new file mode 100644 index 0000000..4bf132d --- /dev/null +++ b/instance-methods/_posts/2012-12-12-exec.md @@ -0,0 +1,19 @@ +# exec # + +## Purpose ## + +Execute an arbitrary callback function at a specific time in seconds + +## Options ## + +* **time** - time location in seconds to execute callback function +* **callback** - function to execute at the given **time** + +## Use Cases ## + +* Perform an action at some point in the video +* Unique functionality that is not big enough to warrant a plugin + +## Example ## + +* console.log some data at 1 second [jsFiddle](http://jsfiddle.net/popcornjs/6SzsX/) diff --git a/instance-methods/_posts/2012-12-12-framerate.md b/instance-methods/_posts/2012-12-12-framerate.md new file mode 100644 index 0000000..774db07 --- /dev/null +++ b/instance-methods/_posts/2012-12-12-framerate.md @@ -0,0 +1,13 @@ +# framerate # + +## Purpose ## + +You can set the framerate to be used for all start/end points of a given Popcorn instance + +## Options ## + +* **frameRate** - a number representing the frame rate to be used + +## Example ## + +* set the frame rate [jsFiddle](http://jsfiddle.net/popcornjs/XEBqn/) diff --git a/instance-methods/_posts/2012-12-12-index.md b/instance-methods/_posts/2012-12-12-index.md new file mode 100644 index 0000000..f08215c --- /dev/null +++ b/instance-methods/_posts/2012-12-12-index.md @@ -0,0 +1,4 @@ +--- +title: instance-methods +--- +Various functions accessible on every Popcorn instance diff --git a/instance-methods/_posts/2012-12-12-listen.md b/instance-methods/_posts/2012-12-12-listen.md new file mode 100644 index 0000000..03574ba --- /dev/null +++ b/instance-methods/_posts/2012-12-12-listen.md @@ -0,0 +1,22 @@ +# listen # + +## Purpose ## + +Bind an event handling callback to an event. Allows custom events. + +Any of the follow event types may be used with .listen() : loadstart, progress, suspend, emptied, stalled, play, pause, loadedmetadata, loadeddata, waiting, playing, canplay, canplaythrough, seeking, seeked, timeupdate, ended, ratechange, durationchange, volumechange. + +Listen also excepts custom events. + +## Options ## + +* **eventName** - the name of the event to listen for +* **callback** - the function that will get fired when the event is triggered + +## Use Cases ## + +* You want to perform some action when an event happens, i.e, show a googlemap when the video is paused + +## Examples ## + +* console.log some information when the play event is triggered [jsFiddle](http://jsfiddle.net/popcornjs/UuLsj/) diff --git a/instance-methods/_posts/2012-12-12-mute.md b/instance-methods/_posts/2012-12-12-mute.md new file mode 100644 index 0000000..2194a4a --- /dev/null +++ b/instance-methods/_posts/2012-12-12-mute.md @@ -0,0 +1,11 @@ +# mute # + +## Purpose ## + +Toggle muting of the video, switching whether the video is muted or not. + +A mute event will be fired when mute is triggered + +## Example ## + +* mute the video at 2 seconds [jsFiddle](http://jsfiddle.net/popcornjs/q2B8y/) diff --git a/instance-methods/_posts/2012-12-12-play.md b/instance-methods/_posts/2012-12-12-play.md new file mode 100644 index 0000000..6fe04a9 --- /dev/null +++ b/instance-methods/_posts/2012-12-12-play.md @@ -0,0 +1,16 @@ +# play # + +## Purpose ## + +Play the video. + +When the video plays a play event is triggered + +## Options ## + +* **val** - optional parameter that will seek to a specified time ( in seconds ) and play the video, short hand for .currentTime( val ).play(); + +## Example ## + +* play the video [jsFiddle](http://jsfiddle.net/popcornjs/a4t4U/) +* play the video and at 1 second seek to 3 seconds and continue playing using shorthand [jsFiddle](http://jsfiddle.net/popcornjs/hhtEA/) diff --git a/instance-methods/_posts/2012-12-12-playbackrate.md b/instance-methods/_posts/2012-12-12-playbackrate.md new file mode 100644 index 0000000..97b59f9 --- /dev/null +++ b/instance-methods/_posts/2012-12-12-playbackrate.md @@ -0,0 +1,20 @@ +# playbackrate # + +## Purpose ## + +Get/set the Popcorn video object instance playbackRate + +## Options ## + +* **rate** - an optional parameter that if it exists will set the playback rate, and if it does not, will return the playback rate + +## Example ## + + var p = Popcorn( "#video" ); + + // returns the current playback rate + p.playbackrate(); + + // set the playback rate + p.playbackrate( 30 ); + diff --git a/instance-methods/_posts/2012-12-12-position.md b/instance-methods/_posts/2012-12-12-position.md new file mode 100644 index 0000000..5f216ba --- /dev/null +++ b/instance-methods/_posts/2012-12-12-position.md @@ -0,0 +1,13 @@ +# position # + +## Purpose ## + +Get the calculated top, right, bottom, left, width & height of a calling Popcorn instance. + +## Options ## + +* Returns the calculated bounding box object of the calling Popcorn instance + +## Example ## + +* console.log the position of the given instance [jsFiddle](http://jsfiddle.net/popcornjs/ZGD6D/) diff --git a/instance-methods/_posts/2012-12-12-roundTime.md b/instance-methods/_posts/2012-12-12-roundTime.md new file mode 100644 index 0000000..f98469e --- /dev/null +++ b/instance-methods/_posts/2012-12-12-roundTime.md @@ -0,0 +1,21 @@ +# roundTime() # + +## Purpose ## + +roundTime() returns the media's current time rounded to the closest second. roundTime() takes no arguments. + +## Options ## + +* returns number + +## Use Cases ## + +* get the currentTime of the media to the closest second as opposed to an exact value + +## Examples ## + +* Show a rounded current time every timeUpdate cycle [jsFiddle](http://jsfiddle.net/popcornjs/Nd7js/) + +## Related ## + +* currentTime() diff --git a/instance-methods/_posts/2012-12-12-toggle.md b/instance-methods/_posts/2012-12-12-toggle.md new file mode 100644 index 0000000..0549f90 --- /dev/null +++ b/instance-methods/_posts/2012-12-12-toggle.md @@ -0,0 +1,19 @@ +# toggle( pluginName ) # + +## Purpose ## + +toggle is used to turn on and off events of plugin type. This provides the user with the ability to easily turn on and off events as they see fit. Something to note is that toggling events on/off does not mean that they will be hidden when toggled off. It simply means that events will not longer be fired of that plugin type, i.e start, end, onFrame will not be fired if toggled off. toggle takes the following argument: + +## Options ## + +* **pluginName** - a string of the name of the plugin, i.e. footnote + +## Use Cases ## + +* Toggle a plugin on and off because of a user interaction +* Play the video through once without popcorn events and once with popcorn events + +## Examples ## + +* Button to toggle events on and off [jsFiddle](http://jsfiddle.net/popcornjs/RbVKJ/1/) +* Play video without events on first play through, then with events there after [jsFiddle](http://jsfiddle.net/popcornjs/McBEv/) diff --git a/instance-methods/_posts/2012-12-12-trigger.md b/instance-methods/_posts/2012-12-12-trigger.md new file mode 100644 index 0000000..a2ecc1f --- /dev/null +++ b/instance-methods/_posts/2012-12-12-trigger.md @@ -0,0 +1,23 @@ +# Trigger # + +## Purpose ## + +Trigger an event; optionally pass an object of data through to the event handling callback. Allows custom events. + +Any of the follow event types may be used with .trigger() : loadstart, progress, suspend, emptied, stalled, play, pause, loadedmetadata, loadeddata, waiting, playing, canplay, canplaythrough, seeking, seeked, timeupdate, ended, ratechange, durationchange, volumechange. + +Trigger also accepts custom events. + +## Options ## + +* **eventName** - the name of the event to be triggered +* **dataObject** - optional data object + +## Use Cases ## + +* Trigger an event to be fired when something happens, i.e., the video reaches halfway done, so trigger custom event "halfdone" which is listened for somewhere else + +## Examples ## + +* Trigger play [jsFiddle](http://jsfiddle.net/popcornjs/r8wVe/) +* When half of the video has loaded, pass along a data object and log some data [jsFiddle](http://jsfiddle.net/popcornjs/GKkQx/) diff --git a/instance-methods/_posts/2012-12-12-unlisten.md b/instance-methods/_posts/2012-12-12-unlisten.md new file mode 100644 index 0000000..fff1b26 --- /dev/null +++ b/instance-methods/_posts/2012-12-12-unlisten.md @@ -0,0 +1,14 @@ +# unlisten # + +## Purpose ## + +Unbind all events of specified type, or by string name + +## Options ## + +* **eventName** - either a native or custome event name +* **callbackName** - string; named callback + +## Example ## + +* stop listening to events of the type play [jsFiddle](http://jsfiddle.net/popcornjs/4NbWV/) diff --git a/instance-methods/_posts/2012-12-12-unmute.md b/instance-methods/_posts/2012-12-12-unmute.md new file mode 100644 index 0000000..469b297 --- /dev/null +++ b/instance-methods/_posts/2012-12-12-unmute.md @@ -0,0 +1,17 @@ +# unmute() # + +## Purpose ## + +unmute() simply unmutes the media of a given instance. If the media is already not muted, nothing will happen. unmute() takes no arguments. + +## Use Cases ## + +* A video is muted and you want to programmatically unmute the media + +## Example ## + +* Unmutes a video that begins muted [jsFiddle](http://jsfiddle.net/popcornjs/kMXzC/) + +## Related ## + +* mute() diff --git a/instance-methods/_posts/2012-12-12-volume.md b/instance-methods/_posts/2012-12-12-volume.md new file mode 100644 index 0000000..023f71f --- /dev/null +++ b/instance-methods/_posts/2012-12-12-volume.md @@ -0,0 +1,15 @@ +# volume # + +## Purpose ## + +Get or Set the Popcorn video object instance volume + +Calling the .volume( volumeValue ) method will trigger a "volumechange" event. + +## Options ## + +* **val** - if **val** exists, we will set the volume of the video, if not we will get + +## Examples ## + +* get and set the volume [jsFiddle])(http://jsfiddle.net/popcornjs/beQ6C/) diff --git a/instance-property/2012-12-12-index.md b/instance-property/2012-12-12-index.md new file mode 100644 index 0000000..e69de29 diff --git a/instance-property/_posts/2012-12-12-frameanimation.md b/instance-property/_posts/2012-12-12-frameanimation.md new file mode 100644 index 0000000..bf3ddc1 --- /dev/null +++ b/instance-property/_posts/2012-12-12-frameanimation.md @@ -0,0 +1,19 @@ +# frameAnimation # + +## Purpose ## + +Setting the Popcorn constructor's option object property frameAnimation to true allows you to opt-in your playback to be managed by a requestAnimationFrame loop, resulting in up to 60 fps playback. This will also grant the use of the frame callback method in any plugins that implement it. + +## Options ## + +Popcorn("#video-element-id", { frameAnimation: true }) + +* **frameAnimation** - boolean value stating whether to use frameAnimation or not + +## Use Case ## + +* Firing events on a per frame level, increasing accuracy + +## Examples ## + +* Update the currentTime of a video [jsFiddle](http://jsfiddle.net/popcornjs/JVUdb/) diff --git a/instance-property/_posts/2012-12-12-media.md b/instance-property/_posts/2012-12-12-media.md new file mode 100644 index 0000000..d0b4bdf --- /dev/null +++ b/instance-property/_posts/2012-12-12-media.md @@ -0,0 +1,9 @@ +# media # + +## Purpose ## + +Per instance property containing either the HTMLVideoElement or HTMLAudioElement object reference. + +## Example ## + +* console.log the instances media [jsFiddle](http://jsfiddle.net/popcornjs/R5LHE/) diff --git a/instance-property/_posts/2012-12-12-popcorninstance.md b/instance-property/_posts/2012-12-12-popcorninstance.md new file mode 100644 index 0000000..abf81f8 --- /dev/null +++ b/instance-property/_posts/2012-12-12-popcorninstance.md @@ -0,0 +1,19 @@ +# Popcorn # + +## Purpose ## + +Creates and returns a new Popcorn video object instance. + +All Popcorn instance methods, plugins and callbacks are chained directly from a Popcorn Instance via it's prototype — this means that the context is always the instance. + +## Options ## + +* **id** - the id of the video element +* **optionsObject** - an options object for providing additional options to the popcorn instance, things like frameAnimation and frameRate can be specified here as well as plugin defaults. +* returns a Popcorn instance + +## Examples ## + +* Create a popcorn instance [jsFiddle](http://jsfiddle.net/popcornjs/Y2uK7/) +* Showing the context within various instance methods, as well has how to create an instance [jsFiddle](http://jsfiddle.net/popcornjs/G3Csf/) +* Also showing context but with a plugin instead [jsFiddle](http://jsfiddle.net/popcornjs/GmNEY/) diff --git a/media-methods/2012-12-12-index.md b/media-methods/2012-12-12-index.md new file mode 100644 index 0000000..e69de29 diff --git a/media-methods/_posts/2012-12-12-buffered.md b/media-methods/_posts/2012-12-12-buffered.md new file mode 100644 index 0000000..f255aa8 --- /dev/null +++ b/media-methods/_posts/2012-12-12-buffered.md @@ -0,0 +1,18 @@ +# buffered() # + +## Purpose ## + +buffered() is a Popcorn instance method, defined as a passthrough accessor to the HTMLMediaElement prototype property of the same name. buffered() returns a [timeranges object](http://www.w3.org/TR/html5/video.html#normalized-timeranges-object) that describes to the user how much of the video has been loaded. The function takes no arguements. + +## Options ## + +* returns - [timeRanges objects](http://www.w3.org/TR/html5/video.html#normalized-timeranges-object) + +## Use Cases ## + +* You want to wait until a certain amount of the video has been loaded before beginning playback or allowing the user to interact with the video + +## Examples ## + +* Show buffered data on page load [jsFiddle](http://jsfiddle.net/popcornjs/LmeLN/) +* Play the video when more then half of the video has loaded [jsFiddle](http://jsfiddle.net/popcornjs/QRSZE/1/) diff --git a/media-methods/_posts/2012-12-12-controls.md b/media-methods/_posts/2012-12-12-controls.md new file mode 100644 index 0000000..f67ab15 --- /dev/null +++ b/media-methods/_posts/2012-12-12-controls.md @@ -0,0 +1,19 @@ +# controls( flag ) # + +## Purpose ## + +controls is a Popcorn instance method, defined as a passthrough accessor to the HTMLMediaElement prototype property of the same name. If controls is active, the video will be shown with its native set of controls ( play, timebar, volume, ect ). When controls is not active it will not show any of the controls overlaid over the video. + +## Options ## + +* **flag** - boolean value specifying whether to show or hide the controls + +## Use Cases ## + +* Autoplay the video, showing no controls +* Show controls initially, then on play, hide the controls from the user + +## Examples ## + +* Hide controls [jsFiddle](http://jsfiddle.net/popcornjs/z3z5w/) +* Show/hide controls every other second [jsFiddle](http://jsfiddle.net/popcornjs/e7rys/) diff --git a/media-methods/_posts/2012-12-12-ended.md b/media-methods/_posts/2012-12-12-ended.md new file mode 100644 index 0000000..bbe696d --- /dev/null +++ b/media-methods/_posts/2012-12-12-ended.md @@ -0,0 +1,13 @@ +# ended() # + +## Purpose ## + +ended() is a Popcorn instance method, defined as a passthrough accessor to the HTMLMediaElement prototype property of the same name. ended() is fired when the video has reached the end of its playback. ended() takes no arguments. + +# Use Cases # + +* Fire an event when the video has finished playing + +## Examples ## + +* Log some information when the video has finished [jsFiddle](http://jsfiddle.net/popcornjs/hUYmK/1/) diff --git a/media-methods/_posts/2012-12-12-load.md b/media-methods/_posts/2012-12-12-load.md new file mode 100644 index 0000000..64109c4 --- /dev/null +++ b/media-methods/_posts/2012-12-12-load.md @@ -0,0 +1,15 @@ +# load() # + +## Purpose ## + +load() is a Popcorn instance method, defined as a passthrough accessor to the HTMLMediaElement prototype method of the same name. The load() method allows the user to force a reload of the current video, making it play from the beginning. The function takes no arguements. Once the video has loaded it will take its default state as it was set when the video was instantiated ( if it was muted, if autoplay was set, etc ). + +## Use cases ## + +* Start the video from the beginning again +* Change a video source mid way through playback + +## Examples ## + +* Log some data at 1 second then reload the video at 3 seconds [jsFiddle](http://jsfiddle.net/popcornjs/dTm9J/) +* Log some data at 1 second, then change the source of the video and setting it to autoplay [jsFiddle](http://jsfiddle.net/popcornjs/AuX6B/) diff --git a/media-methods/_posts/2012-12-12-loop.md b/media-methods/_posts/2012-12-12-loop.md new file mode 100644 index 0000000..c747df9 --- /dev/null +++ b/media-methods/_posts/2012-12-12-loop.md @@ -0,0 +1,17 @@ +# loop( flag ) # + +controls is a Popcorn instance method, defined as a passthrough accessor to the HTMLMediaElement prototype property of the same name. When loop is set to true, it will restart the video when it finishes. By default Popcorn videos will not loop. + +## Options ## + +* **flag** - boolean value specifying whether or not to loop the video + +## Use Cases ## + +* Continuosly play the video +* Perform different actions on each playthrough + +## Examples ## + +* Continuosly play [jsFiddle](http://jsfiddle.net/popcornjs/H9J4C/) +* Log something at an incrementing time each loop over the video [jsFiddle](http://jsfiddle.net/popcornjs/MAn7J/) diff --git a/media-methods/_posts/2012-12-12-muted.md b/media-methods/_posts/2012-12-12-muted.md new file mode 100644 index 0000000..794d5ce --- /dev/null +++ b/media-methods/_posts/2012-12-12-muted.md @@ -0,0 +1,22 @@ +# muted( flag ) # + +## Purpose ## + +muted is a Popcorn instance method, defined as a passthrough accessor to the HTMLMediaElement prototype property of the same name. Depending on the state of the flag, muted will either start playing muted or unmuted ( default is unmuted ). + +## Options ## + +* **flag** - boolean value stating whether to mute the video or not + +## Use Cases ## + +* mute/unmute the video as needed + +## Examples ## + +* Mute the video as it starts [jsFiddle](http://jsfiddle.net/popcornjs/5Ysdr/) + +## Related ## + +* mute +* unmute diff --git a/media-methods/_posts/2012-12-12-pause.md b/media-methods/_posts/2012-12-12-pause.md new file mode 100644 index 0000000..7699584 --- /dev/null +++ b/media-methods/_posts/2012-12-12-pause.md @@ -0,0 +1,16 @@ +# pause # + +## Purpose ## + +Pauses the video. + +When the video pauses a pause event is triggered + +## Options ## + +* **val** - optional parameter that will seek to a specified time ( in seconds ) and pause the video, short hand for .currentTime( val ).pause(); + +## Example ## + +* pause the video at 2 seconds [jsFiddle(http://jsfiddle.net/popcornjs/sUDwA/) +* at 1 second, seek to 5 seconds and pause using shorthand [jsFiddle](http://jsfiddle.net/popcornjs/CjBuZ/) diff --git a/media-methods/_posts/2012-12-12-paused.md b/media-methods/_posts/2012-12-12-paused.md new file mode 100644 index 0000000..02dfa32 --- /dev/null +++ b/media-methods/_posts/2012-12-12-paused.md @@ -0,0 +1,18 @@ +# paused() # + +## Purpose ## + +paused() is a Popcorn instance method, defined as a passthrough accessor to the HTMLMediaElement prototype property of the same name. paused() informs the user of whether or not the video is currently paused. It takes not arugements. + +## Options ## + +* returns - boolean value ( true/false ) + +## Use Cases ## + +* Perform an action when the video is paused + +## Examples ## + +* add a footnote everytime the video is paused [jsFiddle](http://jsfiddle.net/popcornjs/prdB6/1/) + diff --git a/media-methods/_posts/2012-12-12-played.md b/media-methods/_posts/2012-12-12-played.md new file mode 100644 index 0000000..0d9ae13 --- /dev/null +++ b/media-methods/_posts/2012-12-12-played.md @@ -0,0 +1,19 @@ +# played() # + +## Purpose ## + +played() is a Popcorn instance method, defined as a passthrough accessor to the HTMLMediaElement prototype property of the same name. played() allows the user to get information on how much of the video has been played so far in the form of a [timeRanges object](). It takes no arguements + +## Options ## + +* returns - [timeRanges Object]() + +## Use Cases ## + +* Update the user on how much of the video they have watched so far +* Show content depending on how much of the video the user has watched + +## Examples ## + +* Show how much has been played at 1 second [jsFiddle](http://jsfiddle.net/popcornjs/uWUjJ/) +* Show how much of the video has been played as a percentage as the video is playing [jsFiddle](http://jsfiddle.net/popcornjs/LkfJL/1/) diff --git a/media-methods/_posts/2012-12-12-preload.md b/media-methods/_posts/2012-12-12-preload.md new file mode 100644 index 0000000..8d666c1 --- /dev/null +++ b/media-methods/_posts/2012-12-12-preload.md @@ -0,0 +1,25 @@ +# preload( state ) # + +## Purpose ## + +preload is a Popcorn instance method, defined as a passthrough accessor to the HTMLMediaElement prototype property of the same name. Preload provides a hint to the user agent as to how much of the video to preloaded. If autoplay is set to true, preload is ignored ( autoplay will try and play the video right away ). If an incorrect value is given, it defaults to auto. + +## Options ## + +* **state** - state takes the form of one of the following values: + + * auto - begins loading data as soon as possible + * metadata - only loads the videos metadata (dimensions, first frame, track list, duration, etc) + * none - loads no data + +## Use Cases ## + +* There is a high chance your users are on a very slow connection and want to ensure the rest of the webpage loads quickly ( state = none ) +* Begin loading the video ASAP to ensure a smooth playback +* We want to get metadata from the video because we may be performing calculations on the videos duration, size, etc + +## Examples ## + +* Preload with auto specified [jsFiddle](http://jsfiddle.net/popcornjs/Y32gd/) +* Preload with metadata specified [jsFiddle](http://jsfiddle.net/popcornjs/z7fAF/) +* Preload with none specified [jsFiddle](http://jsfiddle.net/popcornjs/cucwZ/) diff --git a/media-methods/_posts/2012-12-12-readystate.md b/media-methods/_posts/2012-12-12-readystate.md new file mode 100644 index 0000000..e20ae68 --- /dev/null +++ b/media-methods/_posts/2012-12-12-readystate.md @@ -0,0 +1,24 @@ +# readyState() # + +## Purpose ## + +readyState() is a Popcorn instance method, defined as a passthrough accessor to the HTMLMediaElement prototype property of the same name. readystate returns a value from 0 - 4 describing at which state in loading the video is at. readystate() takes no arguements. + +## Options ## + +* returns: + * 0 ( HAVE_NOTHING ) - no information regarding the media source is available + * 1 ( HAVE_METADATA ) - duration and dimensions of the video are available + * 2 ( HAVE_CURRENT_DATA ) - enough data for the immediate playback of the current position + * 3 ( HAVE_FUTURE_DATA ) - same as readyState 2 but the the video can seek forwards at least a small bit before returning to readyState 2 + * 4 ( HAVE_ENOUGH_DATA ) = same as readyState 3 but the user agent has estimated that data is being fetched at a rate that it will not stall playback before the end of the video + +See the [HTML5 Video spec for readyStates](http://www.w3.org/TR/html5/video.html#dom-media-have_nothing) for more details + +## Use Cases ## + +* Perform tasks as soon as data is available by checking readyStates + +## Examples ## + +* Basic example showcasing readyStates [jsFiddle](http://jsfiddle.net/popcornjs/Qj8xX/) diff --git a/media-methods/_posts/2012-12-12-seekable.md b/media-methods/_posts/2012-12-12-seekable.md new file mode 100644 index 0000000..fb78e1c --- /dev/null +++ b/media-methods/_posts/2012-12-12-seekable.md @@ -0,0 +1,17 @@ +# seekable() # + +## Purpose ## + +seekable() is a Popcorn instance method, defined as a passthrough accessor to the HTMLMediaElement prototype property of the same name. seekable() takes no arguments and provides the user with information on how much of the media they can currently seek through. + +## Options ## + +* returns - [TimeRanges object]() + +## Use Cases ## + +* Dont show the timeline until the user is able to seek through a certain amount of the video + +## Examples ## + +* Hide timeline until the user can seek through over half of the video [jsFiddle](http://jsfiddle.net/popcornjs/27g3j/1/) diff --git a/media-methods/_posts/2012-12-12-seeking.md b/media-methods/_posts/2012-12-12-seeking.md new file mode 100644 index 0000000..fd2ce8f --- /dev/null +++ b/media-methods/_posts/2012-12-12-seeking.md @@ -0,0 +1,17 @@ +# seeking() # + +## Purpose ## + +seeking() is a Popcorn instance method, defined as a passthrough accessor to the HTMLMediaElement prototype property of the same name. seeking() describes whether or not the current popcorn instances video is seeking or not. seeking() takes no arguements. + +## Options ## + +* returns - boolean value ( true/false ) + +## Use Cases ## + +* Perform actions while the user seeks through your video + +## Examples ## + +* Small example to show when the user is seeking [jsFiddle](http://jsfiddle.net/popcornjs/gquDv/) diff --git a/mobile.css b/mobile.css new file mode 100644 index 0000000..541cb1b --- /dev/null +++ b/mobile.css @@ -0,0 +1,120 @@ +body { + margin:0px; + padding:0px; +} + +#header { + position:static; +} + +#header h1 { + margin:0px; + text-align:center; +} + +#subheader { + position:static; + text-align:center; +} + +#subheader h1 { + display:none; +} + +#subheader small { + position:static; +} + +#sidebar { + display:none; +} + +#scrollable { + position:static; +} + +#content { + margin:0px; + max-width:none; + padding:10px; + position:static; +} + +#home, +#index { + margin:0px 10px; +} + +#home h1, +#index h2 { + border:none; + color:#CCCCCC; + font-size:20px; + font-weight:bold; + margin:10px 0px; + padding:0px; + text-shadow:#FFFFFF 0px 1px 0px; +} + +#home h2 a, +#index ul li a { + text-shadow:#FFFFFF 0px 1px 1px; +} + +#home ul, +#index ul { + background-color:#F9F9F9; + border:1px solid #CCCED0; + -moz-border-radius:6px; + -webkit-border-radius:6px; + border-radius:6px; + display:block; + margin:0px 0px 20px 0px; + padding:0px; + float:none; +} + +#home ul li, +#index ul li { + border-bottom:1px solid #CCCED0; + display:block; + float:none; + height:100%; + margin:0px; + padding:0px; + width:100%; +} + +#home ul li:last-child, +#index ul li:last-child { + border-bottom:none; +} + +#home li h2 { + margin:0px; + padding:0px; +} + +#home li h2 a, +#index li a { + background:url(arrow.png) no-repeat 100% 50%; + color:#66686A; + display:block; + font-size:16px; + font-weight:normal; + margin:0px; + padding:10px 20px; +} + +#home li span { + display:none; +} + +#index { + -webkit-column-width: auto; + -webkit-column-rule-width: auto; + -moz-column-width: auto; + -moz-column-rule-width: auto; + column-width: auto; + column-rule-width: auto; +} \ No newline at end of file diff --git a/modules/2012-12-12-index.md b/modules/2012-12-12-index.md new file mode 100644 index 0000000..e69de29 diff --git a/modules/_posts/2012-12-12-data-timeline-sources.md b/modules/_posts/2012-12-12-data-timeline-sources.md new file mode 100644 index 0000000..0166d24 --- /dev/null +++ b/modules/_posts/2012-12-12-data-timeline-sources.md @@ -0,0 +1,36 @@ +# data-timeline-sources # + +## Purpose ## + +The data-timeline-sources module adds functionality to the Popcorn.js core to parse custom data-timeline-sources attributes on HTML elements. + +This is primarily used in association with Popcorn's parsers and allows the user to specify the source of the data to be parsed on the video element inside the data-timeline-sources attribute. This allows popcorn to create a custom instance based on the data in data-timeline-sources. + +## Examples ## + + + + + + + +
+
+
+ + diff --git a/modules/_posts/2012-12-12-sequence.md b/modules/_posts/2012-12-12-sequence.md new file mode 100644 index 0000000..8c88840 --- /dev/null +++ b/modules/_posts/2012-12-12-sequence.md @@ -0,0 +1,51 @@ +# Sequence # + +## Purpose ## + +Create video clip sequences that playback seamlessly + +## Options ## + +sequence( containerId, sourcesArray ) + +* **containerId** - the id of the HTML element in which the videos will populate +* **sourcesArray - an array of objects, which each contain the following: + ** **src** - path to your media source file + ** **in** - start time for this particular media + ** **out** - end time for this particular media + +the sequencer also provides the following methods: + +* **eq( index )** - return a popcorn object for the given object from the sourcesArray + ** **index** - the position in the sourcesArray to get the object from +* **play()** - plays the sequence +* **exec( time, callback )** - executes a function at a given time in the sequence + ** **time** - the time in the sequence in which **callback** will execute + ** **callback** - the function that we will execute +* **listen( eventName, callback )** - listen for an event and fire a callback when that event is triggered + **eventName** - the name of the event to listen for i.e. play, pause, timeupdate, canplayall, etc + **callback** - the function to run when the event has been fired + +## Examples ## + + var sequence = Popcorn.sequence( + "container-id", + [ + { + src: "assets/snowdriving.ogv", + in: 0, + out: 5 + }, + { + src: "assets/snowdriving.ogv", + in: 7, + out: 10 + }, + { + src: "assets/snowdriving.ogv", + in: 3, + out: 6 + } + ]); + +[jsFiddle Example](http://jsfiddle.net/jmTgD/1/) diff --git a/parsers/2012-12-12-index.md b/parsers/2012-12-12-index.md new file mode 100644 index 0000000..e69de29 diff --git a/parsers/_posts/2012-12-12-parserJSON.md b/parsers/_posts/2012-12-12-parserJSON.md new file mode 100644 index 0000000..72c4eac --- /dev/null +++ b/parsers/_posts/2012-12-12-parserJSON.md @@ -0,0 +1,47 @@ +# JSON parser # + +## Purpose ## + +The JSON parser allows the user to parse json data that contains popcorn data in order to populate a popcorn instance. + +The user sepcifies the the source of there json file in a data-timeline-sources attribute on the video object. When Popcorn is instantiated it will search each video element for a data-timeline-sources attribute and try and parse the sepcified file. + +## Options ## + +* **data-timeline-sources** - a media element attribute that specifies the source of the file to be parsed + +## Use Case ## + +* Parse a json file of popcorn data + +## Example ## + +* Parses a popcorn json file ( this examples is assuming your json file is called data.json ) and that you are using data-timeline-sources + + + + + + + +
+
+
+ + + diff --git a/parsers/_posts/2012-12-12-parserSBV.md b/parsers/_posts/2012-12-12-parserSBV.md new file mode 100644 index 0000000..96e3edc --- /dev/null +++ b/parsers/_posts/2012-12-12-parserSBV.md @@ -0,0 +1,46 @@ +# SBV parser # + +## Purpose ## + +The SBV parser allows the user to parse SBV subtitle data in order to populate a subtitle track event. + +The user sepcifies the the source of there SBV file in a data-timeline-sources attribute on the video object. When Popcorn is instantiated it will search each video element for a data-timeline-sources attribute and try and parse the sepcified file. + +## Options ## + +* **data-timeline-sources** - a media element attribute that specifies the source of the file to be parsed + +## Use Case ## + +* Parse a SBV file of subtitle data + +## Example ## + +* Parses a popcorn SBV subtitle file to populate a subtitle track + + + + + + + +
+
+
+ + diff --git a/parsers/_posts/2012-12-12-parserSRT.md b/parsers/_posts/2012-12-12-parserSRT.md new file mode 100644 index 0000000..9afa305 --- /dev/null +++ b/parsers/_posts/2012-12-12-parserSRT.md @@ -0,0 +1,46 @@ +# SRT parser # + +## Purpose ## + +The SRT parser allows the user to parse SRT subtitle data in order to populate a subtitle track event. + +The user sepcifies the the source of there SRT file in a data-timeline-sources attribute on the video object. When Popcorn is instantiated it will search each video element for a data-timeline-sources attribute and try and parse the sepcified file. + +## Options ## + +* **data-timeline-sources** - a media element attribute that specifies the source of the file to be parsed + +## Use Case ## + +* Parse a SRT file of subtitle data + +## Example ## + +* Parses a popcorn SRT subtitle file to populate a subtitle track + + + + + + + +
+
+
+ + diff --git a/parsers/_posts/2012-12-12-parserSSA.md b/parsers/_posts/2012-12-12-parserSSA.md new file mode 100644 index 0000000..c166bcf --- /dev/null +++ b/parsers/_posts/2012-12-12-parserSSA.md @@ -0,0 +1,46 @@ +# SSA parser # + +## Purpose ## + +The SSA parser allows the user to parse SSA subtitle data in order to populate a subtitle track event. + +The user sepcifies the the source of there SSA file in a data-timeline-sources attribute on the video object. When Popcorn is instantiated it will search each video element for a data-timeline-sources attribute and try and parse the sepcified file. + +## Options ## + +* **data-timeline-sources** - a media element attribute that specifies the source of the file to be parsed + +## Use Case ## + +* Parse a SSA file of subtitle data + +## Example ## + +* Parses a popcorn SSA subtitle file to populate a subtitle track + + + + + + + +
+
+
+ + diff --git a/parsers/_posts/2012-12-12-parserTTML.md b/parsers/_posts/2012-12-12-parserTTML.md new file mode 100644 index 0000000..01c53a1 --- /dev/null +++ b/parsers/_posts/2012-12-12-parserTTML.md @@ -0,0 +1,46 @@ +# TTML parser # + +## Purpose ## + +The TTML parser allows the user to parse TTML subtitle data in order to populate a subtitle track event. + +The user sepcifies the the source of there TTML file in a data-timeline-sources attribute on the video object. When Popcorn is instantiated it will search each video element for a data-timeline-sources attribute and try and parse the sepcified file. + +## Options ## + +* **data-timeline-sources** - a media element attribute that specifies the source of the file to be parsed + +## Use Case ## + +* Parse a TTML file of subtitle data + +## Example ## + +* Parses a popcorn TTML subtitle file to populate a subtitle track + + + + + + + +
+
+
+ + diff --git a/parsers/_posts/2012-12-12-parserTTXT.md b/parsers/_posts/2012-12-12-parserTTXT.md new file mode 100644 index 0000000..a4c8c87 --- /dev/null +++ b/parsers/_posts/2012-12-12-parserTTXT.md @@ -0,0 +1,46 @@ +# TTXT parser # + +## Purpose ## + +The TTXT parser allows the user to parse TTXT subtitle data in order to populate a subtitle track event. + +The user sepcifies the the source of there TTXT file in a data-timeline-sources attribute on the video object. When Popcorn is instantiated it will search each video element for a data-timeline-sources attribute and try and parse the sepcified file. + +## Options ## + +* **data-timeline-sources** - a media element attribute that specifies the source of the file to be parsed + +## Use Case ## + +* Parse a TTXT file of subtitle data + +## Example ## + +* Parses a popcorn TTXT subtitle file to populate a subtitle track + + + + + + + +
+
+
+ + diff --git a/parsers/_posts/2012-12-12-parserVTT.md b/parsers/_posts/2012-12-12-parserVTT.md new file mode 100644 index 0000000..bf5c4bb --- /dev/null +++ b/parsers/_posts/2012-12-12-parserVTT.md @@ -0,0 +1,46 @@ +# VTT parser # + +## Purpose ## + +The VTT parser allows the user to parse VTT subtitle data in order to populate a subtitle track event. + +The user sepcifies the the source of there VTT file in a data-timeline-sources attribute on the video object. When Popcorn is instantiated it will search each video element for a data-timeline-sources attribute and try and parse the sepcified file. + +## Options ## + +* **data-timeline-sources** - a media element attribute that specifies the source of the file to be parsed + +## Use Case ## + +* Parse a VTT file of subtitle data + +## Example ## + +* Parses a popcorn VTT subtitle file to populate a subtitle track + + + + + + + +
+
+
+ + diff --git a/parsers/_posts/2012-12-12-parserXML.md b/parsers/_posts/2012-12-12-parserXML.md new file mode 100644 index 0000000..0ee49f1 --- /dev/null +++ b/parsers/_posts/2012-12-12-parserXML.md @@ -0,0 +1,46 @@ +# XML parser # + +## Purpose ## + +The XML parser allows the user to parse XML data that contains popcorn data in order to populate a popcorn instance. + +The user sepcifies the the source of there XML file in a data-timeline-sources attribute on the video object. When Popcorn is instantiated it will search each video element for a data-timeline-sources attribute and try and parse the sepcified file. + +## Options ## + +* **data-timeline-sources** - a media element attribute that specifies the source of the file to be parsed + +## Use Case ## + +* Parse a XML file of popcorn data + +## Example ## + +* Parses a popcorn XML file ( this examples is assuming your XML file is called data.xml ) and that you are using data-timeline-sources + + + + + + + +
+
+
+ + diff --git a/players/2012-12-12-index.md b/players/2012-12-12-index.md new file mode 100644 index 0000000..e69de29 diff --git a/players/_posts/2012-12-12-baseplayer.md b/players/_posts/2012-12-12-baseplayer.md new file mode 100644 index 0000000..35656f6 --- /dev/null +++ b/players/_posts/2012-12-12-baseplayer.md @@ -0,0 +1,36 @@ +# Baseplayer # + +## 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** - 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 ## + + 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" + }); + +// will work with 1.0 +[jsFiddle](http://jsfiddle.net/popcornjs/qQ672/) diff --git a/players/_posts/2012-12-12-vimeo.md b/players/_posts/2012-12-12-vimeo.md new file mode 100644 index 0000000..52a67c5 --- /dev/null +++ b/players/_posts/2012-12-12-vimeo.md @@ -0,0 +1,30 @@ +# Vimeo # + +## 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** - the id of the HTML element that the youtube player will populate +* **url** - 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 ## + + var pop = Popcorn.vimeo( "#video", "vimeoURL" ); + + pop.footnote({ + start: 1, + end: 5, + text: "Works with vimeo!", + target: "footnote-div" + }); + + pop.play(); + +// wont work until after 1.0 lands +[jsFiddle example](http://jsfiddle.net/popcornjs/gBEek/) diff --git a/players/_posts/2012-12-12-youtube.md b/players/_posts/2012-12-12-youtube.md new file mode 100644 index 0000000..30e732b --- /dev/null +++ b/players/_posts/2012-12-12-youtube.md @@ -0,0 +1,30 @@ +# Youtube # + +## 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** - the id of the HTML element that the youtube player will populate +* **url** - 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 ## + + 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(); + +[jsFiddle example](http://jsfiddle.net/popcornjs/whvkP/) diff --git a/plugins/2012-12-12-index.md b/plugins/2012-12-12-index.md new file mode 100644 index 0000000..e69de29 diff --git a/plugins/_posts/2012-12-12-attribution.md b/plugins/_posts/2012-12-12-attribution.md new file mode 100644 index 0000000..d8b7720 --- /dev/null +++ b/plugins/_posts/2012-12-12-attribution.md @@ -0,0 +1,33 @@ +# 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 + +## Example ## + + 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" + }); + +* [jsFiddle Example](http://jsfiddle.net/popcornjs/AykAT/) diff --git a/plugins/_posts/2012-12-12-bestpractice.md b/plugins/_posts/2012-12-12-bestpractice.md new file mode 100644 index 0000000..077fd52 --- /dev/null +++ b/plugins/_posts/2012-12-12-bestpractice.md @@ -0,0 +1,37 @@ +# best practice # + +## Purpose ## + +The following is a list of best practices for developers writing plugins for Popcorn.js. + +The goals are to provide the best user experience, to empower authors who may or may not have advanced programming skills and to make plugins general and reusable. + +## Style ## + +* Wherever possible, let the author set the styles, especially for things like fonts and colors. If you want to provide default styles, set classes and create a style sheet in the that can be overridden. When setting style.display, use 'none' to hide and leave it blank to show. Do not assume the page needs your element to display as 'block', as there are other options (inline, inline-block, table, etc.). Allow absolute positioning (top, left, bottom, right) and size (width, height) in options where relevant. Accept all CSS length formats (em, px, %, etc), but percentages are preferred. If position options are provided, set container element to 'position: absolute'. +* Assume video or any other page elements can change size. If setting size or position of elements, use percentages. + +## Events ## + +If your plugin requires resources to load from the network, don't assume it will be loaded by the time the event displays. In start, make sure all resources are loaded before displaying. + +* Implement frame method where appropriate for animations, such as movement or opacity. +* Always implement _teardown. Be careful about memory leaks, and do not assume that either start or end has run. +* Allow options to specify onStart, onFrame and onEnd callbacks that get called at the end of your start, frame and end events, with the options object and any other relevant information or elements. Accept a function or a string as the name of a global function. Callback functions should run after your code and should be wrapped in "try/catch" to prevent bad author code from taking down all of Popcorn. +* If your plugin loads complex elements, such as large images, canvases or iframes, check for duplicates. Keep a list of created events, and if two events have the same data but don't overlap in time, re-use the first set of elements you created. Allow for an option to force no duplicates, in case the author wants to change something in a callback. +* Optimize _setup and _teardown. When events are edited in Popcorn Maker, they are destroyed and re-created for every single change. So assume events will be created and destroyed hundreds of times, often with the same or similar values. + +## Interaction ## + +* If a user can click on your content, either to link to an external site or to engage in more detailed interaction, pause the main media. +* If you have rich content, pause the media when a user hovers their mouse over your content for more than 0.5 seconds. When the mouse is moved off, resume playing, but only if the media was not paused in the first place. (Make sure to handle all types of events that may move the mouse, not just mouseout.) +* Popcorn now provides a language setting. Use this to localize or translate your content wherever possible. For example, if querying Wikipedia, modify the subdomain to match the current language.) Try to allow authors to provide multiple versions of text. + +## Data ## + +* Make every effort to provide defaults or guess at values for properties that are not provided. "Guesses" should be predictable. +* If a required property is missing, fail gracefully with start and end methods that do nothing. (New events created by Popcorn Maker will only have start and end values and must not crash.) +* For any properties that handle multiple values, accept an array, a delimited string, a JSON encoded string or a single value. Arrays are the most flexible, but strings may be necessary, as when Popcorn event data are provided from Butter/Popcorn Maker. +* Names of properties applied to each event's options object should be standardized where possible so they may be handled generically by callbacks and effect plugins. The following table lists common properties. + +

Property

Description

type(s)

target

id of element in which to place created content. Also accept a reference to the actual HTMLElement

string, HTMLElement

container

Most plugins create a new element containing the content for each event, typically a <div>. This is not typically provided by the author, but it should be attached to the options object for callbacks and effects.

HTMLElement

onStart,

onFrame,

onEnd

An optional callback function provided by the author that runs at the end of the start, frame and end methods, respectively. If provided as a string, plugin setup should look for the function in the global namespace, and change the property value to a reference to the function.

function, string

title

A string of text that serves as a title to accompany more detailed media. Typically plain text with no line breaks.

Add to DOM with document.createTextNode(options.title)

string

text

A string of text that may serve as the main content or possibly a caption. Typically plain text with possible line breaks.

Add to DOM by splitting text by line breaks and alternating text nodes with <br> elements.

string

html

Arbitrary html content. Accept either a string or a DOM Node.

string, Node

url

Location of an external resource on the network, such as an image or an iframe. URL may be used directly or parsed for an identifier

string

link

A URL that will serve as an active, clickable link.

string

id

An identifier for a specific, external resource (e.g. a twitter user id, a single flickr photo, etc.)

string, number

classes

Any classes that may be applied to the container. Accept an array of strings or a string delimited by commas or spaces. (Use 'classes' here because 'class' is a reserved word in Javascript.)

array, string

style

CSS that may be added to the container (.style.cssText = options.style). If you implement this, run it early so can override specific style attributes as necessary.

string

diff --git a/plugins/_posts/2012-12-12-code.md b/plugins/_posts/2012-12-12-code.md new file mode 100644 index 0000000..1983102 --- /dev/null +++ b/plugins/_posts/2012-12-12-code.md @@ -0,0 +1,30 @@ +# Code # + +## Purpose ## + +Allows for the ability to run arbitrary code ( JavaScript functions ) according to video timing. + +## Options ## + +* start [Number]: the time in seconds when the mustache template should be rendere in the target divd +* end [Number]: the time in seconds when the rendered mustache template should be removed from the target div +* 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 ## + + 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"; + } + }); + +* [jsFiddle Example](http://jsfiddle.net/popcornjs/Wmskz/) diff --git a/plugins/_posts/2012-12-12-facebook.md b/plugins/_posts/2012-12-12-facebook.md new file mode 100644 index 0000000..dd80265 --- /dev/null +++ b/plugins/_posts/2012-12-12-facebook.md @@ -0,0 +1,47 @@ +# Facebook # + +## Purpose ## + +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 ## + + 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 + }); + +* [jsFiddle Example](http://jsfiddle.net/popcornjs/UC6Px/); diff --git a/plugins/_posts/2012-12-12-flickr.md b/plugins/_posts/2012-12-12-flickr.md new file mode 100644 index 0000000..fb18dcf --- /dev/null +++ b/plugins/_posts/2012-12-12-flickr.md @@ -0,0 +1,33 @@ +# 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 [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 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' + +## Example ## + + var pop = Popcorn( "#video" ); + + pop.flickr({ + start: 5, + end: 15, + userid: "35034346917@N01", + target: "flickrdiv" + }); + +* [jsFiddle Example](http://jsfiddle.net/popcornjs/grMCk/); diff --git a/plugins/_posts/2012-12-12-footnote.md b/plugins/_posts/2012-12-12-footnote.md new file mode 100644 index 0000000..fcfe028 --- /dev/null +++ b/plugins/_posts/2012-12-12-footnote.md @@ -0,0 +1,21 @@ +# Popcorn Footnote Plug-in # + +## Purpose ## + +Adds text to an element on the page. + +## Options ## + +* Start [Number]: The time you want the footnote to appear. +* End [Number]: The time you want the footnote to be 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 ## + + var p = Popcorn( "#video" ).footnote({ + start: 5, + end: 15, + text: 'This text will appear in "target". ', + target: "footnotediv" + }); diff --git a/plugins/_posts/2012-12-12-gml.md b/plugins/_posts/2012-12-12-gml.md new file mode 100644 index 0000000..d05c141 --- /dev/null +++ b/plugins/_posts/2012-12-12-gml.md @@ -0,0 +1,25 @@ +# GML # + +## Purpose ## + +Renders a GML tag inside an HTML element + +## Options ## + +* Start is the time that you want this plug-in to execute +* End is the time that you want this plug-in to stop executing +* Target is the id of the document element that you wish to render the grafiti in +* gmltag is the numerical reference to a gml tag via 000000book.com + +## Example ## + + var pop = Popcorn( "#video" ); + + pop.gml({ + start: 0, + end: 5, + gmltag: "29582", + target: "gmldiv" + }); + +* [jsFiddle Example](http://jsfiddle.net/popcornjs/kzwt8/) diff --git a/plugins/_posts/2012-12-12-googlefeed.md b/plugins/_posts/2012-12-12-googlefeed.md new file mode 100644 index 0000000..6d0ca59 --- /dev/null +++ b/plugins/_posts/2012-12-12-googlefeed.md @@ -0,0 +1,29 @@ +# Googlefeed # + +## Purpose ## + +Adds a feed from a specified blog url into the target div + +## 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 +* Url [String]: is the url of the blog's feed you are trying to access +* Title [String]: is the title of the blog you want displayed above the feed +* Orientation [String]: is the orientation of the blog, accepts either Horizontal or Vertical, defaults to Vertical + +## Example ## + + var pop = Popcorn( "#video" ); + + pop.googlefeed({ + start: 0, + end: 15, + target: "feed", + url: "http://zenit.senecac.on.ca/~chris.tyler/planet/rss20.xml", + title: "Planet Feed", + orientation: "Vertical" + }); + +* [jsFiddle Example](http://jsfiddle.net/popcornjs/rZmL8/) diff --git a/plugins/_posts/2012-12-12-googlemaps.md b/plugins/_posts/2012-12-12-googlemaps.md new file mode 100644 index 0000000..bcd2983 --- /dev/null +++ b/plugins/_posts/2012-12-12-googlemaps.md @@ -0,0 +1,43 @@ +# Popcorn Googlemap Plug-in # + +## Purpose ## + +Adds a map to the target div centered on the location specified by the user. + +## Options ## + +* Start [Number]: The time you want the Googlemap to appear. +* End [Number]: The time you want the Googlemap to be 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 +* 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, ect) +* 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 Lopngitude hat 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. + +> 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 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 ## + + var p = Popcorn( "#video" ).googlemap({ + start: 5, + end: 15, + type: "ROADMAP", + target: "map", + lat: 43.665429, + lng: -79.403323 + }); diff --git a/plugins/_posts/2012-12-12-image.md b/plugins/_posts/2012-12-12-image.md new file mode 100644 index 0000000..fe41f1f --- /dev/null +++ b/plugins/_posts/2012-12-12-image.md @@ -0,0 +1,31 @@ +# Image # + +## Purpose ## + +Show an image inside a given element 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 +* 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 ## + + 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" + }); + +* [jsFiddle Example](http://jsfiddle.net/popcornjs/8ZFzH/1/) diff --git a/plugins/_posts/2012-12-12-lastfm.md b/plugins/_posts/2012-12-12-lastfm.md new file mode 100644 index 0000000..4f723fc --- /dev/null +++ b/plugins/_posts/2012-12-12-lastfm.md @@ -0,0 +1,27 @@ +# Lastfm # + +## Purpose ## + +Appends information about a LastFM artist to an element 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 +* 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 ## + + var pop = Popcorn( "#video" ); + + pop.lastfm({ + start: 5, + end: 15, + artist: "yacht", + target: "lastfmdiv", + apikey: "30ac38340e8be75f9268727cb4526b3d" + }); + +* [jsFiddle Example](http://jsfiddle.net/popcornjs/XVbup/) diff --git a/plugins/_posts/2012-12-12-linkedin.md b/plugins/_posts/2012-12-12-linkedin.md new file mode 100644 index 0000000..3b8ebbe --- /dev/null +++ b/plugins/_posts/2012-12-12-linkedin.md @@ -0,0 +1,34 @@ +# Linkedin # + +## Purpose ## + +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" + +## Example ## + + var pop = Popcorn( "#video" ); + + pop.linkedin({ + type: "share", + counter: "right", + url: "http://www.google.ca", + target: "sharediv", + apikey: "ZOLRI2rzQS_oaXELpPF0aksxwFFEvoxAFZRLfHjaAhcGPfOX0Ds4snkJpWwKs8gk", + start: 1, + end: 4 + }); + +* [jsFiddle Example](http://jsfiddle.net/popcornjs/xCZUB/) diff --git a/plugins/_posts/2012-12-12-lowerthird.md b/plugins/_posts/2012-12-12-lowerthird.md new file mode 100644 index 0000000..4092ae0 --- /dev/null +++ b/plugins/_posts/2012-12-12-lowerthird.md @@ -0,0 +1,28 @@ +# Lowerthird # + +## Purpose ## + +Displays information about a speaker over the video, or in the target div + +## 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 content is appended to, this target element must exist on the DOM +* salutation [String]: is the speaker's Mr. Ms. Dr. etc. +* name [String]: is the speaker's name. +* role [String]: is information about the speaker, example Engineer. + +## Example ## + + var pop = Popcorn( "#video" ); + + pop.lowerthird({ + start: 5, + end: 15, + salutation: "Mr", + name: "Hyde", + role: "Monster" + }); + +* [jsFiddle Example](http://jsfiddle.net/popcornjs/d5Du8/) diff --git a/plugins/_posts/2012-12-12-manifest.md b/plugins/_posts/2012-12-12-manifest.md new file mode 100644 index 0000000..cbe3bce --- /dev/null +++ b/plugins/_posts/2012-12-12-manifest.md @@ -0,0 +1,74 @@ +# 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, 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** - an object that defines who wrote this plugin +* **options** - 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 ## + + { + 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" + } + } diff --git a/plugins/_posts/2012-12-12-mustache.md b/plugins/_posts/2012-12-12-mustache.md new file mode 100644 index 0000000..bec050d --- /dev/null +++ b/plugins/_posts/2012-12-12-mustache.md @@ -0,0 +1,49 @@ +# Mustache # + +## Purpose ## + +Adds the ability to render JSON using templates via the Mustache templating library. + +## Options ## + +* start: the time in seconds when the mustache template should be rendered in the target div. +* end: the time in seconds when the rendered mustache template should be removed from the target div. +* target: a String -- the target div's id. +* template: 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: 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: 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 ## + + var pop = Popcorn( "#video" ); + + pop.mustache({ + start: 5, // seconds + end: 10, // seconds + target: 'mustache-div', + template: '

{{header}}

' + + '{{#items}}' + + ' {{#first}}' + + '
  • {{name}}
    • ' + + ' {{/first}}' + + ' {{#link}}' + + '
  • {{name}}
    • ' + + ' {{/link}}' + + '{{/items}}' + + '' + + '{{#empty}}' + + '

    The list is empty.

    ' + + '{{/empty}}' , + 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. */ + }); + +* [jsFiddle Example](http://jsfiddle.net/popcornjs/DmupJ/) diff --git a/plugins/_posts/2012-12-12-openmap.md b/plugins/_posts/2012-12-12-openmap.md new file mode 100644 index 0000000..c9de462 --- /dev/null +++ b/plugins/_posts/2012-12-12-openmap.md @@ -0,0 +1,39 @@ +# OpenMap # + +## Purpose ## + +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]: 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 to control the video +** Lat and Lng [String]: are coordinates of the map marker if location is not specified +** Location [String]: is a name of a place for the map marker, geocoded to coordinates using TinyGeocoder.com +* +* Note: using location requires extra loading time, also not specifying both lat/lng and location will cause a JavaScript error. + +## Example ## + + var pop = Popcorn( "#video" ); + + pop.openmap( { + start: 0, + end: 20, + type: "ROADMAP", + target: "map", + lat: 43.665429, + lng: -79.403323, + zoom: "10" + }); + +* [jsFiddle Example](http://jsfiddle.net/popcornjs/NKtvy/) diff --git a/plugins/_posts/2012-12-12-pause.md b/plugins/_posts/2012-12-12-pause.md new file mode 100644 index 0000000..3bc2f09 --- /dev/null +++ b/plugins/_posts/2012-12-12-pause.md @@ -0,0 +1,19 @@ +# Pause # + +## Purpose ## + +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 + +## Example ## + + var pop = Popcorn( "#video" , { + pauseOnLinkClicked: true + }); + +* [jsFiddle Example](http://jsfiddle.net/popcornjs/CVeN6/) diff --git a/plugins/_posts/2012-12-12-processing.md b/plugins/_posts/2012-12-12-processing.md new file mode 100644 index 0000000..bd0d943 --- /dev/null +++ b/plugins/_posts/2012-12-12-processing.md @@ -0,0 +1,25 @@ +# 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] 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. + +## Example ## + + var pop = Popcorn( "#video" ); + + pop.processing({ + start: 0, + end: 10, + target: "processing-div", + sketch: "test.pjs", + noPause: true + }); diff --git a/plugins/_posts/2012-12-12-subtitle.md b/plugins/_posts/2012-12-12-subtitle.md new file mode 100644 index 0000000..7b35b6e --- /dev/null +++ b/plugins/_posts/2012-12-12-subtitle.md @@ -0,0 +1,24 @@ +# Subtitle # + +## Purpose ## + +Displays a subtitle over the video, or in the target div + +## 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 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 ## + + var pop = Popcorn( "#video" ); + + pop.subtitle({ + start: 5, + end: 15, + text: "this is the first subtitle of 2011", + }); + +* [jsFiddle Example](http://jsfiddle.net/popcornjs/p8Kbs/1/) diff --git a/plugins/_posts/2012-12-12-tagthisperson.md b/plugins/_posts/2012-12-12-tagthisperson.md new file mode 100644 index 0000000..de5f4db --- /dev/null +++ b/plugins/_posts/2012-12-12-tagthisperson.md @@ -0,0 +1,29 @@ +# Tagthisperson # + +## Purpose ## + +Adds people's names to an element 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 +* 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 ## + + 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" + }); + +* [jsFiddle Example](http://jsfiddle.net/popcornjs/ya23v/) diff --git a/plugins/_posts/2012-12-12-timeline.md b/plugins/_posts/2012-12-12-timeline.md new file mode 100644 index 0000000..91f5b0e --- /dev/null +++ b/plugins/_posts/2012-12-12-timeline.md @@ -0,0 +1,30 @@ +# 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 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 ## + + 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 Google" , + direction: "up" + }); + +* [jsFiddle Example](http://jsfiddle.net/popcornjs/yspL2/) diff --git a/plugins/_posts/2012-12-12-twitter.md b/plugins/_posts/2012-12-12-twitter.md new file mode 100644 index 0000000..fc0c4e8 --- /dev/null +++ b/plugins/_posts/2012-12-12-twitter.md @@ -0,0 +1,28 @@ +# Twitter # + +## Purpose ## + +Appends a Twitter widget to an element 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 +* 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, defaults to 200 +* Width [Number]: is the width of the widget, defaults to 250 + +## Example ## + + var pop = Popcorn( "#video" ); + + pop.twitter({ + start: 5, + end: 15, + title: "Steve Song", + src: "@stevesong", + target: "twitterdiv", + }); + +* [jsFiddle Example](http://jsfiddle.net/popcornjs/GhD62/) diff --git a/plugins/_posts/2012-12-12-webpage.md b/plugins/_posts/2012-12-12-webpage.md new file mode 100644 index 0000000..7eb6975 --- /dev/null +++ b/plugins/_posts/2012-12-12-webpage.md @@ -0,0 +1,27 @@ +# Webpage # + +## Purpose ## + +Creates an iframe showing a website specified by the user + +## Options ## + +* Start [String]: is the time that you want this plug-in to execute +* End [String]: is the time 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 ## + + var pop = Popcorn( "#video" ); + + pop.webpage({ + id: "webpages-a", + start: 0, + end: 5, + src: "http://webmademovies.org/", + target: "webpagediv" + }); + +* [jsFiddle Example](http://jsfiddle.net/popcornjs/pMmAM/) diff --git a/plugins/_posts/2012-12-12-wikipedia.md b/plugins/_posts/2012-12-12-wikipedia.md new file mode 100644 index 0000000..278aba1 --- /dev/null +++ b/plugins/_posts/2012-12-12-wikipedia.md @@ -0,0 +1,29 @@ +# Wikipedia # + +## Purpose ## + +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 ## + + 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" + }); + +* [jsFiddle Example](http://jsfiddle.net/popcornjs/5q7QS/) diff --git a/plugins/_posts/2012-12-12-wordriver.md b/plugins/_posts/2012-12-12-wordriver.md new file mode 100644 index 0000000..7317c39 --- /dev/null +++ b/plugins/_posts/2012-12-12-wordriver.md @@ -0,0 +1,27 @@ +# 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]: 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 ) + +## Example ## + + var pop = Popcorn( "#video" ); + + pop.wordriver({ + start: 1, + end: 3, + text: "hello", + target: "wordriverdiv", + color: "red" + }); + +* [jsFiddle Example](http://jsfiddle.net/popcornjs/VDJ2S/) diff --git a/pretiffy/pretiffy.css b/pretiffy/pretiffy.css new file mode 100644 index 0000000..c3a2ef8 --- /dev/null +++ b/pretiffy/pretiffy.css @@ -0,0 +1,44 @@ +/* Pretty printing styles. Used with prettify.js. */ + +.str { color: #85C5DC; } +.kwd { color: #EDF0D1; } +.com { color: #878989; } +.typ { color: #F5896F; } +.lit { color: #FFB17A; } +.pun { color: #FFFFFF; } +.pln { color: #FFFFFF; } +.tag { color: #F5896F; } +.atn { color: #F5896F; } +.atv { color: #85C5DC; } +.dec { color: #878989; } +pre.prettyprint { background-color:#302F2D; } + +/* Specify class=linenums on a pre to get line numbering */ +ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */ +li.L0, +li.L1, +li.L2, +li.L3, +li.L5, +li.L6, +li.L7, +li.L8 { list-style-type: none } +/* Alternate shading for lines */ +li.L1, +li.L3, +li.L5, +li.L7, +li.L9 { background: #eee } + +@media print { + .str { color: #060; } + .kwd { color: #006; font-weight: bold; } + .com { color: #600; font-style: italic; } + .typ { color: #404; font-weight: bold; } + .lit { color: #044; } + .pun { color: #440; } + .pln { color: #000; } + .tag { color: #006; font-weight: bold; } + .atn { color: #404; } + .atv { color: #060; } +} \ No newline at end of file diff --git a/pretiffy/pretiffy.js b/pretiffy/pretiffy.js new file mode 100644 index 0000000..c9161da --- /dev/null +++ b/pretiffy/pretiffy.js @@ -0,0 +1,33 @@ +window.PR_SHOULD_USE_CONTINUATION=true;window.PR_TAB_WIDTH=8;window.PR_normalizedHtml=window.PR=window.prettyPrintOne=window.prettyPrint=void 0;window._pr_isIE6=function(){var y=navigator&&navigator.userAgent&&navigator.userAgent.match(/\bMSIE ([678])\./);y=y?+y[1]:false;window._pr_isIE6=function(){return y};return y}; +(function(){function y(b){return b.replace(L,"&").replace(M,"<").replace(N,">")}function H(b,f,i){switch(b.nodeType){case 1:var o=b.tagName.toLowerCase();f.push("<",o);var l=b.attributes,n=l.length;if(n){if(i){for(var r=[],j=n;--j>=0;)r[j]=l[j];r.sort(function(q,m){return q.name"); +for(l=b.firstChild;l;l=l.nextSibling)H(l,f,i);if(b.firstChild||!/^(?:br|link|img)$/.test(o))f.push("");break;case 3:case 4:f.push(y(b.nodeValue));break}}function O(b){function f(c){if(c.charAt(0)!=="\\")return c.charCodeAt(0);switch(c.charAt(1)){case "b":return 8;case "t":return 9;case "n":return 10;case "v":return 11;case "f":return 12;case "r":return 13;case "u":case "x":return parseInt(c.substring(2),16)||c.charCodeAt(1);case "0":case "1":case "2":case "3":case "4":case "5":case "6":case "7":return parseInt(c.substring(1), +8);default:return c.charCodeAt(1)}}function i(c){if(c<32)return(c<16?"\\x0":"\\x")+c.toString(16);c=String.fromCharCode(c);if(c==="\\"||c==="-"||c==="["||c==="]")c="\\"+c;return c}function o(c){var d=c.substring(1,c.length-1).match(RegExp("\\\\u[0-9A-Fa-f]{4}|\\\\x[0-9A-Fa-f]{2}|\\\\[0-3][0-7]{0,2}|\\\\[0-7]{1,2}|\\\\[\\s\\S]|-|[^-\\\\]","g"));c=[];for(var a=[],k=d[0]==="^",e=k?1:0,h=d.length;e122)){s<65||g>90||a.push([Math.max(65,g)|32,Math.min(s,90)|32]);s<97||g>122||a.push([Math.max(97,g)&-33,Math.min(s,122)&-33])}}a.sort(function(v,w){return v[0]-w[0]||w[1]-v[1]});d=[];g=[NaN,NaN];for(e=0;eh[0]){h[1]+1>h[0]&&a.push("-"); +a.push(i(h[1]))}}a.push("]");return a.join("")}function l(c){for(var d=c.source.match(RegExp("(?:\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]|\\\\u[A-Fa-f0-9]{4}|\\\\x[A-Fa-f0-9]{2}|\\\\[0-9]+|\\\\[^ux0-9]|\\(\\?[:!=]|[\\(\\)\\^]|[^\\x5B\\x5C\\(\\)\\^]+)","g")),a=d.length,k=[],e=0,h=0;e=2&&c==="[")d[e]=o(g);else if(c!=="\\")d[e]=g.replace(/[a-zA-Z]/g,function(s){s=s.charCodeAt(0);return"["+String.fromCharCode(s&-33,s|32)+"]"})}return d.join("")}for(var n=0,r=false,j=false,q=0,m=b.length;q=0;l-=16)o.push(" ".substring(0,l));l=n+1;break;case "\n":f=0;break;default:++f}if(!o)return i;o.push(i.substring(l));return o.join("")}}function I(b, +f,i,o){if(f){b={source:f,c:b};i(b);o.push.apply(o,b.d)}}function B(b,f){var i={},o;(function(){for(var r=b.concat(f),j=[],q={},m=0,t=r.length;m=0;)i[c.charAt(d)]=p;p=p[1];c=""+p;if(!q.hasOwnProperty(c)){j.push(p);q[c]=null}}j.push(/[\0-\uffff]/);o=O(j)})();var l=f.length;function n(r){for(var j=r.c,q=[j,z],m=0,t=r.source.match(o)||[],p={},c=0,d=t.length;c=5&&"lang-"===k.substring(0,5))&&!(e&&typeof e[1]==="string")){h=false;k=P}h||(p[a]=k)}g=m;m+=a.length;if(h){h=e[1];var s=a.indexOf(h),v=s+h.length;if(e[2]){v=a.length-e[2].length;s=v-h.length}k=k.substring(5);I(j+g,a.substring(0,s),n,q);I(j+g+s,h,Q(k,h),q);I(j+g+v,a.substring(v),n,q)}else q.push(j+g,k)}r.d=q}return n}function x(b){var f=[],i=[];if(b.tripleQuotedStrings)f.push([A,/^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/, +null,"'\""]);else b.multiLineStrings?f.push([A,/^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,null,"'\"`"]):f.push([A,/^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,null,"\"'"]);b.verbatimStrings&&i.push([A,/^@\"(?:[^\"]|\"\")*(?:\"|$)/,null]);if(b.hashComments)if(b.cStyleComments){f.push([C,/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,null,"#"]);i.push([A,/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/, +null])}else f.push([C,/^#[^\r\n]*/,null,"#"]);if(b.cStyleComments){i.push([C,/^\/\/[^\r\n]*/,null]);i.push([C,/^\/\*[\s\S]*?(?:\*\/|$)/,null])}b.regexLiterals&&i.push(["lang-regex",RegExp("^"+Z+"(/(?=[^/*])(?:[^/\\x5B\\x5C]|\\x5C[\\s\\S]|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+/)")]);b=b.keywords.replace(/^\s+|\s+$/g,"");b.length&&i.push([R,RegExp("^(?:"+b.replace(/\s+/g,"|")+")\\b"),null]);f.push([z,/^\s+/,null," \r\n\t\u00a0"]);i.push([J,/^@[a-z_$][a-z_$@0-9]*/i,null],[S,/^@?[A-Z]+[a-z][A-Za-z_$@0-9]*/, +null],[z,/^[a-z_$][a-z_$@0-9]*/i,null],[J,/^(?:0x[a-f0-9]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+\-]?\d+)?)[a-z]*/i,null,"0123456789"],[E,/^.[^\s\w\.$@\'\"\`\/\#]*/,null]);return B(f,i)}function $(b){function f(D){if(D>r){if(j&&j!==q){n.push("");j=null}if(!j&&q){j=q;n.push('')}var T=y(p(i.substring(r,D))).replace(e?d:c,"$1 ");e=k.test(T);n.push(T.replace(a,s));r=D}}var i=b.source,o=b.g,l=b.d,n=[],r=0,j=null,q=null,m=0,t=0,p=Y(window.PR_TAB_WIDTH),c=/([\r\n ]) /g, +d=/(^| ) /gm,a=/\r\n?|\n/g,k=/[ \r\n]$/,e=true,h=window._pr_isIE6();h=h?b.b.tagName==="PRE"?h===6?" \r\n":h===7?" 
    \r":" \r":" 
    ":"
    ";var g=b.b.className.match(/\blinenums\b(?::(\d+))?/),s;if(g){for(var v=[],w=0;w<10;++w)v[w]=h+'
  • ';var F=g[1]&&g[1].length?g[1]-1:0;n.push('
    1. ");s=function(){var D=v[++F%10];return j?""+D+'':D}}else s=h; +for(;;)if(m");j=null}n.push(o[m+1]);m+=2}else if(t");g&&n.push("
    ");b.a=n.join("")}function u(b,f){for(var i=f.length;--i>=0;){var o=f[i];if(G.hasOwnProperty(o))"console"in window&&console.warn("cannot override language handler %s",o);else G[o]=b}}function Q(b,f){b&&G.hasOwnProperty(b)||(b=/^\s*1&&m.charAt(0)==="<"){if(!ba.test(m))if(ca.test(m)){f.push(m.substring(9,m.length-3));n+=m.length-12}else if(da.test(m)){f.push("\n");++n}else if(m.indexOf(V)>=0&&m.replace(/\s(\w+)\s*=\s*(?:\"([^\"]*)\"|'([^\']*)'|(\S+))/g,' $1="$2$3$4"').match(/[cC][lL][aA][sS][sS]=\"[^\"]*\bnocode\b/)){var t=m.match(W)[2],p=1,c;c=j+1;a:for(;c=0;){var e=p.indexOf(";",k);if(e>=0){var h=p.substring(k+3,e),g=10;if(h&&h.charAt(0)==="x"){h=h.substring(1);g=16}var s=parseInt(h,g);isNaN(s)||(p=p.substring(0,k)+String.fromCharCode(s)+p.substring(e+1))}}a=p.replace(ea,"<").replace(fa,">").replace(ga,"'").replace(ha,'"').replace(ia," ").replace(ja, +"&")}f.push(a);n+=a.length}}o={source:f.join(""),h:r};var v=o.source;b.source=v;b.c=0;b.g=o.h;Q(i,v)(b);$(b)}catch(w){if("console"in window)console.log(w&&w.stack?w.stack:w)}}var A="str",R="kwd",C="com",S="typ",J="lit",E="pun",z="pln",P="src",V="nocode",Z=function(){for(var b=["!","!=","!==","#","%","%=","&","&&","&&=","&=","(","*","*=","+=",",","-=","->","/","/=",":","::",";","<","<<","<<=","<=","=","==","===",">",">=",">>",">>=",">>>",">>>=","?","@","[","^","^=","^^","^^=","{","|","|=","||","||=", +"~","break","case","continue","delete","do","else","finally","instanceof","return","throw","try","typeof"],f="(?:^^|[+-]",i=0;i:&a-z])/g,"\\$1");f+=")\\s*";return f}(),L=/&/g,M=//g,X=/\"/g,ea=/</g,fa=/>/g,ga=/'/g,ha=/"/g,ja=/&/g,ia=/ /g,ka=/[\r\n]/g,K=null,aa=RegExp("[^<]+|