Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Popcorn.js Documentation
branch: gh-pages
Failed to load latest commit information.
_layouts Added in how to write your own plugin file, also dummy holder file fo…
addon-development [#958911] Add some media wrapper docs and deprecate the player docs, …
effects [#958911] Add some media wrapper docs and deprecate the player docs, …
events [#958911] Add some media wrapper docs and deprecate the player docs, …
getting-started [#958911] Add some media wrapper docs and deprecate the player docs, …
img CSS styling
media-methods [#958911] Add some media wrapper docs and deprecate the player docs, …
media-properties [#958911] Add some media wrapper docs and deprecate the player docs, …
media-wrappers Correct link to JWPlayer
modules [#958911] Add some media wrapper docs and deprecate the player docs, …
parsers Fixed typos in the documentation of the JSON parser
players [#958911] Add some media wrapper docs and deprecate the player docs, …
plugins Unify the way in which the unities of the start and end options are s…
popcorn-constructor [#958911] Add some media wrapper docs and deprecate the player docs, …
popcorn-methods [#958911] Add some media wrapper docs and deprecate the player docs, …
prettify Moved some files and still debugging
utility-methods [#958911] Add some media wrapper docs and deprecate the player docs, …
.gitignore Adding docs for popcorn methods, and some small updates.
AUTHORS Fixed things maruku was complaining about, documented on,off,emit, ch…
README.md [#970149] Small update to readme
_config.yml Fixed syntax error
index.css Internal nav changes
index.html [#958911] Add some media wrapper docs and deprecate the player docs, …
mobile.css initial push for new docs
sync.sh not bug r=jbuck update sync.sh
syntax.css CSS styling

README.md

Popcorn.js Documentation

The Popcorn.js documentation was written using Jekyll, YAML Front Matter and the liquid templating system.

Requirements

  • Ruby - I would recommend using RubyGems
  • Jekyll - sudo gem install jekyll if you run into any issues, take a look here
  • Pygments - used for styled code samples, take a look at the installation instructions

Setting Up a Local Instance

If you want to setup a local instance to test with run the following command (after installing all of the requirements listed above):

jekyll serve --baseurl '/popcorn-docs'

This will setup up a local copy of the documentation that can be accessed at http://localhost:4000/popcorn-docs/

Writing Documentation

All of our documentation is written in Markdown and is organized into the following format (for the most part):

---
// This is the title of the item we are documenting
// this ends up being the id for the generated element on the page, so be sure to make it unique!
title: Footnote
---

// Title as it will appear on the page, probably the same as the above title
# Footnote #

// A header for the purpose
## Purpose ##

// A brief explanation of what this method/function/etc is supposed to do
Adds text to an element on the page.

// A header for the options (if there is any)
## Options ##

// If there are any options that need to be explained (function parameters, object properties, etc) do it here
// A bulleted list describing each option
// Be sure to specify the desired type(s) i.e Number
* **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

// Provide a brief code sample and/or a jsfiddle showcasing a live example
## Example ##

// Be sure to wrap any code snippets in the following line of liquid templating code
// to make sure that we get code highlighting and line numbers
{% highlight js linenos %}
    var p = Popcorn( "#video" ).footnote({
      start: 5,
      end: 15,
      text: 'This text will appear in "target". ',
      target: "footnotediv"
    });
// also be sure to close it once your code snippet is done
{% endhighlight %}

Community

Something went wrong with that request. Please try again.