Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Popcorn.js Documentation
HTML CSS Shell
Tree: 0053a15736

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
_layouts
addon-development
effects
events
getting-started
img
media-methods
media-properties
modules
parsers
players
plugins
popcorn-constructor
prettify
utility-methods
.gitignore
AUTHORS
README.md
_config.yml
index.css
index.html
mobile.css
sync.sh
syntax.css

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 --server --base-url '/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.