Added back in reverted #630

Conflicts:
	test/unit/player.js

.bunyipconfig.js.example

@@ -0,0 +1,21 @@
+/*
+Bunyip is a tool for multi-browser/device testing
+  https://github.com/ryanseddon/bunyip
+It uses a few service under the hood including:
+  Browsertack - http://browserstack.com
+  Pagekite https://pagekite.net
+You'll need accounts at both to use bunyip
+You'll also need to download and install pagekite.py
+*/
+var config = {
+    "browserstack": {
+        "username": "your-browserstack-email@example.com",
+        "password": "your browserstack password",
+        "timeout": 300
+    },
+    "port": 9000,
+    "tunnellink": "your-subdomain.pagekite.me",
+    "tunnel": "pagekite.py <port> your-subdomain.pagekite.me"
+};
+
+module.exports = config;

.editorconfig

@@ -0,0 +1,11 @@
+# editorconfig.org - unify code style
+# plugins for text editors: editorconfig.org/#download
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.gitignore

@@ -0,0 +1,20 @@
+.DS_Store
+dist/*
+build/files/*
+dev.html
+projects
+.zenflow-log
+test/*.map
+.bunyipconfig.js
+.s3config.json
+
+node_modules
+npm-debug.log
+
+sandbox/*
+!sandbox/*.example
+
+*.swp
+*.swo
+
+*.orig

.jshintrc

@@ -0,0 +1,40 @@
+{
+    "evil" : true,
+    "validthis": true,
+    "browser"  : true,
+    "debug"    : true,
+    "boss"     : true,
+    "expr"     : true,
+    "eqnull"   : true,
+    "quotmark" : "single",
+    "sub"      : true,
+    "trailing" : true,
+    "undef"    : true,
+    "laxbreak" : true,
+    "predef"   : [
+        "_V_",
+        "videojs",
+        "vjs",
+        "goog",
+        "console",
+
+        "require",        
+
+        "PlayerTest",
+        "asyncTest",
+        "deepEqual",
+        "equal",
+        "expect",
+        "module",
+        "notDeepEqual",
+        "notEqual",
+        "notStrictEqual",
+        "ok",
+        "QUnit",
+        "raises",
+        "start",
+        "stop",
+        "strictEqual",
+        "test"
+    ]
+}

.travis.yml

@@ -0,0 +1,3 @@
+language: node_js
+node_js:
+  - 0.8

CHANGELOG.md

@@ -0,0 +1,115 @@
+CHANGELOG
+=========
+
+## Unreleased (HEAD)
+_(none)_
+
+--------------------
+
+## 4.2.0 (2013-09-04)
+* Added LESS as a CSS preprocessor for the default skin ([view](https://github.com/videojs/video.js/pull/644))
+* Exported MenuButtons for use in the API ([view](https://github.com/videojs/video.js/pull/648))
+* Fixed ability to remove listeners added with one() ([view](https://github.com/videojs/video.js/pull/659))
+* Updated buffered() to account for multiple loaded ranges ([view](https://github.com/videojs/video.js/pull/643))
+* Exported createItems() for custom menus ([view](https://github.com/videojs/video.js/pull/654))
+* Preventing media events from bubbling up the DOM ([view](https://github.com/videojs/video.js/pull/630))
+* Major reworking of the control bar and many issues fixed ([view](https://github.com/videojs/video.js/pull/672))
+* Fixed an issue with minifiying the code on Windows systems ([view](https://github.com/videojs/video.js/pull/683))
+* Added support for RTMP streaming through Flash ([view](https://github.com/videojs/video.js/pull/605))
+* Made tech.features available to external techs ([view](https://github.com/videojs/video.js/pull/705))
+* Minor code improvements ([view](https://github.com/videojs/video.js/pull/706))
+* Updated time formatting to support NaN and Infinity ([view](https://github.com/videojs/video.js/pull/627))
+* Fixed an `undefined` error in cases where no tech is loaded ([view](https://github.com/videojs/video.js/pull/632))
+* Exported addClass and removeClass for player components ([view](https://github.com/videojs/video.js/pull/661))
+* Made the fallback message customizable ([view](https://github.com/videojs/video.js/pull/638))
+* Fixed an issue with the loading spinner placement and rotation ([view](https://github.com/videojs/video.js/pull/694))
+* Fixed an issue with fonts being flaky in IE8
+
+## 4.1.0 (2013-06-28)
+* Turned on method queuing for unready playback technologies (flash) [view](https://github.com/videojs/video.js/pull/553)
+* Blocking user text selection on player components [view](https://github.com/videojs/video.js/pull/524)
+* Exported requestFullScreen() and cancelFullScreen() in the minified version [view](https://github.com/videojs/video.js/pull/555)
+* Exported the global players reference, videojs.players [view](https://github.com/videojs/video.js/pull/560)
+* Added google analytics to the CDN version ([view](https://github.com/videojs/video.js/pull/568))
+* Exported fadeIn/fadeOut for the Component API ([view](https://github.com/videojs/video.js/pull/581))
+* Fixed an IE poster error when autoplaying ([view](https://github.com/videojs/video.js/pull/593))
+* Exported bufferedPercent for the API ([view](https://github.com/videojs/video.js/pull/588))
+* Augmented user agent detection, specifically for Android versions ([view](https://github.com/videojs/video.js/pull/470))
+* Fixed IE9 canPlayType error ([view](https://github.com/videojs/video.js/pull/606))
+* Fixed various issues with captions ([view](https://github.com/videojs/video.js/pull/609))
+
+## 4.0.4 (2013-06-11)
+* Added google analytics to current CDN version. ([view](https://github.com/videojs/video.js/pull/571))
+
+## 4.0.3 (2013-05-28)
+* Fixed an bug with exiting fullscreen. [view](https://github.com/videojs/video.js/pull/546)
+
+## 4.0.2 (2013-05-23)
+* Correct version number for CDN swf url. Minify CSS. [view](https://github.com/videojs/video.js/pull/535)
+
+## 4.0.1 (2013-05-22)
+* Fixed old IE font loading [view](https://github.com/videojs/video.js/pull/532)
+
+## 4.0.0 (2013-05-09)
+* Improved performance through an 18% size reduction using Google Closure Compiler in advanced mode
+* Greater stability through an automated cross-browser/device test suite using TravisCI, Bunyip, and Browserstack.
+* New plugin interface and plugin listing for extending Video.js
+* New default skin design that uses font icons for greater customization
+* Responsive design and retina display support
+* Improved accessibility through better ARIA support
+* Moved to Apache 2.0 license
+* 100% JavaScript development tool set including Grunt
+* Updated docs to use Github markdown
+* Allow disabling of default components
+* Duration is now setable (need ed for HLS m3u8 files)
+* Event binders (on/off/one) now return the player instance
+* Stopped player from going back to beginning on ended event
+* Added support for percent width/height and fluid layouts
+* Improved load order of elements to reduce reflow
+* Changed addEvent function name to 'on'
+* Removed conflicting array.indexOf function
+* Added exitFullScreen to support BlackBerry devices (pull/143)
+
+## 3.2.0 (2012-03-20)
+* Updated docs with more options.
+* Overhauled HTML5 Track support.
+* Fixed Flash always autoplaying when setting source.
+* Fixed localStorage context
+* Updated 'fullscreenchange' event to be called even if the user presses escape to exit fullscreen.
+* Automatically converting URsource URL to absolute for Flash fallback.
+* Created new 'loadedalldata' event for when  the source is completely downloaded
+* Improved player.destroy(). Now removes elements and references.
+* Refactored API to be more immediately available.
+
+### Patches
+* 3.2.1 (2012-04-06) Fixed setting width/height with javascript options
+* 3.2.2 (2012-05-02) Fixed error with multiple controls fading listeners
+* 3.2.3 (2012-11-12) Fixed chrome spinner continuing on seek
+
+## 3.1.0 (2012-01-30)
+* Added CSS fix for Firefox 9 fullscreen (in the rare case that it's enabled)
+* Replaced swfobject with custom embed to save file size.
+* Added  flash iframe-mode, an experimental method for getting around flash reloading issues.
+* Fixed issue with volume knob position. Improved controls fading.
+* Fixed ian issue with triggering fullscreen a second time.
+* Fixed issue with getting attributes in Firefox 3.0
+* Escaping special characters in source URL for Flash
+* Added a check for if Firefox is enabled which fixes a Firefox 9 issue
+* Stopped spinner from showing on 'stalled' events since browsers sometimes don't show that they've recovered.
+* Fixed CDN Version which was breaking dev.html
+* Made full-window mode more independent
+* Added rakefile for release generation
+
+## 3.0.0 (2012-01-10)
+* Same HTML/CSS Skin for both HTML5 and Flash video
+* Super lightweight Flash fallback player for browsers that don’t support HTML5 video
+* Free CDN hosting
+
+### Patches
+* 3.0.2 (2012-01-12) Started tracking changes with zenflow
+* 3.0.3 (2012-01-12) Added line to docs to test zenflow
+* 3.0.4 (2012-01-12) Fixing an undefined source when no sources exist on load
+* 3.0.5 (2012-01-12) Removed deprecated event.layerX and layerY
+* 3.0.6 (2012-01-12) Fixed wrong URL for CDN in docs
+* 3.0.7 (2012-01-12) Fixed an ie8 breaking bug with the poster
+* 3.0.8 (2012-01-23) Fixed issue with controls not hiding in IE due to no opacity support

CONTRIBUTING.md

@@ -0,0 +1,260 @@
+CONTRIBUTING
+============
+So you want to help out? Great! There's a number of ways you can get involved.
+
+  * [File and discuss issues](#filing-issues)
+  * [Contribute code](#contributing-code)
+  * [Build and share plugins](docs/plugins.md)
+  * [Answer questions on Stack Overflow](http://stackoverflow.com/questions/tagged/video.js)
+
+There's also other Video.js projects where you can help. (check the [video.js org](https://github.com/videojs) for an up-to-date list of projects)
+
+  * [Videojs.com](https://github.com/videojs/videojs.com)
+  * [Video.js flash player](https://github.com/videojs/video-js-swf)
+  * [Player skin designer](https://github.com/videojs/designer)
+  * [Contribflow](https://github.com/zencoder/contribflow)
+
+Filing issues
+-------------
+[GitHub Issues](https://github.com/videojs/video.js/issues) are used for all discussions around the codebase, including **bugs**, **features**, and other **enhancements**.
+
+### Reporting a Bug
+
+**A bug is a demonstrable problem** that is caused by the code in the repository. Good bug reports are extremely helpful. Thank You!
+
+Guidelines for bug reports:
+
+1. Use the [GitHub issue search](https://github.com/videojs/video.js/issues) — check if the issue has already been reported.
+
+2. Check if the issue has already been fixed — try to reproduce it using the latest `master` branch in the repository.
+
+3. Isolate the problem — **create a [reduced test case](http://css-tricks.com/6263-reduced-test-cases/)** with a live example. You can possibly use [this JSBin example](http://jsbin.com/axedog/7/edit) as a starting point.
+
+A good bug report should be as detailed as possible, so that others won't have to follow up for the essential details.
+
+Here's an example:
+
+> Short yet concise Bug Summary
+>
+> Description:
+> Happens on Windows 7 and OSX. Seen with IE9, Firefox 19 OSX, Chrome 21, Flash 11.6 and 11.2
+>
+> 1. This is the first step
+> 2. This is the second step
+> 3. Further steps, etc.
+>
+> Expected:
+> (describe the expected outcome of the steps above)
+>
+> Actual:
+> (describe what actually happens)
+>
+> `<url>` (a link to the reduced test case, if it exists)
+>
+> Any other information you want to share that is relevant to the issue being
+> reported. This might include the lines of code that you have identified as
+> causing the bug, and potential solutions (and your opinions on their
+> merits).
+
+**[File a bug report](https://github.com/videojs/video.js/issues/new)**
+
+### Requesting a Feature
+
+1. [Check the plugin list](https://github.com/videojs/video.js/wiki/Plugins) for any plugins that may already support the feature.
+
+2. [Search the issues](https://github.com/videojs/video.js/issues) for any previous requests for the same feature, and give a thumbs up or +1 on existing requests.
+
+2. If no previous requests exist, create a new issue. Please be as clear as possible about why the feautre is needed and the intended use case.
+
+**[Request a feature](https://github.com/videojs/video.js/issues/new)**
+
+Contributing code
+-----------------
+
+To contibute code you'll need to be able to build a copy of Video.js and run tests locally. There are a few requirements before getting started.
+
+- Node.js -- Video.js uses Node for build and test automation. Node is available for Windows, Mac OS X, Linux, and SunOS, as well as source code if that doesn't scare you. [Download and install Node.js](http://nodejs.org/download/)
+
+- grunt-cli -- Install grunt-cli globally so that you will have the correct version of grunt available for any project that needs it.
+
+  On Unix-based systems, you'll have to do this as a superuser:
+
+```bash
+sudo npm install -g grunt-cli
+```
+  On Windows, you can just run:
+
+```bash
+npm install -g grunt-cli
+```
+
+- Contribflow -- A homegrown git workflow tool for managing feature/hotfix branches and submitting pull requests. If you have your own preferred git workflow, contribflow isn't required, but the following instructions will assume you're using it.
+
+  On Unix-based systems, you'll have to do this as a superuser:
+
+```bash
+sudo npm install -g contribflow
+```
+
+  On Windows, you can just run:
+
+```bash
+npm install -g contribflow
+```
+
+### Building your own copy of Video.js
+
+First, [fork](http://help.github.com/fork-a-repo/) the video.js git repository. At the top of every github page, there is a Fork button. Click it, and the forking process will copy Video.js into your own GitHub account.
+
+Clone your fork of the repo into your code directory
+
+```bash
+git clone https://github.com/<your-username>/video.js.git
+```
+
+Navigate to the newly cloned directory
+
+```bash
+cd video.js
+```
+
+Assign the original repo to a remote called "upstream"
+
+```
+git remote add upstream https://github.com/videojs/video.js.git
+```
+
+>In the future, if you want to pull in updates to video.js that happened after you cloned the main repo, you can run:
+>
+> ```bash
+> git checkout master
+> git pull upstream master
+> ```
+
+Install the required node.js modules using node package manager
+
+```bash
+npm install
+```
+
+> A note to Windows developers: If you run npm commands, and you find that your command prompt colors have suddenly reversed, you can configure npm to set color to false to prevent this from happening.
+> `npm config set color false`
+> Note that this change takes effect when a new command prompt window is opened; the current window will not be affected.
+
+Build a local copy of video.js and run tests
+
+```bash
+grunt
+grunt test
+```
+
+At this point you should have a built copy of video.js in a directory named `dist`, and all tests should be passing.
+
+### Making Changes
+
+Whether you're adding something new, making something better, or fixing a bug, you'll first want to search the [GitHub issues](https://github.com/videojs/video.js/issues) and [plugins list](https://github.com/videojs/video.js/wiki/Plugins) to make sure you're aware of any previous discussion or work. If an unclaimed issue exists, claim it via a comment. If no issue exists for your change, submit one, follwing the [issue filing guidelines](#filing-issues).
+
+There are two categories of changes in video.js land, features and hotfixes (Video.js follows a branching model similar to [gitflow](http://nvie.com/posts/a-successful-git-branching-model/)). Hotfixes are for urgent fixes that need to be released immediately as a patch. Features are for everything else (including non-urgent fixes). If you think you have a hotfix scenario, verify that (via comment) before starting the work. We'll focus on features here, but you can swap `hotfix` for `feature` in any command.
+
+Start a new development branch
+
+```bash
+contrib feature start
+```
+
+You'll be prompted to name the branch.  After that, contrib will create the branch locally, and use git to push it up to your origin, and track it.  You're now ready to start building your feature or fixing that bug! Be sure to read the [Code Style Guide](#code-style-guide).
+
+While you're developing, you can ensure your changes are working by writing tests (in the `test` directory) and running `grunt test`.
+
+There's also a sandbox directory where you can add any file and it won't get tracked as a change. To start you can copy the example index file and see a working version of a player (using the local source code) by loading it in a browser.
+
+```bash
+cp sandbox/index.html.example sandbox/index.html
+open sandbox/index.html
+```
+
+> #### NOTE: Testing Flash Locally in Chrome
+> Chrome 21+ (as of 2013/01/01) doens't run Flash files that are local and loaded into a locally accessed page (file:///).
+> To get around this you can do either of the following:
+>
+> 1. Do your development and testing using a local HTTP server.
+>
+> 2. [Disable the version of Flash included with Chrome](http://helpx.adobe.com/flash-player/kb/flash-player-google-chrome.html#How_can_I_run_debugger_or_alternate_versions_of_Flash_Player_in_Google_Chrome) and enable a system-wide version of Flash instead.
+
+
+Commit and push changes as you go (using git directly). Write thorough descriptions of your changes in your commit messages.
+
+```bash
+git add .
+git commit -av
+git push
+```
+
+> GitHub allows you to close an issue through your commit message using the [fixes](https://github.com/blog/831-issues-2-0-the-next-generation) keyword.
+>
+> ```bash
+> My commit message. fixes #123
+> Testing: (briefly describe any testing here, for example, 'unit tests and cross-browser manual tests around playback and network interruption')
+> ```
+
+### Submitting your changes
+
+First, thoroughly test your feature or fix, including writing tests to make sure your change doesn't get regressed in a future update. If you're fixing a bug, we recommend in addition to testing the fix itself, to do some testing around the areas that your fix has touched. For example, a brief smoketest of the player never hurts.
+
+Make sure your changes are pushed to origin
+
+```bash
+git push
+```
+
+Use contrib to submit a a pull request (make sure you're in your feature branch)
+
+```bash
+contrib feature submit
+```
+
+You'll be prompted for title and description for the Pull Request.  After that, contrib will use Git to submit your pull request to video.js.
+
+You're Done! (except for cleanup.) To clean up your feature or hotfix branch:
+
+First, checkout your feature or issue branch:
+
+```bash
+git checkout (branchname)
+```
+
+Run this command to clean up your feature:
+
+```bash
+contrib feature delete
+```
+
+Run this command to clean up your bug fix:
+
+```bash
+contrib hotfix delete
+```
+> PLEASE NOTE: THIS WILL DELETE YOUR LOCAL AND REMOTE COPIES OF THE FEATURE.
+> This is meant to clean up your local and remote branches, so make sure any changes you don't want to lose have been pulled into the parent project or another branch first.
+
+Code Style Guide
+----------------
+Please follow [Google's JavaScript Style Guide](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml) to the letter. If your editor supports [.editorconfig](http://editorconfig.org/#download) it will make it easier to manage differences from your own coding style.
+
+### Style examples include:
+* Two space indents.
+* Delimit strings with single-quotes `'`, not double-quotes `"`.
+* No trailing whitespace, except in markdown files where a linebreak must be forced.
+* No more than [one assignment](http://benalman.com/news/2012/05/multiple-var-statements-javascript/) per `var` statement.
+* Prefer `if` and `else` to ["clever"](http://programmers.stackexchange.com/a/25281) uses of `? :` conditional or `||`, `&&` logical operators.
+* **When in doubt, follow the conventions you see used in the source already.**
+
+If you happen to find something in the codebase that does not follow the style guide, that's a good opportunity to make your first contribution!
+
+---
+### Doc Credit
+This doc was inspired by some great contribution guide examples including [contribute.md template](https://github.com/contribute-md/contribute-md-template),
+[grunt](https://github.com/gruntjs/grunt/wiki/Contributing),
+[html5 boilerplate](https://github.com/h5bp/html5-boilerplate/blob/master/CONTRIBUTING.md),
+[jquery](https://github.com/jquery/jquery/blob/master/CONTRIBUTING.md),
+and [node.js](https://github.com/joyent/node/wiki/Contributing).

Gruntfile.js

@@ -0,0 +1,295 @@
+module.exports = function(grunt) {
+  var pkg, s3, semver, version, verParts, uglify;
+
+  semver = require('semver');
+  pkg = grunt.file.readJSON('package.json');
+  uglify = require('uglify-js');
+
+  try {
+    s3 = grunt.file.readJSON('.s3config.json');
+  } catch(e) {
+    s3 = {};
+  }
+
+  verParts = pkg.version.split('.');
+  version = {
+    full: pkg.version,
+    major: verParts[0],
+    minor: verParts[1],
+    patch: verParts[2]
+  };
+  version.majorMinor = version.major + '.' + version.minor;
+
+  // Project configuration.
+  grunt.initConfig({
+    pkg: pkg,
+
+    build: {
+      src: 'src/js/dependencies.js',
+      options: {
+        baseDir: 'src/js/'
+      }
+    },
+    clean: {
+      build: ['build/files/*'],
+      dist: ['dist/*']
+    },
+    jshint: {
+      src: {
+        src: ['src/js/*.js', 'Gruntfile.js', 'test/unit/*.js'],
+        options: {
+          jshintrc: '.jshintrc'
+        }
+      }
+    },
+    minify: {
+      source:{
+        src: ['build/files/combined.video.js', 'build/compiler/goog.base.js', 'src/js/exports.js'],
+        externs: ['src/js/media/flash.externs.js'],
+        dest: 'build/files/minified.video.js'
+      },
+      tests: {
+        src: ['build/files/combined.video.js', 'build/compiler/goog.base.js', 'src/js/exports.js', 'test/unit/*.js', '!test/unit/api.js'],
+        externs: ['src/js/media/flash.externs.js', 'test/qunit/qunit-externs.js'],
+        dest: 'build/files/test.minified.video.js'
+      }
+    },
+    dist: {},
+    qunit: {
+      source: ['test/index.html'],
+      minified: ['test/minified.html'],
+      minified_api: ['test/minified-api.html']
+    },
+    watch: {
+      files: [ 'src/**/*', 'test/unit/*.js', 'Gruntfile.js' ],
+      tasks: 'dev'
+    },
+    copy: {
+      minor: {
+        files: [
+          {expand: true, cwd: 'build/files/', src: ['*'], dest: 'dist/'+version.majorMinor+'/', filter: 'isFile'} // includes files in path
+        ]
+      },
+      patch: {
+        files: [
+          {expand: true, cwd: 'build/files/', src: ['*'], dest: 'dist/'+version.full+'/', filter: 'isFile'} // includes files in path
+        ]
+      }
+    },
+    s3: {
+      options: s3,
+      minor: {
+        upload: [
+          {
+            src: 'dist/cdn/*',
+            dest: 'vjs/'+version.majorMinor+'/',
+            rel: 'dist/cdn/',
+            headers: {
+              'Cache-Control': 'public, max-age=2628000'
+            }
+          }
+        ]
+      },
+      patch: {
+        upload: [
+          {
+            src: 'dist/cdn/*',
+            dest: 'vjs/'+version.full+'/',
+            rel: 'dist/cdn/',
+            headers: {
+              'Cache-Control': 'public, max-age=31536000'
+            }
+          }
+        ]
+      }
+    },
+    cssmin: {
+      minify: {
+        expand: true,
+        cwd: 'build/files/',
+        src: ['video-js.css'],
+        dest: 'build/files/',
+        ext: '.min.css'
+      }
+    },
+    less: {
+      dev: {
+        files: {
+          'build/files/video-js.css': 'src/css/video-js.less'
+        }
+      }
+    }
+  });
+
+  grunt.loadNpmTasks('grunt-contrib-jshint');
+  grunt.loadNpmTasks('grunt-contrib-qunit');
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-contrib-clean');
+  grunt.loadNpmTasks('grunt-contrib-copy');
+  grunt.loadNpmTasks('grunt-contrib-cssmin');
+  grunt.loadNpmTasks('grunt-contrib-less');
+  grunt.loadNpmTasks('grunt-s3');
+  grunt.loadNpmTasks('contribflow');
+
+  // Default task.
+  grunt.registerTask('default', ['jshint', 'less', 'build', 'minify', 'dist']);
+  // Development watch task
+  grunt.registerTask('dev', ['jshint', 'less', 'build', 'qunit:source']);
+  grunt.registerTask('test', ['jshint', 'less', 'build', 'minify', 'qunit']);
+
+  var fs = require('fs'),
+      gzip = require('zlib').gzip;
+
+  grunt.registerMultiTask('build', 'Building Source', function(){
+    /*jshint undef:false, evil:true */
+
+    // Loading predefined source order from source-loader.js
+    // Trust me, this is the easist way to do it so far.
+    var blockSourceLoading = true;
+    var sourceFiles; // Needed to satisfy jshint
+    eval(grunt.file.read('./build/source-loader.js'));
+
+    // Fix windows file path delimiter issue
+    var i = sourceFiles.length;
+    while (i--) {
+      sourceFiles[i] = sourceFiles[i].replace(/\\/g, '/');
+    }
+
+    // Create a combined sources file. https://github.com/zencoder/video-js/issues/287
+    var combined = '';
+    sourceFiles.forEach(function(result){
+      combined += grunt.file.read(result);
+    });
+    // Replace CDN version ref in js. Use major/minor version.
+    combined = combined.replace(/GENERATED_CDN_VSN/g, version.majorMinor);
+    grunt.file.write('build/files/combined.video.js', combined);
+
+    // Copy over other files
+    // grunt.file.copy('src/css/video-js.png', 'build/files/video-js.png');
+    grunt.file.copy('src/swf/video-js.swf', 'build/files/video-js.swf');
+
+    // Inject version number into css file
+    var css = grunt.file.read('build/files/video-js.css');
+    css = css.replace(/GENERATED_AT_BUILD/g, version.full);
+    grunt.file.write('build/files/video-js.css', css);
+
+    // Copy over font files
+    grunt.file.recurse('src/css/font', function(absdir, rootdir, subdir, filename) {
+      // Block .DS_Store files
+      if ('filename'.substring(0,1) !== '.') {
+        grunt.file.copy(absdir, 'build/files/font/' + filename);
+      }
+    });
+
+    // Minify CSS
+    grunt.task.run(['cssmin']);
+  });
+
+  grunt.registerMultiTask('minify', 'Minify JS files using Closure Compiler.', function() {
+    var done = this.async();
+    var exec = require('child_process').exec;
+
+    var externs = this.data.externs || [];
+    var dest = this.data.dest;
+    var filePatterns = [];
+
+    // Make sure deeper directories exist for compiler
+    grunt.file.write(dest, '');
+
+    if (this.data.sourcelist) {
+      filePatterns = filePatterns.concat(grunt.file.read(this.data.sourcelist).split(','));
+    }
+    if (this.data.src) {
+      filePatterns = filePatterns.concat(this.data.src);
+    }
+
+    // Build closure compiler shell command
+    var command = 'java -jar build/compiler/compiler.jar'
+                + ' --compilation_level ADVANCED_OPTIMIZATIONS'
+                // + ' --formatting=pretty_print'
+                + ' --js_output_file=' + dest
+                + ' --create_source_map ' + dest + '.map --source_map_format=V3'
+                + ' --jscomp_warning=checkTypes --warning_level=VERBOSE'
+                + ' --output_wrapper "/*! Video.js v' + version.full + ' ' + pkg.copyright + ' */ (function() {%output%})();//@ sourceMappingURL=video.js.map"';
+
+    // Add each js file
+    grunt.file.expand(filePatterns).forEach(function(file){
+      command += ' --js='+file;
+    });
+
+    // Add externs
+    externs.forEach(function(extern){
+      command += ' --externs='+extern;
+    });
+
+    // Run command
+    exec(command, { maxBuffer: 500*1024 }, function(err, stdout, stderr){
+
+      if (err) {
+        grunt.warn(err);
+        done(false);
+      }
+
+      if (stdout) {
+        grunt.log.writeln(stdout);
+      }
+
+      done();
+    });
+  });
+
+  grunt.registerTask('dist', 'Creating distribution', function(){
+    var exec = require('child_process').exec;
+    var done = this.async();
+    var css, jsmin, jsdev, cdnjs;
+
+    // Manually copy each source file
+    grunt.file.copy('build/files/minified.video.js', 'dist/video-js/video.js');
+    grunt.file.copy('build/files/combined.video.js', 'dist/video-js/video.dev.js');
+    grunt.file.copy('build/files/video-js.css', 'dist/video-js/video-js.css');
+    grunt.file.copy('build/files/video-js.min.css', 'dist/video-js/video-js.min.css');
+    grunt.file.copy('build/files/video-js.swf', 'dist/video-js/video-js.swf');
+    grunt.file.copy('build/demo-files/demo.html', 'dist/video-js/demo.html');
+    grunt.file.copy('build/demo-files/demo.captions.vtt', 'dist/video-js/demo.captions.vtt');
+
+    // Copy over font files
+    grunt.file.recurse('build/files/font', function(absdir, rootdir, subdir, filename) {
+      // Block .DS_Store files
+      if ('filename'.substring(0,1) !== '.') {
+        grunt.file.copy(absdir, 'dist/video-js/font/' + filename);
+      }
+    });
+
+    // CDN version uses already hosted font files
+    // Minified version only, doesn't need demo files
+    grunt.file.copy('build/files/minified.video.js', 'dist/cdn/video.js');
+    grunt.file.copy('build/files/video-js.min.css', 'dist/cdn/video-js.css');
+    grunt.file.copy('build/files/video-js.swf', 'dist/cdn/video-js.swf');
+
+    // Replace font urls with CDN versions
+    css = grunt.file.read('dist/cdn/video-js.css');
+    css = css.replace(/font\//g, '../f/1/');
+    grunt.file.write('dist/cdn/video-js.css', css);
+
+    // Add CDN-specfic JS
+    jsmin = grunt.file.read('dist/cdn/video.js');
+    // GA Tracking Pixel (manually building the pixel URL)
+    cdnjs = uglify.minify('src/js/cdn.js').code.replace('v0.0.0', 'v'+version.full);
+    grunt.file.write('dist/cdn/video.js', jsmin + cdnjs);
+
+    // Zip up into video-js-VERSION.zip
+    exec('cd dist && zip -r video-js-'+version.full+'.zip video-js && cd ..', { maxBuffer: 500*1024 }, function(err, stdout, stderr){
+
+      if (err) {
+        grunt.warn(err);
+        done(false);
+      }
+
+      if (stdout) {
+        grunt.log.writeln(stdout);
+      }
+
+      done();
+    });
+  });
+};

LICENSE

@@ -0,0 +1,13 @@
+Copyright 2013 Brightcove, Inc.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

LICENSE.txt

@@ -1,165 +0,0 @@
-                   GNU LESSER GENERAL PUBLIC LICENSE
-                       Version 3, 29 June 2007
-
- Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
- Everyone is permitted to copy and distribute verbatim copies
- of this license document, but changing it is not allowed.
-
-
-  This version of the GNU Lesser General Public License incorporates
-the terms and conditions of version 3 of the GNU General Public
-License, supplemented by the additional permissions listed below.
-
-  0. Additional Definitions.
-
-  As used herein, "this License" refers to version 3 of the GNU Lesser
-General Public License, and the "GNU GPL" refers to version 3 of the GNU
-General Public License.
-
-  "The Library" refers to a covered work governed by this License,
-other than an Application or a Combined Work as defined below.
-
-  An "Application" is any work that makes use of an interface provided
-by the Library, but which is not otherwise based on the Library.
-Defining a subclass of a class defined by the Library is deemed a mode
-of using an interface provided by the Library.
-
-  A "Combined Work" is a work produced by combining or linking an
-Application with the Library.  The particular version of the Library
-with which the Combined Work was made is also called the "Linked
-Version".
-
-  The "Minimal Corresponding Source" for a Combined Work means the
-Corresponding Source for the Combined Work, excluding any source code
-for portions of the Combined Work that, considered in isolation, are
-based on the Application, and not on the Linked Version.
-
-  The "Corresponding Application Code" for a Combined Work means the
-object code and/or source code for the Application, including any data
-and utility programs needed for reproducing the Combined Work from the
-Application, but excluding the System Libraries of the Combined Work.
-
-  1. Exception to Section 3 of the GNU GPL.
-
-  You may convey a covered work under sections 3 and 4 of this License
-without being bound by section 3 of the GNU GPL.
-
-  2. Conveying Modified Versions.
-
-  If you modify a copy of the Library, and, in your modifications, a
-facility refers to a function or data to be supplied by an Application
-that uses the facility (other than as an argument passed when the
-facility is invoked), then you may convey a copy of the modified
-version:
-
-   a) under this License, provided that you make a good faith effort to
-   ensure that, in the event an Application does not supply the
-   function or data, the facility still operates, and performs
-   whatever part of its purpose remains meaningful, or
-
-   b) under the GNU GPL, with none of the additional permissions of
-   this License applicable to that copy.
-
-  3. Object Code Incorporating Material from Library Header Files.
-
-  The object code form of an Application may incorporate material from
-a header file that is part of the Library.  You may convey such object
-code under terms of your choice, provided that, if the incorporated
-material is not limited to numerical parameters, data structure
-layouts and accessors, or small macros, inline functions and templates
-(ten or fewer lines in length), you do both of the following:
-
-   a) Give prominent notice with each copy of the object code that the
-   Library is used in it and that the Library and its use are
-   covered by this License.
-
-   b) Accompany the object code with a copy of the GNU GPL and this license
-   document.
-
-  4. Combined Works.
-
-  You may convey a Combined Work under terms of your choice that,
-taken together, effectively do not restrict modification of the
-portions of the Library contained in the Combined Work and reverse
-engineering for debugging such modifications, if you also do each of
-the following:
-
-   a) Give prominent notice with each copy of the Combined Work that
-   the Library is used in it and that the Library and its use are
-   covered by this License.
-
-   b) Accompany the Combined Work with a copy of the GNU GPL and this license
-   document.
-
-   c) For a Combined Work that displays copyright notices during
-   execution, include the copyright notice for the Library among
-   these notices, as well as a reference directing the user to the
-   copies of the GNU GPL and this license document.
-
-   d) Do one of the following:
-
-       0) Convey the Minimal Corresponding Source under the terms of this
-       License, and the Corresponding Application Code in a form
-       suitable for, and under terms that permit, the user to
-       recombine or relink the Application with a modified version of
-       the Linked Version to produce a modified Combined Work, in the
-       manner specified by section 6 of the GNU GPL for conveying
-       Corresponding Source.
-
-       1) Use a suitable shared library mechanism for linking with the
-       Library.  A suitable mechanism is one that (a) uses at run time
-       a copy of the Library already present on the user's computer
-       system, and (b) will operate properly with a modified version
-       of the Library that is interface-compatible with the Linked
-       Version.
-
-   e) Provide Installation Information, but only if you would otherwise
-   be required to provide such information under section 6 of the
-   GNU GPL, and only to the extent that such information is
-   necessary to install and execute a modified version of the
-   Combined Work produced by recombining or relinking the
-   Application with a modified version of the Linked Version. (If
-   you use option 4d0, the Installation Information must accompany
-   the Minimal Corresponding Source and Corresponding Application
-   Code. If you use option 4d1, you must provide the Installation
-   Information in the manner specified by section 6 of the GNU GPL
-   for conveying Corresponding Source.)
-
-  5. Combined Libraries.
-
-  You may place library facilities that are a work based on the
-Library side by side in a single library together with other library
-facilities that are not Applications and are not covered by this
-License, and convey such a combined library under terms of your
-choice, if you do both of the following:
-
-   a) Accompany the combined library with a copy of the same work based
-   on the Library, uncombined with any other library facilities,
-   conveyed under the terms of this License.
-
-   b) Give prominent notice with the combined library that part of it
-   is a work based on the Library, and explaining where to find the
-   accompanying uncombined form of the same work.
-
-  6. Revised Versions of the GNU Lesser General Public License.
-
-  The Free Software Foundation may publish revised and/or new versions
-of the GNU Lesser General Public License from time to time. Such new
-versions will be similar in spirit to the present version, but may
-differ in detail to address new problems or concerns.
-
-  Each version is given a distinguishing version number. If the
-Library as you received it specifies that a certain numbered version
-of the GNU Lesser General Public License "or any later version"
-applies to it, you have the option of following the terms and
-conditions either of that published version or of any later version
-published by the Free Software Foundation. If the Library as you
-received it does not specify a version number of the GNU Lesser
-General Public License, you may choose any version of the GNU Lesser
-General Public License ever published by the Free Software Foundation.
-
-  If the Library as you received it specifies that a proxy can decide
-whether future versions of the GNU Lesser General Public License shall
-apply, that proxy's public statement of acceptance of any version is
-permanent authorization for you to choose that version for the
-Library.

README.markdown

@@ -1,215 +0,0 @@
-VideoJS - [HTML5 Video Player](http://videojs.com)
-==================================================
-Version 2.0.2
-
-View [VideoJS.com](http://videojs.com) for a demo and overview.
-
-VideoJS is an HTML5 video player that uses the HTML5 video tag built into modern browsers, and uses javascript to add custom controls, new functionality, and to fix cross browser bugs.
-
-The base of VideoJS is Kroc Camen's [Video for Everybody](http://camendesign.com/code/video_for_everybody), which is a video embed code that falls back to a Flash video player or download links for browsers and devices that don't support HTML5 video.
-
-View demo.html for an example of how to use it.
-
-Originally based on [this tutorial](http://blog.steveheffernan.com/2010/04/how-to-build-an-html5-video-player/).
-
-Contributors (Github Username)
-------------------------------
-heff, dz0ny, sentientbit, tvdeyen, brandonarbini, gordonbrander, Shraymonks, albertogasparin, sandaru1, nicholasbs, majornista, Fredust85, @wonderboymusic, ellis-, emirpprime, eirikb, mbrubeck
-
-
-Getting Started
----------------
-
-### Step 1: Include VideoJS Javascript and CSS files in your page.
-Change the src/href to the appropriate location on your server.
-
-    <script src="video.js" type="text/javascript" charset="utf-8"></script>
-    <link rel="stylesheet" href="video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
-
-
-### Step 2: Add the VideoJS setup code to your page or another script.
-Must run after the VideoJS javascript file has been included
-
-    <script type="text/javascript" charset="utf-8">
-
-      // Add VideoJS to all video tags on the page when the DOM is ready
-      VideoJS.setupAllWhenReady();
-
-    </script>
-
-
-### Step 3: Add the VideoJS embed code to your page (grab the latest version for demo.html).
-Change the video and image files to your own. You can even swap out the Flash Fallback for your own, just maintain the "vjs-flash-fallback" class on the object. I know, seems like a lot of HTML, but it's super compatible. [Check it](http://camendesign.com/code/video_for_everybody/test.html).
-
-    <!-- Begin VideoJS -->
-    <div class="video-js-box">
-      <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
-      <video id="example_video_1" class="video-js" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload>
-        <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
-        <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
-        <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />
-        <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
-        <object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
-          data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
-          <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
-          <param name="wmode" value="opaque" />
-          <param name="allowfullscreen" value="true" />
-          <param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
-          <!-- Image Fallback. Typically the same as the poster image. -->
-          <img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
-            title="No video playback capabilities." />
-        </object>
-      </video>
-      <!-- Download links provided for devices that can't play video in the browser. -->
-      <p class="vjs-no-video"><strong>Download Video:</strong>
-        <a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
-        <a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
-        <a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br>
-        <!-- Support VideoJS by keeping this link. -->
-        <a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
-      </p>
-    </div>
-    <!-- End VideoJS -->
-
-
-Storing a Reference to the Player(s)
-------------------------------------
-You can set up the player(s) in a way that allows you to access it later, and control things like the video playback. In this case, the setup has to happen after the DOM has been loaded. You can use any library's DOM Ready method, or the one built into VideoJS.
-
-### Using a Video's ID or Element
-
-    VideoJS.DOMReady(function(){
-      var myPlayer = VideoJS.setup("example_video_1");
-    });
-
-
-### Using an array of video elements/IDs
-Note: It returns an array of players
-
-    VideoJS.DOMReady(function(){
-      var myManyPlayers = VideoJS.setup(["example_video_1", "example_video_2", video3Element]);
-    });
-
-
-### All videos on the page with the "video-js" class
-
-    VideoJS.DOMReady(function(){
-      var myManyPlayers = VideoJS.setup("All");
-    });
-
-
-### After you have references to your players you can...(example)
-
-    VideoJS.DOMReady(function(){
-      var myPlayer = VideoJS.setup("example_video_1");
-      myPlayer.play(); // Starts playing the video for this player.
-    });
-
-
-Setting Options
----------------
-Set options when setting up the videos. The defaults are shown here.
-
-    VideoJS.setupAllWhenReady({
-      controlsBelow: false, // Display control bar below video instead of in front of
-      controlsHiding: true, // Hide controls when mouse is not over the video
-      defaultVolume: 0.85, // Will be overridden by user's last volume if available
-      flashPlayerVersion: 9, // Required flash version for fallback
-    });
-
-### Or as the second option of VideoJS.setup
-
-    VideoJS.DOMReady(function(){
-      var myPlayer = VideoJS.setup("example_video_1", {
-        // Same options
-      });
-    });
-
-
-Coming Next
------------
-- API to Flash fallback
-
-Changelog
----------
-2.0.3
-
-- Feature: Made returning to the start at the end of the movie an option ("returnToStart").
-- Feature: Added loop option to loop movie ("loop").
-- Feature: Reorganized player API and listeners.
-- Feature: Added option to disable controls. controlsEnabled: false
-- Feature: Setup method now has a callback, so you can more easily work with the player after setup
-- Feature: Added listeners for enter/exit full screen/window.
-- Feature: Added a VideoJS.player(id) function for getting the player for a video ID
-- Changes: setupAllWhenReady is now just setupAll (backward compatible)
-- Fix: Check for Android browser now excludes firefox and opera
-
-2.0.2 (2010-12-10)
-
-- Feature: Rewrote and optimized subtitle code.
-- Feature: Protecting against volume ranges outside of 1 and 0.
-- Fix: Bug in Safari for Mac OS 10.5 (Leopard) that was breaking fullscreen.
-
-2.0.1 (2010-11-22)
-
-- Fix: Issue with big play button when multiple videos are on the page.
-- Fix: Optimized play progress tracking.
-- Fix: Optimized buffer progress checking.
-- Fix: Firefox not showing Flash fallback object.
-
-2.0.0 (2010-11-21)
-
-- Feature: Created "behaviors" concept for adding behaviors to elements
-- Feature: Switched back to divs for controls, for more portable styles
-- Feature: Created playerFallbackOrder array option. ["html5", "flash", "links"]
-- Feature: Created playerType concept, for initializing different platforms
-- Feature: Added play button for Android
-- Feature: Added spinner for iPad (non-fullscreen)
-- Feature: Split into multiple files for easier development
-- Feature: Combined VideoJS & _V_ into the same variable to reduce confusion
-- Fix: Checking for m3u8 files (Apple HTTP Streaming)
-- Fix: Catching error on localStorage full that safari seems to randomly throw
-- Fix: Scrubbing to end doesn't trigger onEnded
-
-1.1.5 (2010-11-09)
-
-- Feature: Switched to track method for setting subtitles. Now works like spec.
-- Feature: Created "players" concept for defining fallbacks and fallback order
-- Fix: Android playback bug.
-- Fix: Massive reorganization of code to make easier to navigate
-
-1.1.4 (2010-11-06)
-
-- Feature: Added loading spinner.
-- Feature: Improved styles loaded checking.
-- Feature: Added volume() function to get and set volume through the player.
-- Fix: Fix issue where FF would loop video in background when ended.
-- Fix: Bug in Chrome that shows poster & plays audio if you set currentTime too quickly.
-- Fix: Bug in Safari where waiting is triggered and shows spinner when not needed
-- Fix: Updated to show links if only unplayable sources and no Flash.
-- Fix: Issue where if play button was loaded after play, it wouldn't hide.
-
-1.1.3 (2010-10-19)
-
-- Feature: Width/Height functions for resizing the player
-- Feature: Made initial click & hold trigger new value on progress and volume
-- Feature: Made controls not hide when hovering over them
-- Feature: Added big play button as default starting control.
-- Fix: Removed trailing comma that was breaking IE7
-- Fix: Removed some vars from global scope
-- Fix: Changed a document.onmousemove to an eventListener to prevent conflicts
-- Fix: Added a unique ID to FlowPlayer demo object to fix a FlowPlayer bug. Thanks @emirpprime.
-- Fix: Safari error on unloaded video
-
-1.1.2 (2010-09-20)
-
-- Added a fix for the poster bug in iPad/iPhone
-- Added more specificity to styles
-
-1.1.1 (2010-09-14)
-
-- First Formally Versioned Release
-  
-1.0.0 (2010-05-18)
-
-- First released

README.md

@@ -0,0 +1,18 @@
+
+# [Video.js - HTML5 Video Player](http://videojs.com)  [![Build Status](https://travis-ci.org/zencoder/video-js.png?branch=master)](https://travis-ci.org/zencoder/video-js)
+
+> Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 and Flash video, as well as YouTube and Vimeo (through [plugins](https://github.com/videojs/video.js/wiki/Plugins)). It supports video playback on desktops and mobile devices. This project was started mid 2010, and the player is now used on over 50,000 websites.
+
+Visit [videojs.com](http://videojs.com) for an overview, download options, and instructions on how to use the player on your site.
+
+## Contributing
+Video.js is a free and open source library, and we appreciate any help you're willing to give. Check out the [contributing guide](CONTRIBUTING.md).
+
+## Building your own Video.js from source
+To build your own custom version read the section on [contributing code](CONTRIBUTING.md#contributing-code) and ["Building your own copy"](CONTRIBUTING.md#building-your-own-copy-of-videojs) in the contributing guide.
+
+## License
+
+Video.js is licensed under the Apache License, Version 2.0. [View the license file](LICENSE)
+
+Copyright 2013 Brightcove, Inc.

browsers.json

@@ -0,0 +1,37 @@
+[
+  {
+    "os": "win",
+    "browser": "chrome",
+    "version": "27.0"
+  },
+  {
+    "os": "win",
+    "browser": "firefox",
+    "version": "20.0"
+  },
+  {
+    "os": "win",
+    "browser": "ie",
+    "version": "9.0"
+  },
+  {
+    "os": "win",
+    "browser": "ie",
+    "version": "10.0"
+  },
+  {
+    "os": "ios",
+    "device": "iPhone 5",
+    "version": "6.0"
+  },
+  {
+    "os": "ios",
+    "device": "iPad 3rd (6.0)",
+    "version": "6.0"
+  },
+  {
+    "os": "android",
+    "device": "Samsung Galaxy Tab 2 10.1",
+    "version": "4.0"
+  }
+]

build/compiler/COPYING

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

build/compiler/README

@@ -0,0 +1,292 @@
+/*
+ * Copyright 2009 The Closure Compiler Authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+//
+// Contents
+//
+
+The Closure Compiler performs checking, instrumentation, and
+optimizations on JavaScript code. The purpose of this README is to
+explain how to build and run the Closure Compiler.
+
+The Closure Compiler requires Java 6 or higher.
+http://www.java.com/
+
+
+//
+// Building The Closure Compiler
+//
+
+There are three ways to get a Closure Compiler executable.
+
+1) Use one we built for you.
+
+Pre-built Closure binaries can be found at
+http://code.google.com/p/closure-compiler/downloads/list
+
+
+2) Check out the source and build it with Apache Ant.
+
+First, check out the full source tree of the Closure Compiler. There
+are instructions on how to do this at the project site.
+http://code.google.com/p/closure-compiler/source/checkout
+
+Apache Ant is a cross-platform build tool.
+http://ant.apache.org/
+
+At the root of the source tree, there is an Ant file named
+build.xml. To use it, navigate to the same directory and type the
+command
+
+ant jar
+
+This will produce a jar file called "build/compiler.jar".
+
+
+3) Check out the source and build it with Eclipse.
+
+Eclipse is a cross-platform IDE.
+http://www.eclipse.org/
+
+Under Eclipse's File menu, click "New > Project ..." and create a
+"Java Project."  You will see an options screen. Give the project a
+name, select "Create project from existing source," and choose the
+root of the checked-out source tree as the existing directory. Verify
+that you are using JRE version 6 or higher.
+
+Eclipse can use the build.xml file to discover rules. When you
+navigate to the build.xml file, you will see all the build rules in
+the "Outline" pane. Run the "jar" rule to build the compiler in
+build/compiler.jar.
+
+
+//
+// Running The Closure Compiler
+//
+
+Once you have the jar binary, running the Closure Compiler is straightforward.
+
+On the command line, type
+
+java -jar compiler.jar
+
+This starts the compiler in interactive mode. Type
+
+var x = 17 + 25;
+
+then hit "Enter", then hit "Ctrl-Z" (on Windows) or "Ctrl-D" (on Mac or Linux)
+and "Enter" again. The Compiler will respond:
+
+var x=42;
+
+The Closure Compiler has many options for reading input from a file,
+writing output to a file, checking your code, and running
+optimizations. To learn more, type
+
+java -jar compiler.jar --help
+
+You can read more detailed documentation about the many flags at
+http://code.google.com/closure/compiler/docs/gettingstarted_app.html
+
+
+//
+// Compiling Multiple Scripts
+//
+
+If you have multiple scripts, you should compile them all together with
+one compile command.
+
+java -jar compiler.jar --js=in1.js --js=in2.js ... --js_output_file=out.js
+
+The Closure Compiler will concatenate the files in the order they're
+passed at the command line.
+
+If you need to compile many, many scripts together, you may start to
+run into problems with managing dependencies between scripts. You
+should check out the Closure Library. It contains functions for
+enforcing dependencies between scripts, and a tool called calcdeps.py
+that knows how to give scripts to the Closure Compiler in the right
+order.
+
+http://code.google.com/p/closure-library/
+
+//
+// Licensing
+//
+
+Unless otherwise stated, all source files are licensed under
+the Apache License, Version 2.0.
+
+
+-----
+Code under:
+src/com/google/javascript/rhino
+test/com/google/javascript/rhino
+
+URL: http://www.mozilla.org/rhino
+Version:  1.5R3, with heavy modifications
+License:  Netscape Public License and MPL / GPL dual license
+
+Description: A partial copy of Mozilla Rhino. Mozilla Rhino is an
+implementation of JavaScript for the JVM.  The JavaScript parser and
+the parse tree data structures were extracted and modified
+significantly for use by Google's JavaScript compiler.
+
+Local Modifications: The packages have been renamespaced. All code not
+relevant to parsing has been removed. A JsDoc parser and static typing
+system have been added.
+
+
+-----
+Code in:
+lib/rhino
+
+Rhino
+URL: http://www.mozilla.org/rhino
+Version:  Trunk
+License:  Netscape Public License and MPL / GPL dual license
+
+Description: Mozilla Rhino is an implementation of JavaScript for the JVM.
+
+Local Modifications: Minor changes to parsing JSDoc that usually get pushed
+up-stream to Rhino trunk.
+
+
+-----
+Code in:
+lib/args4j.jar
+
+Args4j
+URL: https://args4j.dev.java.net/
+Version: 2.0.16
+License: MIT
+
+Description:
+args4j is a small Java class library that makes it easy to parse command line
+options/arguments in your CUI application.
+
+Local Modifications: None.
+
+
+-----
+Code in:
+lib/guava.jar
+
+Guava Libraries
+URL: http://code.google.com/p/guava-libraries/
+Version:  13.0.1
+License: Apache License 2.0
+
+Description: Google's core Java libraries.
+
+Local Modifications: None.
+
+
+-----
+Code in:
+lib/jsr305.jar
+
+Annotations for software defect detection
+URL: http://code.google.com/p/jsr-305/
+Version: svn revision 47
+License: BSD License
+
+Description: Annotations for software defect detection.
+
+Local Modifications: None.
+
+
+-----
+Code in:
+lib/jarjar.jar
+
+Jar Jar Links
+URL: http://jarjar.googlecode.com/
+Version: 1.1
+License: Apache License 2.0
+
+Description:
+A utility for repackaging Java libraries.
+
+Local Modifications: None.
+
+
+----
+Code in:
+lib/junit.jar
+
+JUnit
+URL:  http://sourceforge.net/projects/junit/
+Version:  4.10
+License:  Common Public License 1.0
+
+Description: A framework for writing and running automated tests in Java.
+
+Local Modifications: None.
+
+
+---
+Code in:
+lib/protobuf-java.jar
+
+Protocol Buffers
+URL: http://code.google.com/p/protobuf/
+Version: 2.4.1
+License: New BSD License
+
+Description: Supporting libraries for protocol buffers,
+an encoding of structured data.
+
+Local Modifications: None
+
+
+---
+Code in:
+lib/ant.jar
+lib/ant-launcher.jar
+
+URL: http://ant.apache.org/bindownload.cgi
+Version: 1.8.1
+License: Apache License 2.0
+Description:
+  Ant is a Java based build tool. In theory it is kind of like "make"
+  without make's wrinkles and with the full portability of pure java code.
+
+Local Modifications: None
+
+
+---
+Code in:
+lib/json.jar
+URL: http://json.org/java/index.html
+Version: JSON version 20090211
+License: MIT license
+Description:
+JSON is a set of java files for use in transmitting data in JSON format.
+
+Local Modifications: None
+
+---
+Code in:
+tools/maven-ant-tasks-2.1.3.jar
+URL: http://maven.apache.org
+Version 2.1.3
+License: Apache License 2.0
+Description:
+  Maven Ant tasks are used to manage dependencies and to install/deploy to
+  maven repositories.
+
+Local Modifications: None

build/demo-files/demo.captions.vtt

@@ -0,0 +1,41 @@
+WEBVTT
+
+00:00.700 --> 00:04.110
+Captions describe all relevant audio for the hearing impaired.
+[ Heroic music playing for a seagull ]
+
+00:04.500 --> 00:05.000
+[ Splash!!! ]
+
+00:05.100 --> 00:06.000
+[ Sploosh!!! ]
+
+00:08.000 --> 00:09.225
+[ Splash...splash...splash splash splash ]
+
+00:10.525 --> 00:11.255
+[ Splash, Sploosh again ]
+
+00:13.500 --> 00:14.984
+Dolphin: eeeEEEEEeeee!
+
+00:14.984 --> 00:16.984
+Dolphin: Squawk! eeeEEE?
+
+00:25.000 --> 00:28.284
+[ A whole ton of splashes ]
+
+00:29.500 --> 00:31.000
+Mine. Mine. Mine.
+
+00:34.300 --> 00:36.000
+Shark: Chomp
+
+00:36.800 --> 00:37.900
+Shark: CHOMP!!!
+
+00:37.861 --> 00:41.193
+EEEEEEOOOOOOOOOOWHALENOISE
+
+00:42.593 --> 00:45.611
+[ BIG SPLASH ]

build/demo-files/demo.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Video.js | HTML5 Video Player</title>
+
+  <!-- Chang URLs to wherever Video.js files will be hosted -->
+  <link href="video-js.css" rel="stylesheet" type="text/css">
+  <!-- video.js must be in the <head> for older IEs to work. -->
+  <script src="video.js"></script>
+
+  <!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
+  <script>
+    videojs.options.flash.swf = "video-js.swf";
+  </script>
+
+
+</head>
+<body>
+
+  <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
+      poster="http://video-js.zencoder.com/oceans-clip.png"
+      data-setup="{}">
+    <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
+    <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
+    <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
+    <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
+  </video>
+
+</body>
+</html>

build/source-loader.js

@@ -0,0 +1,72 @@
+// This file is used to load the video.js source files into a page
+// in the correct order based on dependencies.
+// When you create a new source file you will need to add
+// it to the list below to use it in sandbox/index.html and
+// test/index.html
+
+// You can use the projectRoot variable to adjust relative urls
+// that this script loads. By default it's "../", which is what /sandbox
+// and /test need. If you had sandbox/newDir/index.html, in index.html you
+// would set projectRoot = "../../"
+
+// We could use somehting like requireJS to load files, and at one point
+// we used goog.require/provide to load dependencies, but that seems like
+// overkill with the small number of files we actually have.
+
+// ADD NEW SOURCE FILES HERE
+var sourceFiles = [
+  "src/js/core.js",
+  "src/js/core-object.js",
+  "src/js/events.js",
+  "src/js/lib.js",
+  "src/js/component.js",
+  "src/js/button.js",
+  "src/js/slider.js",
+  "src/js/menu.js",
+  "src/js/player.js",
+  "src/js/control-bar/control-bar.js",
+  "src/js/control-bar/play-toggle.js",
+  "src/js/control-bar/time-display.js",
+  "src/js/control-bar/fullscreen-toggle.js",
+  "src/js/control-bar/progress-control.js",
+  "src/js/control-bar/volume-control.js",
+  "src/js/control-bar/mute-toggle.js",
+  "src/js/control-bar/volume-menu-button.js",
+  "src/js/poster.js",
+  "src/js/loading-spinner.js",
+  "src/js/big-play-button.js",
+  "src/js/media/media.js",
+  "src/js/media/html5.js",
+  "src/js/media/flash.js",
+  "src/js/media/loader.js",
+  "src/js/tracks.js",
+  "src/js/json.js",
+  "src/js/setup.js",
+  "src/js/plugins.js"
+];
+
+// Allow overriding the default project root
+var projectRoot = projectRoot || '../';
+
+function loadScripts(scriptsArr){
+  for (var i = 0; i < scriptsArr.length; i++) {
+    // Using document.write because that's the easiest way to avoid triggering
+    // asynchrnous script loading
+    document.write( "<script src='" + projectRoot + scriptsArr[i] + "'><\/script>" );
+  }
+}
+
+// We use this file in the grunt build script to load the same source file list
+// and don't want to load the scripts there.
+if (typeof blockSourceLoading === 'undefined') {
+  loadScripts(sourceFiles);
+
+  // Allow for making Flash first
+  if (window.location.href.indexOf("?flash") !== -1) {
+    // Using doc.write to load this script to, otherwise when it runs videojs
+    // is undefined
+    document.write('<script>videojs.options.techOrder = ["flash"];videojs.options.flash.swf = "../src/swf/video-js.swf";</script>')
+  }
+}
+
+

contrib.json

@@ -0,0 +1,7 @@
+{
+  "owner": "videojs",
+  "project": "video.js",
+  "developmentBranch": "master",
+  "releaseBranch": "stable",
+  "remote": "origin"
+}

demo-subtitles.srt

@@ -1,13 +0,0 @@
-1
-00:00:02,400 --> 00:00:05,200
-[Background Music Playing]
-
-2
-00:00:15,712 --> 00:00:17,399
-Heay!!
-
-3
-00:00:25,712 --> 00:00:30,399
-[Bird noises]
-
-

demo.html

@@ -1,102 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8" />
-  <title>HTML5 Video Player</title>
-
-  <!-- Include the VideoJS Library -->
-  <script src="video.js" type="text/javascript" charset="utf-8"></script>
-
-  <script type="text/javascript">
-    // Must come after the video.js library
-
-    // Add VideoJS to all video tags on the page when the DOM is ready
-    VideoJS.setupAllWhenReady();
-
-    /* ============= OR ============ */
-
-    // Setup and store a reference to the player(s).
-    // Must happen after the DOM is loaded
-    // You can use any library's DOM Ready method instead of VideoJS.DOMReady
-
-    /*
-    VideoJS.DOMReady(function(){
-      
-      // Using the video's ID or element
-      var myPlayer = VideoJS.setup("example_video_1");
-      
-      // OR using an array of video elements/IDs
-      // Note: It returns an array of players
-      var myManyPlayers = VideoJS.setup(["example_video_1", "example_video_2", video3Element]);
-
-      // OR all videos on the page
-      var myManyPlayers = VideoJS.setup("All");
-
-      // After you have references to your players you can...(example)
-      myPlayer.play(); // Starts playing the video for this player.
-    });
-    */
-
-    /* ========= SETTING OPTIONS ========= */
-
-    // Set options when setting up the videos. The defaults are shown here.
-
-    /*
-    VideoJS.setupAllWhenReady({
-      controlsBelow: false, // Display control bar below video instead of in front of
-      controlsHiding: true, // Hide controls when mouse is not over the video
-      defaultVolume: 0.85, // Will be overridden by user's last volume if available
-      flashVersion: 9, // Required flash version for fallback
-      linksHiding: true // Hide download links when video is supported
-    });
-    */
-
-    // Or as the second option of VideoJS.setup
-    
-    /*
-    VideoJS.DOMReady(function(){
-      var myPlayer = VideoJS.setup("example_video_1", {
-        // Same options
-      });
-    });
-    */
-
-  </script>
-
-  <!-- Include the VideoJS Stylesheet -->
-  <link rel="stylesheet" href="video-js.css" type="text/css" media="screen" title="Video JS">
-</head>
-<body>
-
-  <!-- Begin VideoJS -->
-  <div class="video-js-box">
-    <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
-    <video id="example_video_1" class="video-js" width="640" height="264" controls="controls" preload="auto" poster="http://video-js.zencoder.com/oceans-clip.png">
-      <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
-      <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
-      <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />
-      <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
-      <object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
-        data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
-        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
-        <param name="wmode" value="opaque" />
-        <param name="allowfullscreen" value="true" />
-        <param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
-        <!-- Image Fallback. Typically the same as the poster image. -->
-        <img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
-          title="No video playback capabilities." />
-      </object>
-    </video>
-    <!-- Download links provided for devices that can't play video in the browser. -->
-    <p class="vjs-no-video"><strong>Download Video:</strong>
-      <a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
-      <a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
-      <a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br>
-      <!-- Support VideoJS by keeping this link. -->
-      <a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
-    </p>
-  </div>
-  <!-- End VideoJS -->
-
-</body>
-</html>

dev/combine_sources.sh

@@ -1,13 +0,0 @@
-#! /bin/csh
-# Combines Source Files. In terminal, sh combine_sources.sh
-cat src/_begin.js > combined.js
-
-cat src/main.js >> combined.js
-cat src/api.js >> combined.js
-cat src/html5.js >> combined.js
-cat src/flash.js >> combined.js
-cat src/behaviors.js >> combined.js
-cat src/lib.js >> combined.js
-cat src/video-js.jquery.js >> combined.js
-
-cat src/_end.js >> combined.js

dev/flowplayer/test.html

@@ -1,114 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8" />
-  <title>HTML5 Video Player: flowplayer</title>
-
-  <!-- Include the VideoJS Library -->
-  <script src="../src/main.js" type="text/javascript" charset="utf-8"></script>
-  <script src="../src/api.js" type="text/javascript" charset="utf-8"></script>
-  <script src="../src/html5.js" type="text/javascript" charset="utf-8"></script>
-  <script src="../src/flash.js" type="text/javascript" charset="utf-8"></script>
-  <script src="../src/behaviors.js" type="text/javascript" charset="utf-8"></script>
-  <script src="../src/lib.js" type="text/javascript" charset="utf-8"></script>
-  <script src="../src/video-js.jquery.js" type="text/javascript" charset="utf-8"></script>
-
-  <!-- <script type="text/javascript" src="flowplayer-3.2.4.min.js"></script> -->
-  <script type="text/javascript" src="video-js.flowplayer.js"></script>
-
-  <script type="text/javascript">
-    VideoJS.DOMReady(function(){
-      myPlayer = VideoJS.setup("example_video_1", { 
-        controlsHiding: true, 
-        controlsBelow: false, 
-        showControlsAtStart: true,
-        playerFallbackOrder: ["flash", "html5", "links"]
-      });
-      myPlayer.activateElement(document.getElementById("scrub"), "loadProgressBar");
-      // var vid = document.getElementById("example_video_1"),
-      //     attrTable = document.getElementById("attributes"),
-      //     attrNames = ["error", "networkState", "readyState", "preload", "buffered",
-      //       "seeking", "currentTime", "initialTime", "duration", "startOffsetTime",
-      //       "paused", "defaultPlaybackRate", "playbackRate", "played", "seekable",
-      //       "ended", "autoplay", "loop", "controls", "volume", "muted", "tracks"
-      //     ],
-      //     attrs = {};
-      // 
-      // for(var i=0,j=attrNames.length; i<j; i++) {
-      //   var row = _V_.createElement("tr");
-      //   var th = _V_.createElement("th"); 
-      //   th.innerHTML = attrNames[i];
-      //   attrs[attrNames[i]] = _V_.createElement("td", { id: attrNames[i] });
-      //   row.appendChild(th); row.appendChild(attrs[attrNames[i]]);
-      //   attrTable.appendChild(row);
-      // }
-      // 
-      // setInterval(function(){
-      //   for(var i=0,j=attrNames.length; i<j; i++) {
-      //     attrs[attrNames[i]].innerHTML = vid[attrNames[i]];
-      //   }
-      // }, 100);
-      // 
-      // var events = ["loadstart","progress","suspend","abort","error","emptied","stalled","play","pause",
-      //   "loadedmetadata", "loadeddata", "waiting", "playing", "canplay", "canplaythrough", "seeking", "seeked",
-      //   // "timeupdate",
-      //   "ended", "ratechange", "durationchange","volumechange"
-      // ],
-      // eventsList = document.getElementById("events");
-      // 
-      // for(var i=0,j=events.length; i<j; i++) {
-      //   vid.addEventListener(events[i], function(){
-      //     eventsList.innerHTML = this + "\n" + eventsList.innerHTML
-      //   }.context(events[i]), false);
-      // }
-      
-    });
-
-  </script>
-
-  <style type="text/css" media="screen">
-    #attributes { width: 300px; float: left; }
-    #events { width: 300px; height: 500px; float: left; }
-  </style>
-
-  <!-- Include the VideoJS Stylesheet -->
-  <link rel="stylesheet" href="../../video-js.css" type="text/css" media="screen" title="Video JS">
-  <link rel="stylesheet" href="../../skins/tube.css" type="text/css" media="screen" title="Video JS">
-  <link rel="stylesheet" href="../../skins/hu.css" type="text/css" media="screen" title="Video JS">
-  <link rel="stylesheet" href="../../skins/vim.css" type="text/css" media="screen" title="Video JS">
-</head>
-<body>
-
-  <!-- Begin VideoJS -->
-  <div id="scrub" style="background: #000; height: 10px;"></div>
-
-  <div class="video-js-box">
-    <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
-    <video id="example_video_1" class="video-js" width="640" height="264" controls="controls" preload="auto" poster="http://video-js.zencoder.com/oceans-clip.png">
-      <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
-      <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
-      <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />
-      <!-- <track kind="subtitles" src="../demo-subtitles.srt" srclang="en-US" label="English"></track> -->
-      <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
-      <div class="vjs-flash-fallback" width="640" height="264" href="http://video-js.zencoder.com/oceans-clip.mp4"></div>
-    </video>
-    <!-- Download links provided for devices that can't play video in the browser. -->
-    <p class="vjs-no-video"><strong>Download Video:</strong>
-      <a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
-      <a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
-      <a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br>
-      <!-- Support VideoJS by keeping this link. -->
-      <a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
-    </p>
-  </div>
-  <!-- End VideoJS -->
-
-  <a onClick="(function(){document.getElementById('example_video_1').player.flowplayer.play(); return false;})()">Click</a>
-
-  <table id="attributes">
-  </table>
-  
-  <textarea id="events"></textarea>
-
-</body>
-</html>

dev/map/coords.srt

@@ -1,13 +0,0 @@
-1
-00:00:02,400 --> 00:00:05,200
-41.586688,-100.112915
-
-2
-00:00:15,712 --> 00:00:17,399
-46.920255,3.010254
-
-3
-00:00:25,712 --> 00:00:30,399
--36.208823,-67.192383
-
-

dev/map/map.html

@@ -1,92 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8" />
-  <title>HTML5 Video Player</title>
-
-  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
-
-  <!-- Include the VideoJS Library -->
-  <script src="../../video.js" type="text/javascript" charset="utf-8"></script>
-  <script type="text/javascript">
-    VideoJS.DOMReady(function(){
-      var myPlayer = VideoJS.setup("example_video_1", { controlsHiding: false });
-    });
-
-  </script>
-
-  <script type="text/javascript"
-      src="http://maps.google.com/maps/api/js?sensor=false">
-  </script>
-  <script type="text/javascript">
-    function initialize() {
-      var latlng = new google.maps.LatLng(-34.397, 150.644);
-      var myOptions = {
-        zoom: 8,
-        center: latlng,
-        disableDefaultUI: true,
-        mapTypeId: google.maps.MapTypeId.ROADMAP
-      };
-      var map = new google.maps.Map(document.getElementById("map_canvas"),
-          myOptions);
-      
-      setTimeout(function() { map.panTo(new google.maps.LatLng(37.4419, -122.1419), 13) }, 2000)
-    }
-
-  </script>
-
-  <style type="text/css">
-    html { height: 100% }
-    body { height: 100%; margin: 0px; padding: 0px }
-    #map_canvas { height: 100%; position: absolute; top: 0; left: 0; }
-    
-    .video-js-box { position: absolute; top: 50%; left: 50%; z-index: 1; margin: -132px 0 0 -320px; }
-  </style>
-
-  <style type="text/css" media="screen">
-    #attributes { width: 300px; float: left; }
-    #events { width: 300px; height: 500px; float: left; }
-  </style>
-
-  <!-- Include the VideoJS Stylesheet -->
-  <link rel="stylesheet" href="../../video-js.css" type="text/css" media="screen" title="Video JS">
-  <link rel="stylesheet" href="../skins/tube.css" type="text/css" media="screen" title="Video JS">
-  <link rel="stylesheet" href="../skins/hu.css" type="text/css" media="screen" title="Video JS">
-  <link rel="stylesheet" href="../skins/vim.css" type="text/css" media="screen" title="Video JS">
-</head>
-<body onload="initialize()">
-
-  <!-- Begin VideoJS -->
-  <div class="video-js-box">
-    <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
-    <video data-subtitles="../demo-subtitles.srt" id="example_video_1" class="video-js" width="640" height="264" controls="controls" preload="auto" poster="http://video-js.zencoder.com/oceans-clip.png">
-      <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
-      <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
-      <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />
-      <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
-      <object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
-        data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
-        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
-        <param name="wmode" value="opaque" />
-        <param name="allowfullscreen" value="true" />
-        <param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
-        <!-- Image Fallback. Typically the same as the poster image. -->
-        <img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
-          title="No video playback capabilities." />
-      </object>
-    </video>
-    <!-- Download links provided for devices that can't play video in the browser. -->
-    <p class="vjs-no-video"><strong>Download Video:</strong>
-      <a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
-      <a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
-      <a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br>
-      <!-- Support VideoJS by keeping this link. -->
-      <a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
-    </p>
-  </div>
-  <!-- End VideoJS -->
-
-  <div id="map_canvas" style="width:100%; height:100%"></div>
-
-</body>
-</html>

dev/src/_begin.js

@@ -1,24 +0,0 @@
-/*
-VideoJS - HTML5 Video Player
-v2.0.2
-
-This file is part of VideoJS. Copyright 2010 Zencoder, Inc.
-
-VideoJS is free software: you can redistribute it and/or modify
-it under the terms of the GNU Lesser General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-VideoJS is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Lesser General Public License for more details.
-
-You should have received a copy of the GNU Lesser General Public License
-along with VideoJS.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-// Self-executing function to prevent global vars and help with minification
-(function(window, undefined){
-  var document = window.document;
-

dev/src/_end.js

@@ -1,6 +0,0 @@
-
-// Expose to global
-window.VideoJS = window._V_ = VideoJS;
-
-// End self-executing function
-})(window);

dev/src/api.js

@@ -1,161 +0,0 @@
-/* Player API
-================================================================================ */
-VideoJS.fn.extend({
-
-  /* Listener types: play, pause, timeupdate, bufferedupdate, ended, volumechange, error */
-  addEventListener: function(type, fn){
-    if (!this.listeners[type]) { this.listeners[type] = []; }
-    this.listeners[type].push(fn);
-  },
-  // Alias for backwards compatibility
-  addListener: function(){ return this.addEventListener.apply(this, arguments); },
-
-  triggerListeners: function(type, e){
-    this.each(this.listeners[type], function(listener){
-      listener.call(this, e);
-    });
-  },
-
-  removeListener: function(type, fn){
-    var listeners = this.listeners[type];
-    if (!listeners) { return; }
-    for (var i=0; i<listeners.length; i++) {
-      if (listeners[i] == fn) {
-        listeners.splice(i--, 1);
-      }
-    }
-  },
-
-  play: function(){ this.api.play.apply(this); return this; },
-  pause: function(){ this.api.pause.apply(this); return this; },
-  paused: function(){ return this.api.paused.apply(this); },
-
-  currentTime: function(seconds){
-    if (seconds !== undefined) {
-      this.values.currentTime = seconds; // Cache the last set value for smoother scrubbing.
-      this.api.setCurrentTime.call(this, seconds);
-      return this;
-    }
-    return this.api.currentTime.apply(this);
-  },
-
-  duration: function(){ return this.api.duration.apply(this); },
-
-  buffered: function(){
-    var buffered = this.api.buffered.apply(this),
-        start = 0, end = this.values.bufferEnd = this.values.bufferEnd || 0,
-        timeRange;
-
-    if (buffered && buffered.length > 0 && buffered.end(0) > end) {
-      end = buffered.end(0);
-      // Storing values allows them be overridden by setBufferedFromProgress
-      this.values.bufferEnd = end;
-    }
-
-    return this.createTimeRange(start, end);
-  },
-  // Mimic HTML5 TimeRange Spec.
-  createTimeRange: function(start, end){
-    return {
-      length: 1,
-      start: function() { return start; },
-      end: function() { return end; }
-    };
-  },
-  // Calculates amount of buffer is full
-  bufferedPercent: function(){ return (this.duration()) ? this.buffered().end(0) / this.duration() : 0; },
-
-  volume: function(percentAsDecimal){
-    if (percentAsDecimal !== undefined) {
-      var vol = Math.max(0, Math.min(1, parseFloat(percentAsDecimal))); // Force value to between 0 and 1
-      this.values.volume = vol;
-      this.api.setVolume.call(this, vol);
-      this.setLocalStorage("volume", vol);
-      return this;
-    }
-    // if (this.values.volume) { return this.values.volume; }
-    return this.api.volume.call(this);
-  },
-
-  width: function(width, skipListeners){
-    if (width !== undefined) {
-      this.element.width = width; // Not using style so it can be overridden on fullscreen.
-      this.box.style.width = width+"px";
-      if (!skipListeners) { this.triggerListeners("resize"); }
-      return this;
-    }
-    return parseInt(this.element.getAttribute("width"));
-    // return this.element.offsetWidth;
-  },
-  height: function(height){
-    if (height !== undefined) {
-      this.element.height = height;
-      this.box.style.height = height+"px";
-      this.triggerListeners("resize");
-      return this;
-    }
-    return parseInt(this.element.getAttribute("height"));
-    // return this.element.offsetHeight;
-  },
-  size: function(width, height){
-    // Skip resize listeners on width for optimization
-    return this.width(width, true).height(height);
-  },
-
-  supportsFullScreen: function(){ return this.api.supportsFullScreen.call(this); },
-
-  // Turn on fullscreen (or window) mode
-  enterFullScreen: function(){
-    if (this.supportsFullScreen()) {
-      this.api.enterFullScreen.call(this);
-    } else {
-      this.enterFullWindow();
-    }
-    this.triggerListeners("enterFullScreen");
-    return this;
-  },
-
-  exitFullScreen: function(){
-    if (!this.supportsFullScreen()) {
-      this.exitFullWindow();
-    }
-    this.triggerListeners("exitFullScreen");
-    // Otherwise Shouldn't be called since native fullscreen uses own controls.
-    return this;
-  },
-
-  enterFullWindow: function(){
-    this.videoIsFullScreen = true;
-    // Storing original doc overflow value to return to when fullscreen is off
-    this.docOrigOverflow = document.documentElement.style.overflow;
-    // Add listener for esc key to exit fullscreen
-    _V_.addListener(document, "keydown", this.fullscreenOnEscKey.rEvtContext(this));
-    // Add listener for a window resize
-    _V_.addListener(window, "resize", this.fullscreenOnWindowResize.rEvtContext(this));
-    // Hide any scroll bars
-    document.documentElement.style.overflow = 'hidden';
-    // Apply fullscreen styles
-    _V_.addClass(this.box, "vjs-fullscreen");
-    // Resize the box, controller, and poster
-    this.positionAll();
-    this.triggerListeners("enterFullWindow");
-  },
-
-  exitFullWindow: function(){
-    this.videoIsFullScreen = false;
-    document.removeEventListener("keydown", this.fullscreenOnEscKey, false);
-    window.removeEventListener("resize", this.fullscreenOnWindowResize, false);
-    // Unhide scroll bars.
-    document.documentElement.style.overflow = this.docOrigOverflow;
-    // Remove fullscreen styles
-    _V_.removeClass(this.box, "vjs-fullscreen");
-    // Resize the box, controller, and poster to original sizes
-    this.positionAll();
-    this.triggerListeners("exitFullWindow");
-  },
-
-  src: function(src){
-    this.api.src.call(this, src);
-    return this;
-  }
-});

dev/src/behaviors.js

@@ -1,579 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-// Element Behaviors
-// Tell elements how to act or react
-////////////////////////////////////////////////////////////////////////////////
-
-/* Player Behaviors - How VideoJS reacts to what the video is doing.
-================================================================================ */
-VideoJS.fn.newBehavior("player", function(player){
-    this.addListener("error", this.playerOnVideoError);
-    this.addListener("play", this.playerOnVideoPlay);
-    this.addListener("play", this.trackCurrentTime);
-    this.addListener("pause", this.stopTrackingCurrentTime);
-    this.addListener("ended", this.playerOnVideoEnded);
-    this.trackBuffered();
-    this.addListener("bufferedupdate", this.bufferFull);
-  },{
-    playerOnVideoError: function(event){
-      this.log(event);
-      this.log(this.video.error);
-    },
-    playerOnVideoPlay: function(event){ this.hasPlayed = true; },
-    playerOnVideoEnded: function(event){
-      if (this.options.loop) {
-        this.currentTime(0);
-        this.play();
-      } else if (this.options.returnToStart) {
-        this.currentTime(0);
-        this.pause();
-      }
-    },
-
-    /* Load Tracking -------------------------------------------------------------- */
-    // Buffer watching method for load progress.
-    // Used for browsers that don't support the progress event
-    trackBuffered: function(){
-      this.bufferedInterval = setInterval(function(){
-        // Don't trigger unless
-        if (this.values.bufferEnd < this.buffered().end(0)) {
-          this.triggerListeners("bufferedupdate");
-        }
-      }.context(this), 500);
-    },
-    stopTrackingBuffered: function(){ clearInterval(this.bufferedInterval); },
-    bufferFull: function(){
-      if (this.bufferedPercent() == 1) {
-        this.stopTrackingBuffered();
-      }
-    },
-
-    /* Time Tracking -------------------------------------------------------------- */
-    trackCurrentTime: function(){
-      if (this.currentTimeInterval) { clearInterval(this.currentTimeInterval); }
-
-      this.currentTimeInterval = setInterval(function(){
-        this.triggerListeners("timeupdate");
-      }.context(this), 100); // 42 = 24 fps
-
-      this.trackingCurrentTime = true;
-    },
-    // Turn off play progress tracking (when paused or dragging)
-    stopTrackingCurrentTime: function(){
-      clearInterval(this.currentTimeInterval);
-      this.trackingCurrentTime = false;
-    }
-  }
-);
-/* Mouse Over Video Reporter Behaviors - i.e. Controls hiding based on mouse location
-================================================================================ */
-VideoJS.fn.newBehavior("mouseOverVideoReporter", function(element){
-    // Listen for the mouse move the video. Used to reveal the controller.
-    _V_.addListener(element, "mousemove", this.mouseOverVideoReporterOnMouseMove.context(this));
-    // Listen for the mouse moving out of the video. Used to hide the controller.
-    _V_.addListener(element, "mouseout", this.mouseOverVideoReporterOnMouseOut.context(this));
-  },{
-    mouseOverVideoReporterOnMouseMove: function(){
-      this.showControlBars();
-      clearInterval(this.mouseMoveTimeout);
-      this.mouseMoveTimeout = setTimeout(this.hideControlBars.context(this), 4000);
-    },
-    mouseOverVideoReporterOnMouseOut: function(event){
-      // Prevent flicker by making sure mouse hasn't left the video
-      var parent = event.relatedTarget;
-      while (parent && parent !== this.box) {
-        parent = parent.parentNode;
-      }
-      if (parent !== this.box) {
-        this.hideControlBars();
-      }
-    }
-  }
-);
-/* Mouse Over Video Reporter Behaviors - i.e. Controls hiding based on mouse location
-================================================================================ */
-VideoJS.fn.newBehavior("box", function(element){
-    this.positionBox();
-    _V_.addClass(element, "vjs-paused");
-    this.activateElement(element, "mouseOverVideoReporter");
-    this.addListener("play", this.boxOnVideoPlay);
-    this.addListener("pause", this.boxOnVideoPause);
-  },{
-    boxOnVideoPlay: function(){
-      _V_.removeClass(this.box, "vjs-paused");
-      _V_.addClass(this.box, "vjs-playing");
-    },
-    boxOnVideoPause: function(){
-      _V_.removeClass(this.box, "vjs-playing");
-      _V_.addClass(this.box, "vjs-paused");
-    }
-  }
-);
-/* Poster Image Overlay
-================================================================================ */
-VideoJS.fn.newBehavior("poster", function(element){
-    this.activateElement(element, "mouseOverVideoReporter");
-    this.activateElement(element, "playButton");
-    this.addListener("play", this.hidePoster);
-    this.addListener("ended", this.showPoster);
-    this.addListener("resize", this.positionPoster);
-  },{
-    showPoster: function(){
-      if (!this.poster) { return; }
-      this.poster.style.display = "block";
-      this.positionPoster();
-    },
-    positionPoster: function(){
-      // Only if the poster is visible
-      if (!this.poster || this.poster.style.display == 'none') { return; }
-      this.poster.style.height = this.height() + "px"; // Need incase controlsBelow
-      this.poster.style.width = this.width() + "px"; // Could probably do 100% of box
-    },
-    hidePoster: function(){
-      if (!this.poster) { return; }
-      this.poster.style.display = "none";
-    },
-    // Update poster source from attribute or fallback image
-    // iPad breaks if you include a poster attribute, so this fixes that
-    updatePosterSource: function(){
-      if (!this.video.poster) {
-        var images = this.video.getElementsByTagName("img");
-        if (images.length > 0) { this.video.poster = images[0].src; }
-      }
-    }
-  }
-);
-/* Control Bar Behaviors
-================================================================================ */
-VideoJS.fn.newBehavior("controlBar", function(element){
-    if (!this.controlBars) {
-      this.controlBars = [];
-      this.addListener("resize", this.positionControlBars);
-    }
-    this.controlBars.push(element);
-    _V_.addListener(element, "mousemove", this.onControlBarsMouseMove.context(this));
-    _V_.addListener(element, "mouseout", this.onControlBarsMouseOut.context(this));
-  },{
-    showControlBars: function(){
-      if (!this.options.controlsEnabled) { return; }
-      if (!this.options.controlsAtStart && !this.hasPlayed) { return; }
-      this.each(this.controlBars, function(bar){
-        // bar.style.opacity = 1;
-        bar.style.display = "block";
-      });
-    },
-    // Place controller relative to the video's position (now just resizing bars)
-    positionControlBars: function(){
-      this.updatePlayProgressBars();
-      this.updateLoadProgressBars();
-    },
-    hideControlBars: function(){
-      if (this.options.controlsHiding && !this.mouseIsOverControls) {
-        this.each(this.controlBars, function(bar){
-          // bar.style.opacity = 0;
-          bar.style.display = "none";
-        });
-      }
-    },
-    // Block controls from hiding when mouse is over them.
-    onControlBarsMouseMove: function(){ this.mouseIsOverControls = true; },
-    onControlBarsMouseOut: function(event){
-      this.mouseIsOverControls = false;
-    }
-  }
-);
-/* PlayToggle, PlayButton, PauseButton Behaviors
-================================================================================ */
-// Play Toggle
-VideoJS.fn.newBehavior("playToggle", function(element){
-    if (!this.elements.playToggles) {
-      this.elements.playToggles = [];
-      this.addListener("play", this.playTogglesOnPlay);
-      this.addListener("pause", this.playTogglesOnPause);
-    }
-    this.elements.playToggles.push(element);
-    _V_.addListener(element, "click", this.onPlayToggleClick.context(this));
-  },{
-    onPlayToggleClick: function(event){
-      if (this.paused()) {
-        this.play();
-      } else {
-        this.pause();
-      }
-    },
-    playTogglesOnPlay: function(event){
-      this.each(this.elements.playToggles, function(toggle){
-        _V_.removeClass(toggle, "vjs-paused");
-        _V_.addClass(toggle, "vjs-playing");
-      });
-    },
-    playTogglesOnPause: function(event){
-      this.each(this.elements.playToggles, function(toggle){
-        _V_.removeClass(toggle, "vjs-playing");
-        _V_.addClass(toggle, "vjs-paused");
-      });
-    }
-  }
-);
-// Play
-VideoJS.fn.newBehavior("playButton", function(element){
-    _V_.addListener(element, "click", this.onPlayButtonClick.context(this));
-  },{
-    onPlayButtonClick: function(event){ this.play(); }
-  }
-);
-// Pause
-VideoJS.fn.newBehavior("pauseButton", function(element){
-    _V_.addListener(element, "click", this.onPauseButtonClick.context(this));
-  },{
-    onPauseButtonClick: function(event){ this.pause(); }
-  }
-);
-/* Play Progress Bar Behaviors
-================================================================================ */
-VideoJS.fn.newBehavior("playProgressBar", function(element){
-    if (!this.elements.playProgressBars) {
-      this.elements.playProgressBars = [];
-      this.addListener("timeupdate", this.updatePlayProgressBars);
-    }
-    this.elements.playProgressBars.push(element);
-  },{
-    // Ajust the play progress bar's width based on the current play time
-    updatePlayProgressBars: function(newTime){
-      var progress = (this.scrubbing) ? this.values.currentTime / this.duration() : this.currentTime() / this.duration();
-      if (isNaN(progress)) { progress = 0; }
-      this.each(this.elements.playProgressBars, function(bar){
-        if (bar.style) { bar.style.width = _V_.round(progress * 100, 2) + "%"; }
-      });
-    }
-  }
-);
-/* Load Progress Bar Behaviors
-================================================================================ */
-VideoJS.fn.newBehavior("loadProgressBar", function(element){
-    if (!this.elements.loadProgressBars) { this.elements.loadProgressBars = []; }
-    this.elements.loadProgressBars.push(element);
-    this.addListener("bufferedupdate", this.updateLoadProgressBars);
-  },{
-    updateLoadProgressBars: function(){
-      this.each(this.elements.loadProgressBars, function(bar){
-        if (bar.style) { bar.style.width = _V_.round(this.bufferedPercent() * 100, 2) + "%"; }
-      });
-    }
-  }
-);
-
-/* Current Time Display Behaviors
-================================================================================ */
-VideoJS.fn.newBehavior("currentTimeDisplay", function(element){
-    if (!this.elements.currentTimeDisplays) {
-      this.elements.currentTimeDisplays = [];
-      this.addListener("timeupdate", this.updateCurrentTimeDisplays);
-    }
-    this.elements.currentTimeDisplays.push(element);
-  },{
-    // Update the displayed time (00:00)
-    updateCurrentTimeDisplays: function(newTime){
-      // Allows for smooth scrubbing, when player can't keep up.
-      var time = (this.scrubbing) ? this.values.currentTime : this.currentTime();
-      this.each(this.elements.currentTimeDisplays, function(dis){
-        dis.innerHTML = _V_.formatTime(time);
-      });
-    }
-  }
-);
-
-/* Duration Display Behaviors
-================================================================================ */
-VideoJS.fn.newBehavior("durationDisplay", function(element){
-    if (!this.elements.durationDisplays) {
-      this.elements.durationDisplays = [];
-      this.addListener("timeupdate", this.updateDurationDisplays);
-    }
-    this.elements.durationDisplays.push(element);
-  },{
-    updateDurationDisplays: function(){
-      this.each(this.elements.durationDisplays, function(dis){
-        if (this.duration()) { dis.innerHTML = _V_.formatTime(this.duration()); }
-      });
-    }
-  }
-);
-
-/* Current Time Scrubber Behaviors
-================================================================================ */
-VideoJS.fn.newBehavior("currentTimeScrubber", function(element){
-    _V_.addListener(element, "mousedown", this.onCurrentTimeScrubberMouseDown.rEvtContext(this));
-  },{
-    // Adjust the play position when the user drags on the progress bar
-    onCurrentTimeScrubberMouseDown: function(event, scrubber){
-      event.preventDefault();
-      this.currentScrubber = scrubber;
-
-      this.stopTrackingCurrentTime(); // Allows for smooth scrubbing
-      this.scrubbing = true;
-
-      this.videoWasPlaying = !this.paused();
-      this.pause();
-
-      _V_.blockTextSelection();
-      this.setCurrentTimeWithScrubber(event);
-      _V_.addListener(document, "mousemove", this.onCurrentTimeScrubberMouseMove.rEvtContext(this));
-      _V_.addListener(document, "mouseup", this.onCurrentTimeScrubberMouseUp.rEvtContext(this));
-    },
-    onCurrentTimeScrubberMouseMove: function(event){ // Removeable
-      this.setCurrentTimeWithScrubber(event);
-    },
-    onCurrentTimeScrubberMouseUp: function(event){ // Removeable
-      _V_.unblockTextSelection();
-      document.removeEventListener("mousemove", this.onCurrentTimeScrubberMouseMove, false);
-      document.removeEventListener("mouseup", this.onCurrentTimeScrubberMouseUp, false);
-      this.scrubbing = false;
-      if (this.videoWasPlaying) {
-        this.play();
-        this.trackCurrentTime();
-      }
-    },
-    setCurrentTimeWithScrubber: function(event){
-      var newProgress = _V_.getRelativePosition(event.pageX, this.currentScrubber);
-      var newTime = newProgress * this.duration();
-      // Don't let video end while scrubbing.
-      if (newTime == this.duration()) { newTime = newTime - 0.1; }
-      this.currentTime(newTime);
-      this.triggerListeners("timeupdate");
-    }
-  }
-);
-/* Volume Display Behaviors
-================================================================================ */
-VideoJS.fn.newBehavior("volumeDisplay", function(element){
-    if (!this.elements.volumeDisplays) {
-      this.elements.volumeDisplays = [];
-      this.addListener("volumechange", this.updateVolumeDisplays);
-    }
-    this.elements.volumeDisplays.push(element);
-    this.updateVolumeDisplay(element); // Set the display to the initial volume
-  },{
-    // Update the volume control display
-    // Unique to these default controls. Uses borders to create the look of bars.
-    updateVolumeDisplays: function(){
-      if (!this.elements.volumeDisplays) { return; }
-      this.each(this.elements.volumeDisplays, function(dis){
-        this.updateVolumeDisplay(dis);
-      });
-    },
-    updateVolumeDisplay: function(display){
-      var volNum = Math.ceil(this.volume() * 6);
-      this.each(display.children, function(child, num){
-        if (num < volNum) {
-          _V_.addClass(child, "vjs-volume-level-on");
-        } else {
-          _V_.removeClass(child, "vjs-volume-level-on");
-        }
-      });
-    }
-  }
-);
-/* Volume Scrubber Behaviors
-================================================================================ */
-VideoJS.fn.newBehavior("volumeScrubber", function(element){
-    _V_.addListener(element, "mousedown", this.onVolumeScrubberMouseDown.rEvtContext(this));
-  },{
-    // Adjust the volume when the user drags on the volume control
-    onVolumeScrubberMouseDown: function(event, scrubber){
-      // event.preventDefault();
-      _V_.blockTextSelection();
-      this.currentScrubber = scrubber;
-      this.setVolumeWithScrubber(event);
-      _V_.addListener(document, "mousemove", this.onVolumeScrubberMouseMove.rEvtContext(this));
-      _V_.addListener(document, "mouseup", this.onVolumeScrubberMouseUp.rEvtContext(this));
-    },
-    onVolumeScrubberMouseMove: function(event){
-      this.setVolumeWithScrubber(event);
-    },
-    onVolumeScrubberMouseUp: function(event){
-      this.setVolumeWithScrubber(event);
-      _V_.unblockTextSelection();
-      document.removeEventListener("mousemove", this.onVolumeScrubberMouseMove, false);
-      document.removeEventListener("mouseup", this.onVolumeScrubberMouseUp, false);
-    },
-    setVolumeWithScrubber: function(event){
-      var newVol = _V_.getRelativePosition(event.pageX, this.currentScrubber);
-      this.volume(newVol);
-    }
-  }
-);
-/* Fullscreen Toggle Behaviors
-================================================================================ */
-VideoJS.fn.newBehavior("fullscreenToggle", function(element){
-    _V_.addListener(element, "click", this.onFullscreenToggleClick.context(this));
-  },{
-    // When the user clicks on the fullscreen button, update fullscreen setting
-    onFullscreenToggleClick: function(event){
-      if (!this.videoIsFullScreen) {
-        this.enterFullScreen();
-      } else {
-        this.exitFullScreen();
-      }
-    },
-
-    fullscreenOnWindowResize: function(event){ // Removeable
-      this.positionControlBars();
-    },
-    // Create listener for esc key while in full screen mode
-    fullscreenOnEscKey: function(event){ // Removeable
-      if (event.keyCode == 27) {
-        this.exitFullScreen();
-      }
-    }
-  }
-);
-/* Big Play Button Behaviors
-================================================================================ */
-VideoJS.fn.newBehavior("bigPlayButton", function(element){
-    if (!this.elements.bigPlayButtons) {
-      this.elements.bigPlayButtons = [];
-      this.addListener("play", this.hideBigPlayButtons);
-      this.addListener("ended", this.showBigPlayButtons);
-    }
-    this.elements.bigPlayButtons.push(element);
-    this.activateElement(element, "playButton");
-  },{
-    showBigPlayButtons: function(){
-      if (!this.options.controlsEnabled) { return; }
-      this.each(this.elements.bigPlayButtons, function(element){
-        element.style.display = "block";
-      });
-    },
-    hideBigPlayButtons: function(){
-      this.each(this.elements.bigPlayButtons, function(element){
-        element.style.display = "none";
-      });
-    }
-  }
-);
-/* Spinner
-================================================================================ */
-VideoJS.fn.newBehavior("spinner", function(element){
-    if (!this.spinners) {
-      this.spinners = [];
-      this.spinnersRotated = 0;
-      _V_.addListener(this.video, "loadeddata", this.spinnersOnVideoLoadedData.context(this));
-      _V_.addListener(this.video, "loadstart", this.spinnersOnVideoLoadStart.context(this));
-      _V_.addListener(this.video, "seeking", this.spinnersOnVideoSeeking.context(this));
-      _V_.addListener(this.video, "seeked", this.spinnersOnVideoSeeked.context(this));
-      _V_.addListener(this.video, "canplay", this.spinnersOnVideoCanPlay.context(this));
-      _V_.addListener(this.video, "canplaythrough", this.spinnersOnVideoCanPlayThrough.context(this));
-      _V_.addListener(this.video, "waiting", this.spinnersOnVideoWaiting.context(this));
-      _V_.addListener(this.video, "stalled", this.spinnersOnVideoStalled.context(this));
-      _V_.addListener(this.video, "suspend", this.spinnersOnVideoSuspend.context(this));
-      _V_.addListener(this.video, "playing", this.spinnersOnVideoPlaying.context(this));
-      _V_.addListener(this.video, "timeupdate", this.spinnersOnVideoTimeUpdate.context(this));
-    }
-    this.spinners.push(element);
-  },{
-    showSpinners: function(){
-      this.each(this.spinners, function(spinner){
-        spinner.style.display = "block";
-      });
-      clearInterval(this.spinnerInterval);
-      this.spinnerInterval = setInterval(this.rotateSpinners.context(this), 100);
-    },
-    hideSpinners: function(){
-      this.each(this.spinners, function(spinner){
-        spinner.style.display = "none";
-      });
-      clearInterval(this.spinnerInterval);
-    },
-    rotateSpinners: function(){
-      this.each(this.spinners, function(spinner){
-        // spinner.style.transform =       'scale(0.5) rotate('+this.spinnersRotated+'deg)';
-        spinner.style.WebkitTransform = 'scale(0.5) rotate('+this.spinnersRotated+'deg)';
-        spinner.style.MozTransform =    'scale(0.5) rotate('+this.spinnersRotated+'deg)';
-      });
-      if (this.spinnersRotated == 360) { this.spinnersRotated = 0; }
-      this.spinnersRotated += 45;
-    },
-    spinnersOnVideoLoadedData: function(event){ this.hideSpinners(); },
-    spinnersOnVideoLoadStart: function(event){ this.showSpinners(); },
-    spinnersOnVideoSeeking: function(event){ /* this.showSpinners(); */ },
-    spinnersOnVideoSeeked: function(event){ /* this.hideSpinners(); */ },
-    spinnersOnVideoCanPlay: function(event){ /* this.hideSpinners(); */ },
-    spinnersOnVideoCanPlayThrough: function(event){ this.hideSpinners(); },
-    spinnersOnVideoWaiting: function(event){
-      // Safari sometimes triggers waiting inappropriately
-      // Like after video has played, and you play again.
-      this.showSpinners();
-    },
-    spinnersOnVideoStalled: function(event){},
-    spinnersOnVideoSuspend: function(event){},
-    spinnersOnVideoPlaying: function(event){ this.hideSpinners(); },
-    spinnersOnVideoTimeUpdate: function(event){
-      // Safari sometimes calls waiting and doesn't recover
-      if(this.spinner.style.display == "block") { this.hideSpinners(); }
-    }
-  }
-);
-/* Subtitles
-================================================================================ */
-VideoJS.fn.newBehavior("subtitlesDisplay", function(element){
-    if (!this.elements.subtitleDisplays) {
-      this.elements.subtitleDisplays = [];
-      this.addListener("timeupdate", this.subtitleDisplaysOnVideoTimeUpdate);
-      this.addListener("ended", function() { this.lastSubtitleIndex = 0; }.context(this));
-    }
-    this.elements.subtitleDisplays.push(element);
-  },{
-    subtitleDisplaysOnVideoTimeUpdate: function(){
-      // Assuming all subtitles are in order by time, and do not overlap
-      if (this.subtitles) {
-        var time = this.currentTime();
-        // If current subtitle should stay showing, don't do anything. Otherwise, find new subtitle.
-        if (!this.currentSubtitle || this.currentSubtitle.start >= time || this.currentSubtitle.end < time) {
-          var newSubIndex = false,
-              // Loop in reverse if lastSubtitle is after current time (optimization)
-              // Meaning the user is scrubbing in reverse or rewinding
-              reverse = (this.subtitles[this.lastSubtitleIndex].start > time),
-              // If reverse, step back 1 becase we know it's not the lastSubtitle
-              i = this.lastSubtitleIndex - (reverse) ? 1 : 0;
-          while (true) { // Loop until broken
-            if (reverse) { // Looping in reverse
-              // Stop if no more, or this subtitle ends before the current time (no earlier subtitles should apply)
-              if (i < 0 || this.subtitles[i].end < time) { break; }
-              // End is greater than time, so if start is less, show this subtitle
-              if (this.subtitles[i].start < time) {
-                newSubIndex = i;
-                break;
-              }
-              i--;
-            } else { // Looping forward
-              // Stop if no more, or this subtitle starts after time (no later subtitles should apply)
-              if (i >= this.subtitles.length || this.subtitles[i].start > time) { break; }
-              // Start is less than time, so if end is later, show this subtitle
-              if (this.subtitles[i].end > time) {
-                newSubIndex = i;
-                break;
-              }
-              i++;
-            }
-          }
-
-          // Set or clear current subtitle
-          if (newSubIndex !== false) {
-            this.currentSubtitle = this.subtitles[newSubIndex];
-            this.lastSubtitleIndex = newSubIndex;
-            this.updateSubtitleDisplays(this.currentSubtitle.text);
-          } else if (this.currentSubtitle) {
-            this.currentSubtitle = false;
-            this.updateSubtitleDisplays("");
-          }
-        }
-      }
-    },
-    updateSubtitleDisplays: function(val){
-      this.each(this.elements.subtitleDisplays, function(disp){
-        disp.innerHTML = val;
-      });
-    }
-  }
-);
-

dev/src/flash.js

@@ -1,77 +0,0 @@
-/* Flash Player Type
-================================================================================ */
-VideoJS.fn.extend({
-
-  flashSupported: function(){
-    return !!this.flashPlayerVersionSupported();
-  },
-
-  flashInit: function(){
-    this.flashElement = this.getFlashElement();
-    this.replaceWithFlash();
-    this.element = this.flashElement;
-    this.video.src = ""; // Stop video from downloading if HTML5 is still supported
-    var flashPlayer = VideoJS.flashPlayers[this.options.flashPlayer];
-    this.api = flashPlayer.api;
-    flashPlayer.init.call(this);
-    this.api.setupTriggers.call(this);
-  },
-
-  // Get Flash Fallback object element from Embed Code
-  getFlashElement: function(){
-    var children = this.video.children;
-    for (var i=0,j=children.length; i<j; i++) {
-      if (children[i].className == "vjs-flash-fallback") {
-        return children[i];
-      }
-    }
-  },
-
-  buildFlashElement: function(){
-    this.flashElement = _V_.createElement("object", { 
-      id: "flash_fallback_2", 
-      className: "vjs-flash-fallback",
-      type: "application/x-shockwave-flash",
-      data: "http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"
-    });
-    // <object width="640" height="264" >
-
-    var params = {
-      movie: 'http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf',
-      wmode: 'opaque',
-      allowfullscreen: 'true',
-      flashvars: 'config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}'
-    };
-    
-    for (var name in params){
-      var p = _V_.createElement("param");
-      p.name = name;
-      p.value = params[name];
-      this.flashElement.appendChild(p);
-    }
-  },
-
-  // Used to force a browser to fall back when it's an HTML5 browser but there's no supported sources
-  replaceWithFlash: function(){
-    // this.flashElement = this.video.removeChild(this.flashElement);
-    if (this.flashElement) {
-      this.box.insertBefore(this.flashElement, this.video);
-      this.video.style.display = "none"; // Removing it was breaking later players
-    }
-  },
-
-  // Check if browser can use this flash player
-  flashPlayerVersionSupported: function(){
-    var playerVersion = (this.options.flashPlayerVersion) ? this.options.flashPlayerVersion : VideoJS.flashPlayers[this.options.flashPlayer].flashPlayerVersion;
-    return VideoJS.getFlashVersion() >= playerVersion;
-  }
-});
-
-/* Flash Object Fallback (Flash Player)
-================================================================================ */
-VideoJS.flashPlayers = {};
-VideoJS.flashPlayers.htmlObject = {
-  flashPlayerVersion: 9,
-  init: function() { return true; },
-  api: {} // No video API available with HTML Object embed method
-};

dev/src/html5.js

@@ -1,474 +0,0 @@
-/* HTML5 Player Type
-================================================================================ */
-VideoJS.fn.extend({
-
-  html5Supported: function(){
-    if (VideoJS.browserSupportsVideo() && this.canPlaySource()) {
-      return true;
-    } else {
-      return false;
-    }
-  },
-
-  html5Init: function(){
-    this.element = this.video;
-    this.api = this.html5API;
-    this.api.setupTriggers.call(this);
-
-    this.fixPreloading(); // Support old browsers that used autobuffer
-    this.supportProgressEvents(); // Support browsers that don't use 'buffered'
-
-    // Set to stored volume OR 85%
-    this.volume((localStorage && localStorage.volume) || this.options.defaultVolume);
-
-    // Update interface for device needs
-    if (VideoJS.isIOS()) {
-      this.options.useBuiltInControls = true;
-      this.iOSInterface();
-    } else if (VideoJS.isAndroid()) {
-      this.options.useBuiltInControls = true;
-      this.androidInterface();
-    }
-
-    // Add VideoJS Controls
-    if (!this.options.useBuiltInControls) {
-      this.video.controls = false;
-
-      if (this.options.controlsBelow) { _V_.addClass(this.box, "vjs-controls-below"); }
-
-      // Make a click on th video act as a play button
-      this.activateElement(this.video, "playToggle");
-
-      // Build Interface
-      this.buildStylesCheckDiv(); // Used to check if style are loaded
-      this.buildAndActivatePoster();
-      this.buildBigPlayButton();
-      this.buildAndActivateSpinner();
-      this.buildAndActivateControlBar();
-      this.loadInterface(); // Show everything once styles are loaded
-      this.getSubtitles();
-    }
-  },
-  /* Source Managemet
-  ================================================================================ */
-  canPlaySource: function(){
-    // Cache Result
-    if (this.canPlaySourceResult) { return this.canPlaySourceResult; }
-    // Loop through sources and check if any can play
-    var children = this.video.children;
-    for (var i=0,j=children.length; i<j; i++) {
-      if (children[i].tagName.toUpperCase() == "SOURCE") {
-        var canPlay = this.video.canPlayType(children[i].type) || this.canPlayExt(children[i].src);
-        if (canPlay == "probably" || canPlay == "maybe") {
-          this.firstPlayableSource = children[i];
-          this.canPlaySourceResult = true;
-          return true;
-        }
-      }
-    }
-    this.canPlaySourceResult = false;
-    return false;
-  },
-  // Check if the extention is compatible, for when type won't work
-  canPlayExt: function(src){
-    if (!src) { return ""; }
-    var match = src.match(/\.([^\.]+)$/);
-    if (match && match[1]) {
-      var ext = match[1].toLowerCase();
-      // Android canPlayType doesn't work
-      if (VideoJS.isAndroid()) {
-        if (ext == "mp4" || ext == "m4v") { return "maybe"; }
-      // Allow Apple HTTP Streaming for iOS
-      } else if (VideoJS.isIOS()) {
-        if (ext == "m3u8") { return "maybe"; }
-      }
-    }
-    return "";
-  },
-  // Force the video source - Helps fix loading bugs in a handful of devices, like the iPad/iPhone poster bug
-  // And iPad/iPhone javascript include location bug. And Android type attribute bug
-  forceTheSource: function(){
-    this.video.src = this.firstPlayableSource.src; // From canPlaySource()
-    this.video.load();
-  },
-  /* Device Fixes
-  ================================================================================ */
-  // Support older browsers that used "autobuffer"
-  fixPreloading: function(){
-    if (typeof this.video.hasAttribute == "function" && this.video.hasAttribute("preload") && this.video.preload != "none") {
-      this.video.autobuffer = true; // Was a boolean
-    } else {
-      this.video.autobuffer = false;
-      this.video.preload = "none";
-    }
-  },
-
-  // Listen for Video Load Progress (currently does not if html file is local)
-  // Buffered does't work in all browsers, so watching progress as well
-  supportProgressEvents: function(e){
-    _V_.addListener(this.video, 'progress', this.setBufferedFromProgress.context(this));
-  },
-  // playerOnVideoProgress: function(event){
-  //   this.setBufferedFromProgress(event);
-  // },
-  setBufferedFromProgress: function(event){ // HTML5 Only
-    if(event.total > 0 && this.duration()) {
-      var newBufferEnd = (event.loaded / event.total) * this.duration();
-      if (newBufferEnd > this.values.bufferEnd) {
-        this.values.bufferEnd = newBufferEnd;
-        this.triggerListeners("bufferedupdate");
-      }
-    }
-  },
-
-  iOSInterface: function(){
-    if(VideoJS.iOSVersion() < 4) { this.forceTheSource(); } // Fix loading issues
-    if(VideoJS.isIPad()) { // iPad could work with controlsBelow
-      this.buildAndActivateSpinner(); // Spinner still works well on iPad, since iPad doesn't have one
-    }
-  },
-
-  // Fix android specific quirks
-  // Use built-in controls, but add the big play button, since android doesn't have one.
-  androidInterface: function(){
-    this.forceTheSource(); // Fix loading issues
-    _V_.addListener(this.video, "click", function(){ this.play(); }); // Required to play
-    this.buildBigPlayButton(); // But don't activate the normal way. Pause doesn't work right on android.
-    _V_.addListener(this.bigPlayButton, "click", function(){ this.play(); }.context(this));
-    this.positionBox();
-    this.showBigPlayButtons();
-  },
-  /* Wait for styles (TODO: move to _V_)
-  ================================================================================ */
-  loadInterface: function(){
-    if(!this.stylesHaveLoaded()) {
-      // Don't want to create an endless loop either.
-      if (!this.positionRetries) { this.positionRetries = 1; }
-      if (this.positionRetries++ < 100) {
-        setTimeout(this.loadInterface.context(this),10);
-        return;
-      }
-    }
-    this.hideStylesCheckDiv();
-    this.showPoster();
-    if (this.video.paused !== false) { this.showBigPlayButtons(); }
-    if (this.options.controlsAtStart) { this.showControlBars(); }
-    this.positionAll();
-  },
-  /* Control Bar
-  ================================================================================ */
-  buildAndActivateControlBar: function(){
-    /* Creating this HTML
-      <div class="vjs-controls">
-        <div class="vjs-play-control">
-          <span></span>
-        </div>
-        <div class="vjs-progress-control">
-          <div class="vjs-progress-holder">
-            <div class="vjs-load-progress"></div>
-            <div class="vjs-play-progress"></div>
-          </div>
-        </div>
-        <div class="vjs-time-control">
-          <span class="vjs-current-time-display">00:00</span><span> / </span><span class="vjs-duration-display">00:00</span>
-        </div>
-        <div class="vjs-volume-control">
-          <div>
-            <span></span><span></span><span></span><span></span><span></span><span></span>
-          </div>
-        </div>
-        <div class="vjs-fullscreen-control">
-          <div>
-            <span></span><span></span><span></span><span></span>
-          </div>
-        </div>
-      </div>
-    */
-
-    // Create a div to hold the different controls
-    this.controls = _V_.createElement("div", { className: "vjs-controls" });
-    // Add the controls to the video's container
-    this.box.appendChild(this.controls);
-    this.activateElement(this.controls, "controlBar");
-    this.activateElement(this.controls, "mouseOverVideoReporter");
-
-    // Build the play control
-    this.playControl = _V_.createElement("div", { className: "vjs-play-control", innerHTML: "<span></span>" });
-    this.controls.appendChild(this.playControl);
-    this.activateElement(this.playControl, "playToggle");
-
-    // Build the progress control
-    this.progressControl = _V_.createElement("div", { className: "vjs-progress-control" });
-    this.controls.appendChild(this.progressControl);
-
-    // Create a holder for the progress bars
-    this.progressHolder = _V_.createElement("div", { className: "vjs-progress-holder" });
-    this.progressControl.appendChild(this.progressHolder);
-    this.activateElement(this.progressHolder, "currentTimeScrubber");
-
-    // Create the loading progress display
-    this.loadProgressBar = _V_.createElement("div", { className: "vjs-load-progress" });
-    this.progressHolder.appendChild(this.loadProgressBar);
-    this.activateElement(this.loadProgressBar, "loadProgressBar");
-
-    // Create the playing progress display
-    this.playProgressBar = _V_.createElement("div", { className: "vjs-play-progress" });
-    this.progressHolder.appendChild(this.playProgressBar);
-    this.activateElement(this.playProgressBar, "playProgressBar");
-
-    // Create the progress time display (00:00 / 00:00)
-    this.timeControl = _V_.createElement("div", { className: "vjs-time-control" });
-    this.controls.appendChild(this.timeControl);
-
-    // Create the current play time display
-    this.currentTimeDisplay = _V_.createElement("span", { className: "vjs-current-time-display", innerHTML: "00:00" });
-    this.timeControl.appendChild(this.currentTimeDisplay);
-    this.activateElement(this.currentTimeDisplay, "currentTimeDisplay");
-
-    // Add time separator
-    this.timeSeparator = _V_.createElement("span", { innerHTML: " / " });
-    this.timeControl.appendChild(this.timeSeparator);
-
-    // Create the total duration display
-    this.durationDisplay = _V_.createElement("span", { className: "vjs-duration-display", innerHTML: "00:00" });
-    this.timeControl.appendChild(this.durationDisplay);
-    this.activateElement(this.durationDisplay, "durationDisplay");
-
-    // Create the volumne control
-    this.volumeControl = _V_.createElement("div", {
-      className: "vjs-volume-control",
-      innerHTML: "<div><span></span><span></span><span></span><span></span><span></span><span></span></div>"
-    });
-    this.controls.appendChild(this.volumeControl);
-    this.activateElement(this.volumeControl, "volumeScrubber");
-
-    this.volumeDisplay = this.volumeControl.children[0];
-    this.activateElement(this.volumeDisplay, "volumeDisplay");
-
-    // Crete the fullscreen control
-    this.fullscreenControl = _V_.createElement("div", {
-      className: "vjs-fullscreen-control",
-      innerHTML: "<div><span></span><span></span><span></span><span></span></div>"
-    });
-    this.controls.appendChild(this.fullscreenControl);
-    this.activateElement(this.fullscreenControl, "fullscreenToggle");
-  },
-  /* Poster Image
-  ================================================================================ */
-  buildAndActivatePoster: function(){
-    this.updatePosterSource();
-    if (this.video.poster) {
-      this.poster = document.createElement("img");
-      // Add poster to video box
-      this.box.appendChild(this.poster);
-
-      // Add poster image data
-      this.poster.src = this.video.poster;
-      // Add poster styles
-      this.poster.className = "vjs-poster";
-      this.activateElement(this.poster, "poster");
-    } else {
-      this.poster = false;
-    }
-  },
-  /* Big Play Button
-  ================================================================================ */
-  buildBigPlayButton: function(){
-    /* Creating this HTML
-      <div class="vjs-big-play-button"><span></span></div>
-    */
-    this.bigPlayButton = _V_.createElement("div", {
-      className: "vjs-big-play-button",
-      innerHTML: "<span></span>"
-    });
-    this.box.appendChild(this.bigPlayButton);
-    this.activateElement(this.bigPlayButton, "bigPlayButton");
-  },
-  /* Spinner (Loading)
-  ================================================================================ */
-  buildAndActivateSpinner: function(){
-    this.spinner = _V_.createElement("div", {
-      className: "vjs-spinner",
-      innerHTML: "<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>"
-    });
-    this.box.appendChild(this.spinner);
-    this.activateElement(this.spinner, "spinner");
-  },
-  /* Styles Check - Check if styles are loaded (move ot _V_)
-  ================================================================================ */
-  // Sometimes the CSS styles haven't been applied to the controls yet
-  // when we're trying to calculate the height and position them correctly.
-  // This causes a flicker where the controls are out of place.
-  buildStylesCheckDiv: function(){
-    this.stylesCheckDiv = _V_.createElement("div", { className: "vjs-styles-check" });
-    this.stylesCheckDiv.style.position = "absolute";
-    this.box.appendChild(this.stylesCheckDiv);
-  },
-  hideStylesCheckDiv: function(){ this.stylesCheckDiv.style.display = "none"; },
-  stylesHaveLoaded: function(){
-    if (this.stylesCheckDiv.offsetHeight != 5) {
-       return false;
-    } else {
-      return true;
-    }
-  },
-  /* VideoJS Box - Holds all elements
-  ================================================================================ */
-  positionAll: function(){
-    this.positionBox();
-    this.positionControlBars();
-    this.positionPoster();
-  },
-  positionBox: function(){
-    // Set width based on fullscreen or not.
-    if (this.videoIsFullScreen) {
-      this.box.style.width = "";
-      this.element.style.height="";
-      if (this.options.controlsBelow) {
-        this.box.style.height = "";
-        this.element.style.height = (this.box.offsetHeight - this.controls.offsetHeight) + "px";
-      }
-    } else {
-      this.box.style.width = this.width() + "px";
-      this.element.style.height=this.height()+"px";
-      if (this.options.controlsBelow) {
-        this.element.style.height = "";
-        // this.box.style.height = this.video.offsetHeight + this.controls.offsetHeight + "px";
-      }
-    }
-  },
-  /* Subtitles
-  ================================================================================ */
-  getSubtitles: function(){
-    var tracks = this.video.getElementsByTagName("TRACK");
-    for (var i=0,j=tracks.length; i<j; i++) {
-      if (tracks[i].getAttribute("kind") == "subtitles" && tracks[i].getAttribute("src")) {
-        this.subtitlesSource = tracks[i].getAttribute("src");
-        this.loadSubtitles();
-        this.buildSubtitles();
-      }
-    }
-  },
-  loadSubtitles: function() { _V_.get(this.subtitlesSource, this.parseSubtitles.context(this)); },
-  parseSubtitles: function(subText) {
-    var lines = subText.split("\n"),
-        line = "",
-        subtitle, time, text;
-    this.subtitles = [];
-    this.currentSubtitle = false;
-    this.lastSubtitleIndex = 0;
-
-    for (var i=0; i<lines.length; i++) {
-      line = _V_.trim(lines[i]); // Trim whitespace and linebreaks
-      if (line) { // Loop until a line with content
-
-        // First line - Number
-        subtitle = {
-          id: line, // Subtitle Number
-          index: this.subtitles.length // Position in Array
-        };
-
-        // Second line - Time
-        line = _V_.trim(lines[++i]);
-        time = line.split(" --> ");
-        subtitle.start = this.parseSubtitleTime(time[0]);
-        subtitle.end = this.parseSubtitleTime(time[1]);
-
-        // Additional lines - Subtitle Text
-        text = [];
-        for (var j=i; j<lines.length; j++) { // Loop until a blank line or end of lines
-          line = _V_.trim(lines[++i]);
-          if (!line) { break; }
-          text.push(line);
-        }
-        subtitle.text = text.join('<br/>');
-
-        // Add this subtitle
-        this.subtitles.push(subtitle);
-      }
-    }
-  },
-
-  parseSubtitleTime: function(timeText) {
-    var parts = timeText.split(':'),
-        time = 0;
-    // hours => seconds
-    time += parseFloat(parts[0])*60*60;
-    // minutes => seconds
-    time += parseFloat(parts[1])*60;
-    // get seconds
-    var seconds = parts[2].split(/\.|,/); // Either . or ,
-    time += parseFloat(seconds[0]);
-    // add miliseconds
-    ms = parseFloat(seconds[1]);
-    if (ms) { time += ms/1000; }
-    return time;
-  },
-
-  buildSubtitles: function(){
-    /* Creating this HTML
-      <div class="vjs-subtitles"></div>
-    */
-    this.subtitlesDisplay = _V_.createElement("div", { className: 'vjs-subtitles' });
-    this.box.appendChild(this.subtitlesDisplay);
-    this.activateElement(this.subtitlesDisplay, "subtitlesDisplay");
-  },
-
-  /* Player API - Translate functionality from player to video
-  ================================================================================ */
-  html5API: {
-    setupTriggers: function(){
-      // Make video events trigger player events
-      // May seem verbose here, but makes other APIs possible.
-      var types = ["play", "pause", "ended", "volumechange", "error"],
-          player = this, i, type;
-      for (i = 0; i<types.length; i++) {
-        type = types[i];
-        _V_.addListener(this.video, type, function(e){
-          player.triggerListeners(this, e);
-        }.context(type));
-      }
-    },
-
-    play: function(){ this.video.play(); },
-    pause: function(){ this.video.pause(); },
-    paused: function(){ return this.video.paused; },
-
-    currentTime: function(){ return this.video.currentTime; },
-    setCurrentTime: function(seconds){
-      try { this.video.currentTime = seconds; }
-      catch(e) { this.warning(VideoJS.warnings.videoNotReady); }
-    },
-
-    duration: function(){ return this.video.duration; },
-    buffered: function(){ return this.video.buffered; },
-
-    volume: function(){ return this.video.volume; },
-    setVolume: function(percentAsDecimal){ this.video.volume = percentAsDecimal; },
-
-    width: function(){ return this.video.offsetWidth; },
-    height: function(){ return this.video.offsetHeight; },
-
-    supportsFullScreen: function(){
-      if(typeof this.video.webkitEnterFullScreen == 'function') {
-        // Seems to be broken in Chromium/Chrome && Safari in Leopard
-        if (!navigator.userAgent.match("Chrome") && !navigator.userAgent.match("Mac OS X 10.5")) {
-          return true;
-        }
-      }
-      return false;
-    },
-    enterFullScreen: function(){
-      try {
-        this.video.webkitEnterFullScreen();
-      } catch (e) {
-        if (e.code == 11) { this.warning(VideoJS.warnings.videoNotReady); }
-      }
-    },
-    src: function(src){
-      this.video.src = src;
-      this.video.load();
-    }
-  }
-});
-

dev/src/lib.js

@@ -1,196 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-// Convenience Functions (mini library)
-// Functions not specific to video or VideoJS and could probably be replaced with a library like jQuery
-////////////////////////////////////////////////////////////////////////////////
-
-VideoJS.extend({
-
-  addClass: function(element, classToAdd){
-    if ((" "+element.className+" ").indexOf(" "+classToAdd+" ") == -1) {
-      element.className = element.className === "" ? classToAdd : element.className + " " + classToAdd;
-    }
-  },
-  removeClass: function(element, classToRemove){
-    if (element.className.indexOf(classToRemove) == -1) { return; }
-    var classNames = element.className.split(/\s+/);
-    classNames.splice(classNames.lastIndexOf(classToRemove),1);
-    element.className = classNames.join(" ");
-  },
-  createElement: function(tagName, attributes){
-    return this.merge(document.createElement(tagName), attributes);
-  },
-
-  // Attempt to block the ability to select text while dragging controls
-  blockTextSelection: function(){
-    document.body.focus();
-    document.onselectstart = function () { return false; };
-  },
-  // Turn off text selection blocking
-  unblockTextSelection: function(){ document.onselectstart = function () { return true; }; },
-
-  // Return seconds as MM:SS
-  formatTime: function(secs) {
-    var seconds = Math.round(secs);
-    var minutes = Math.floor(seconds / 60);
-    minutes = (minutes >= 10) ? minutes : "0" + minutes;
-    seconds = Math.floor(seconds % 60);
-    seconds = (seconds >= 10) ? seconds : "0" + seconds;
-    return minutes + ":" + seconds;
-  },
-
-  // Return the relative horizonal position of an event as a value from 0-1
-  getRelativePosition: function(x, relativeElement){
-    return Math.max(0, Math.min(1, (x - this.findPosX(relativeElement)) / relativeElement.offsetWidth));
-  },
-  // Get an objects position on the page
-  findPosX: function(obj) {
-    var curleft = obj.offsetLeft;
-    while(obj = obj.offsetParent) {
-      curleft += obj.offsetLeft;
-    }
-    return curleft;
-  },
-  getComputedStyleValue: function(element, style){
-    return window.getComputedStyle(element, null).getPropertyValue(style);
-  },
-
-  round: function(num, dec) {
-    if (!dec) { dec = 0; }
-    return Math.round(num*Math.pow(10,dec))/Math.pow(10,dec);
-  },
-
-  addListener: function(element, type, handler){
-    if (element.addEventListener) {
-      element.addEventListener(type, handler, false);
-    } else if (element.attachEvent) {
-      element.attachEvent("on"+type, handler);
-    }
-  },
-  removeListener: function(element, type, handler){
-    if (element.removeEventListener) {
-      element.removeEventListener(type, handler, false);
-    } else if (element.attachEvent) {
-      element.detachEvent("on"+type, handler);
-    }
-  },
-
-  get: function(url, onSuccess){
-    // if (netscape.security.PrivilegeManager.enablePrivilege) {
-    //   netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
-    // }
-    if (typeof XMLHttpRequest == "undefined") {
-      XMLHttpRequest = function () {
-        try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch (e) {}
-        try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch (f) {}
-        try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (g) {}
-        //Microsoft.XMLHTTP points to Msxml2.XMLHTTP.3.0 and is redundant
-        throw new Error("This browser does not support XMLHttpRequest.");
-      };
-    }
-    var request = new XMLHttpRequest();
-    request.open("GET",url);
-    request.onreadystatechange = function() {
-      if (request.readyState == 4 && request.status == 200) {
-        onSuccess(request.responseText);
-      }
-    }.context(this);
-    try {
-      request.send();
-    } catch(e) {
-      // Can't access file.
-    }
-  },
-
-  trim: function(string){ return string.toString().replace(/^\s+/, "").replace(/\s+$/, ""); },
-
-  // DOM Ready functionality adapted from jQuery. http://jquery.com/
-  bindDOMReady: function(){
-    if (document.readyState === "complete") {
-      return VideoJS.onDOMReady();
-    }
-    if (document.addEventListener) {
-      document.addEventListener("DOMContentLoaded", VideoJS.DOMContentLoaded, false);
-      window.addEventListener("load", VideoJS.onDOMReady, false);
-    } else if (document.attachEvent) {
-      document.attachEvent("onreadystatechange", VideoJS.DOMContentLoaded);
-      window.attachEvent("onload", VideoJS.onDOMReady);
-    }
-  },
-
-  DOMContentLoaded: function(){
-    if (document.addEventListener) {
-      document.removeEventListener( "DOMContentLoaded", VideoJS.DOMContentLoaded, false);
-      VideoJS.onDOMReady();
-    } else if ( document.attachEvent ) {
-      if ( document.readyState === "complete" ) {
-        document.detachEvent("onreadystatechange", VideoJS.DOMContentLoaded);
-        VideoJS.onDOMReady();
-      }
-    }
-  },
-
-  // Functions to be run once the DOM is loaded
-  DOMReadyList: [],
-  addToDOMReady: function(fn){
-    if (VideoJS.DOMIsReady) {
-      fn.call(document);
-    } else {
-      VideoJS.DOMReadyList.push(fn);
-    }
-  },
-
-  DOMIsReady: false,
-  onDOMReady: function(){
-    if (VideoJS.DOMIsReady) { return; }
-    if (!document.body) { return setTimeout(VideoJS.onDOMReady, 13); }
-    VideoJS.DOMIsReady = true;
-    if (VideoJS.DOMReadyList) {
-      for (var i=0; i<VideoJS.DOMReadyList.length; i++) {
-        VideoJS.DOMReadyList[i].call(document);
-      }
-      VideoJS.DOMReadyList = null;
-    }
-  }
-});
-VideoJS.bindDOMReady();
-
-// Allows for binding context to functions
-// when using in event listeners and timeouts
-Function.prototype.context = function(obj){
-  var method = this,
-  temp = function(){
-    return method.apply(obj, arguments);
-  };
-  return temp;
-};
-
-// Like context, in that it creates a closure
-// But insteaad keep "this" intact, and passes the var as the second argument of the function
-// Need for event listeners where you need to know what called the event
-// Only use with event callbacks
-Function.prototype.evtContext = function(obj){
-  var method = this,
-  temp = function(){
-    var origContext = this;
-    return method.call(obj, arguments[0], origContext);
-  };
-  return temp;
-};
-
-// Removeable Event listener with Context
-// Replaces the original function with a version that has context
-// So it can be removed using the original function name.
-// In order to work, a version of the function must already exist in the player/prototype
-Function.prototype.rEvtContext = function(obj, funcParent){
-  if (this.hasContext === true) { return this; }
-  if (!funcParent) { funcParent = obj; }
-  for (var attrname in funcParent) {
-    if (funcParent[attrname] == this) {
-      funcParent[attrname] = this.evtContext(obj);
-      funcParent[attrname].hasContext = true;
-      return funcParent[attrname];
-    }
-  }
-  return this.evtContext(obj);
-};
-

dev/src/main.js

@@ -1,306 +0,0 @@
-// Using jresig's Class implementation http://ejohn.org/blog/simple-javascript-inheritance/
-(function(){var initializing=false, fnTest=/xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/; this.JRClass = function(){}; JRClass.extend = function(prop) { var _super = this.prototype; initializing = true; var prototype = new this(); initializing = false; for (var name in prop) { prototype[name] = typeof prop[name] == "function" && typeof _super[name] == "function" && fnTest.test(prop[name]) ? (function(name, fn){ return function() { var tmp = this._super; this._super = _super[name]; var ret = fn.apply(this, arguments); this._super = tmp; return ret; }; })(name, prop[name]) : prop[name]; } function JRClass() { if ( !initializing && this.init ) this.init.apply(this, arguments); } JRClass.prototype = prototype; JRClass.constructor = JRClass; JRClass.extend = arguments.callee; return JRClass;};})();
-
-// Video JS Player Class
-var VideoJS = JRClass.extend({
-
-  // Initialize the player for the supplied video tag element
-  // element: video tag
-  init: function(element, setOptions){
-
-    // Allow an ID string or an element
-    if (typeof element == 'string') {
-      this.video = document.getElementById(element);
-    } else {
-      this.video = element;
-    }
-
-    this.video.player = this; // Store reference to player on the video element.
-    this.box = this.video.parentNode; // Container element for controls positioning
-    this.values = {}; // Cache for video property values.
-    this.elements = {}; // Store refs to controls elements.
-    this.listeners = {}; // Store video event listeners.
-    this.api = {}; // Current API to video functions (changes with player type)
-
-    // Hide Links. Will be shown again if "links" player is used
-    this.linksFallback = this.getLinksFallback();
-    this.hideLinksFallback();
-
-    // Default Options
-    this.options = {
-      autoplay: false,
-      preload: true,
-      loop: false,
-      returnToStart: true, // Go back to the beginning when the video is done
-      controlsEnabled: true,
-      useBuiltInControls: false, // Use the browser's controls (iPhone)
-      controlsBelow: false, // Display control bar below video vs. in front of
-      controlsAtStart: false, // Make controls visible when page loads
-      controlsHiding: true, // Hide controls when not over the video
-      defaultVolume: 0.85, // Will be overridden by localStorage volume if available
-      playerFallbackOrder: ["html5", "flash", "links"], // Players and order to use them
-      flashPlayer: "htmlObject", // htmlObject, or custom options available
-      flashPlayerVersion: false // Required flash version for fallback
-    };
-    // Override default options with global options
-    if (typeof VideoJS.options == "object") { _V_.merge(this.options, VideoJS.options); }
-    // Override default & global options with options specific to this player
-    if (typeof setOptions == "object") { _V_.merge(this.options, setOptions); }
-    // Override preload & autoplay with video attributes (test x = y || z on IE)
-    if (this.getPreloadAttribute() !== undefined) { this.options.preload = this.getPreloadAttribute(); }
-    if (this.getAutoplayAttribute() !== undefined) { this.options.autoplay = this.getAutoplayAttribute(); }
-
-    // Loop through the player names list in options, "html5" etc.
-    // For each player name, initialize the player with that name under VideoJS.players
-    // If the player successfully initializes, we're done
-    // If not, try the next player in the list
-    this.each(this.options.playerFallbackOrder, function(playerType){
-      if (this[playerType+"Supported"]()) { // Check if player type is supported
-        this[playerType+"Init"](); // Initialize player type
-        return true; // Stop looping through players
-      }
-    });
-
-    // Start Global Listeners - API doesn't exist before now
-    this.activateElement(this, "player");
-    this.activateElement(this.box, "box");
-  },
-  /* Behaviors - Make elements act like specific controls or displays
-  ================================================================================ */
-  behaviors: {},
-  newBehavior: function(name, activate, functions){
-    this.behaviors[name] = activate;
-    this.extend(functions);
-  },
-  // Change to addBehavior or attachBehavior?
-  activateElement: function(element, behavior){
-    // Allow passing and ID string
-    if (typeof element == "string") { element = document.getElementById(element); }
-    this.behaviors[behavior].call(this, element);
-  },
-  /* Errors/Warnings
-  ================================================================================ */
-  errors: [], // Array to track errors
-  warnings: [],
-  warning: function(warning){
-    this.warnings.push(warning);
-    this.log(warning);
-  },
-  /* History of errors/events (not quite there yet)
-  ================================================================================ */
-  history: [],
-  log: function(event){
-    if (!event) { return; }
-    if (typeof event == "string") { event = { type: event }; }
-    if (event.type) { this.history.push(event.type); }
-    if (this.history.length >= 50) { this.history.shift(); }
-    try { console.log(event.type); } catch(e) { try { opera.postError(event.type); } catch(e){} }
-  },
-  /* Local Storage
-  ================================================================================ */
-  setLocalStorage: function(key, value){
-    if (!localStorage) { return; }
-    try {
-      localStorage[key] = value;
-    } catch(e) {
-      if (e.code == 22 || e.code == 1014) { // Webkit == 22 / Firefox == 1014
-        this.warning(VideoJS.warnings.localStorageFull);
-      }
-    }
-  },
-  /* Helpers
-  ================================================================================ */
-  getPreloadAttribute: function(){
-    if (typeof this.video.hasAttribute == "function" && this.video.hasAttribute("preload")) {
-      var preload = this.video.getAttribute("preload");
-      // Only included the attribute, thinking it was boolean
-      if (preload === "" || preload === "true") { return "auto"; }
-      if (preload === "false") { return "none"; }
-      return preload;
-    }
-  },
-  getAutoplayAttribute: function(){
-    if (typeof this.video.hasAttribute == "function" && this.video.hasAttribute("autoplay")) {
-      var autoplay = this.video.getAttribute("autoplay");
-      if (autoplay === "false") { return false; }
-      return true;
-    }
-  },
-  // Each that maintains player as context
-  // Break if true is returned
-  each: function(arr, fn){
-    if (!arr || arr.length === 0) { return; }
-    for (var i=0,j=arr.length; i<j; i++) {
-      if (fn.call(this, arr[i], i)) { break; }
-    }
-  },
-  // Add functions to the player
-  extend: function(obj){
-    for (var attrname in obj) {
-      if (obj.hasOwnProperty(attrname)) { this[attrname]=obj[attrname]; }
-    }
-  }
-});
-VideoJS.fn = VideoJS.prototype;
-VideoJS.options = {}; // Globally set options
-
-/* Download Links Fallback (Player Type)
-================================================================================ */
-VideoJS.fn.extend({
-  linksSupported: function(){ return true; },
-  linksInit: function(){
-    this.showLinksFallback();
-    this.element = this.video;
-  },
-  // Get the download links block element
-  getLinksFallback: function(){ return this.box.getElementsByTagName("P")[0]; },
-  // Hide no-video download paragraph
-  hideLinksFallback: function(){
-    if (this.linksFallback) { this.linksFallback.style.display = "none"; }
-  },
-  // Hide no-video download paragraph
-  showLinksFallback: function(){
-    if (this.linksFallback) { this.linksFallback.style.display = "block"; }
-  }
-});
-
-////////////////////////////////////////////////////////////////////////////////
-// Class Methods
-// Functions that don't apply to individual videos.
-////////////////////////////////////////////////////////////////////////////////
-
-// Combine Objects - Use "safe" to protect from overwriting existing items
-VideoJS.merge = function(obj1, obj2, safe){
-  for (var attrname in obj2){
-    if (obj2.hasOwnProperty(attrname) && (!safe || !obj1.hasOwnProperty(attrname))) { obj1[attrname]=obj2[attrname]; }
-  }
-  return obj1;
-};
-VideoJS.extend = function(obj){ this.merge(this, obj, true); };
-
-VideoJS.extend({
-  // Add VideoJS to all video tags with the video-js class when the DOM is ready
-  setupAll: function(options, fn){
-    // Options is stored globally, and added ot any new player on init
-    VideoJS.options = options;
-    VideoJS.DOMReady(VideoJS.setup);
-    if (fn) { VideoJS.DOMReady(fn); }
-  },
-  
-  // Backward compatability. Changed to just SetupAll
-  setupAllWhenReady: function(options){ VideoJS.setupAll(options); },
-
-  // Run the supplied function when the DOM is ready
-  DOMReady: function(fn){
-    VideoJS.addToDOMReady(fn);
-  },
-
-  // Set up a specific video or array of video elements
-  // "video" can be:
-  //    false, undefined, or "All": set up all videos with the video-js class
-  //    A video tag ID or video tag element: set up one video and return one player
-  //    An array of video tag elements/IDs: set up each and return an array of players
-  setup: function(videos, options){
-    var returnSingular = false,
-    playerList = [],
-    videoElement;
-
-    // If videos is undefined or "All", set up all videos with the video-js class
-    if (!videos || videos == "All") {
-      videos = VideoJS.getVideoJSTags();
-    // If videos is not an array, add to an array
-    } else if (typeof videos != 'object' || videos.nodeType == 1) {
-      videos = [videos];
-      returnSingular = true;
-    }
-
-    // Loop through videos and create players for them
-    for (var i=0; i<videos.length; i++) {
-      if (typeof videos[i] == 'string') {
-        videoElement = document.getElementById(videos[i]);
-      } else { // assume DOM object
-        videoElement = videos[i];
-      }
-      playerList.push(new VideoJS(videoElement, options));
-    }
-
-    // Return one or all depending on what was passed in
-    return (returnSingular) ? playerList[0] : playerList;
-  },
-
-  // Get the player object for the supplied video tag ID
-  player: function(id){ return document.getElementById(id).player; },
-
-  // Find video tags with the video-js class
-  getVideoJSTags: function() {
-    var videoTags = document.getElementsByTagName("video"),
-    videoJSTags = [], videoTag;
-
-    for (var i=0,j=videoTags.length; i<j; i++) {
-      videoTag = videoTags[i];
-      if (videoTag.className.indexOf("video-js") != -1) {
-        videoJSTags.push(videoTag);
-      }
-    }
-    return videoJSTags;
-  },
-
-  // Check if the browser supports video.
-  browserSupportsVideo: function() {
-    if (typeof VideoJS.videoSupport != "undefined") { return VideoJS.videoSupport; }
-    VideoJS.videoSupport = !!document.createElement('video').canPlayType;
-    return VideoJS.videoSupport;
-  },
-
-  getFlashVersion: function(){
-    // Cache Version
-    if (typeof VideoJS.flashVersion != "undefined") { return VideoJS.flashVersion; }
-    var version = 0, desc;
-    if (typeof navigator.plugins != "undefined" && typeof navigator.plugins["Shockwave Flash"] == "object") {
-      desc = navigator.plugins["Shockwave Flash"].description;
-      if (desc && !(typeof navigator.mimeTypes != "undefined" && navigator.mimeTypes["application/x-shockwave-flash"] && !navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin)) {
-        version = parseInt(desc.match(/^.*\s+([^\s]+)\.[^\s]+\s+[^\s]+$/)[1], 10);
-      }
-    } else if (typeof window.ActiveXObject != "undefined") {
-      try {
-        var testObject = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
-        if (testObject) {
-          version = parseInt(testObject.GetVariable("$version").match(/^[^\s]+\s(\d+)/)[1], 10);
-        }
-      }
-      catch(e) {}
-    }
-    VideoJS.flashVersion = version;
-    return VideoJS.flashVersion;
-  },
-
-  // Browser & Device Checks
-  isIE: function(){ return !+"\v1"; },
-  isIPad: function(){ return navigator.userAgent.match(/iPad/i) !== null; },
-  isIPhone: function(){ return navigator.userAgent.match(/iPhone/i) !== null; },
-  isIOS: function(){ return VideoJS.isIPhone() || VideoJS.isIPad(); },
-  iOSVersion: function() {
-    var match = navigator.userAgent.match(/OS (\d+)_/i);
-    if (match && match[1]) { return match[1]; }
-  },
-  isAndroid: function(){ return navigator.userAgent.match(/Android.*AppleWebKit/i) !== null; },
-  androidVersion: function() {
-    var match = navigator.userAgent.match(/Android (\d+)\./i);
-    if (match && match[1]) { return match[1]; }
-  },
-  //isAndroidBrowser
-
-  warnings: {
-    // Safari errors if you call functions on a video that hasn't loaded yet
-    videoNotReady: "Video is not ready yet (try playing the video first).",
-    // Getting a QUOTA_EXCEEDED_ERR when setting local storage occasionally
-    localStorageFull: "Local Storage is Full"
-  }
-});
-
-// Shim to make Video tag valid in IE
-if(VideoJS.isIE()) { document.createElement("video"); }
-
-// Expose to global
-window.VideoJS = window._V_ = VideoJS;
-

dev/src/video-js.jquery.js

@@ -1,24 +0,0 @@
-/* jQuery Plugin
-================================================================================ */
-if (window.jQuery) {
-  (function($) {
-
-    $.fn.setupPlayer = function(options) {
-      return VideoJS.setup(this[0], options);
-    };
-
-    // Deprecated
-    $.fn.VideoJS = function(options) {
-      this.each(function() {
-        VideoJS.setup(this, options);
-      });
-      return this;
-    };
-
-    $.fn.player = function() {
-      return this[0].player;
-    };
-
-  })(jQuery);
-}
-

dev/test.html

@@ -1,150 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8" />
-  <title>HTML5 Video Player</title>
-
-  <!-- Include the VideoJS Library -->
-  <script src="src/main.js" type="text/javascript" charset="utf-8"></script>
-  <script src="src/api.js" type="text/javascript" charset="utf-8"></script>
-  <script src="src/html5.js" type="text/javascript" charset="utf-8"></script>
-  <script src="src/flash.js" type="text/javascript" charset="utf-8"></script>
-  <script src="src/behaviors.js" type="text/javascript" charset="utf-8"></script>
-  <script src="src/lib.js" type="text/javascript" charset="utf-8"></script>
-  <script src="src/video-js.jquery.js" type="text/javascript" charset="utf-8"></script>
-  <!-- <script src="flowplayer/video-js.flowplayer.js" type="text/javascript" charset="utf-8"></script> -->
-
-  <script type="text/javascript">
-    VideoJS.setupAllWhenReady({ playerFallbackOrder: ["flash", "links"] });
-    VideoJS.DOMReady(function(){
-      // myPlayer = VideoJS.setup("example_video_1", { 
-      //         // controlsHiding: true, 
-      //         // controlsBelow: false, 
-      //         // showControlsAtStart: true
-      //       });
-      //       myPlayer.activateElement(document.getElementById("scrub"), "playProgressBar");
-      //       var vid = document.getElementById("example_video_1"),
-      //           attrTable = document.getElementById("attributes"),
-      //           attrNames = ["error", "networkState", "readyState", "preload", "buffered",
-      //             "seeking", "currentTime", "initialTime", "duration", "startOffsetTime",
-      //             "paused", "defaultPlaybackRate", "playbackRate", "played", "seekable",
-      //             "ended", "autoplay", "loop", "controls", "volume", "muted", "tracks"
-      //           ],
-      //           attrs = {};
-      // 
-      //       for(var i=0,j=attrNames.length; i<j; i++) {
-      //         var row = _V_.createElement("tr");
-      //         var th = _V_.createElement("th"); 
-      //         th.innerHTML = attrNames[i];
-      //         attrs[attrNames[i]] = _V_.createElement("td", { id: attrNames[i] });
-      //         row.appendChild(th); row.appendChild(attrs[attrNames[i]]);
-      //         attrTable.appendChild(row);
-      //       }
-      //       
-      //       setInterval(function(){
-      //         for(var i=0,j=attrNames.length; i<j; i++) {
-      //           attrs[attrNames[i]].innerHTML = vid[attrNames[i]];
-      //         }
-      //       }, 100);
-      //       
-      //       var events = ["loadstart","progress","suspend","abort","error","emptied","stalled","play","pause",
-      //         "loadedmetadata", "loadeddata", "waiting", "playing", "canplay", "canplaythrough", "seeking", "seeked",
-      //         // "timeupdate",
-      //         "ended", "ratechange", "durationchange","volumechange"
-      //       ],
-      //       eventsList = document.getElementById("events");
-      //       
-      //       for(var i=0,j=events.length; i<j; i++) {
-      //         _V_.addListener(vid, events[i], function(){
-      //           eventsList.innerHTML = this + "\n" + eventsList.innerHTML
-      //         }.context(events[i]));
-      //       }
-      
-    });
-
-  </script>
-
-  <style type="text/css" media="screen">
-    #attributes { width: 300px; float: left; }
-    #events { width: 300px; height: 500px; float: left; }
-  </style>
-
-  <!-- Include the VideoJS Stylesheet -->
-  <link rel="stylesheet" href="../video-js.css" type="text/css" media="screen" title="Video JS">
-  <link rel="stylesheet" href="../skins/tube.css" type="text/css" media="screen" title="Video JS">
-  <link rel="stylesheet" href="../skins/hu.css" type="text/css" media="screen" title="Video JS">
-  <link rel="stylesheet" href="../skins/vim.css" type="text/css" media="screen" title="Video JS">
-</head>
-<body>
-
-  <!-- Begin VideoJS -->
-  <div id="scrub" style="background: #000; height: 10px;"></div>
-  
-  <div class="video-js-box">
-    <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
-    <video id="example_video_1" class="video-js" width="640" height="264" controls="controls" preload="auto" poster="http://video-js.zencoder.com/oceans-clip.png">
-      <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
-      <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
-      <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />
-      <track kind="subtitles" src="../demo-subtitles.srt" srclang="en-US" label="English"></track>
-      <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
-      <object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
-        data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
-        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
-        <param name="wmode" value="opaque" />
-        <param name="allowfullscreen" value="true" />
-        <param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
-        <!-- Image Fallback. Typically the same as the poster image. -->
-        <img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
-          title="No video playback capabilities." />
-      </object>
-    </video>
-    <!-- Download links provided for devices that can't play video in the browser. -->
-    <p class="vjs-no-video"><strong>Download Video:</strong>
-      <a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
-      <a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
-      <a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br>
-      <!-- Support VideoJS by keeping this link. -->
-      <a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
-    </p>
-  </div>
-  <!-- End VideoJS -->
-
-  <div class="video-js-box">
-    <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
-    <!-- <video id="example_video_2" class="video-jsnot" width="640" height="264" controls="controls" preload="none" poster="http://video-js.zencoder.com/oceans-clip.png"> -->
-      <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
-      <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
-      <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />
-      <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
-      <object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
-        data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
-        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
-        <param name="wmode" value="opaque" />
-        <param name="allowfullscreen" value="true" />
-        <param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
-        <!-- Image Fallback. Typically the same as the poster image. -->
-        <img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
-          title="No video playback capabilities." />
-      </object>
-    <!-- </video> -->
-    <!-- Download links provided for devices that can't play video in the browser. -->
-    <p class="vjs-no-video"><strong>Download Video:</strong>
-      <a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
-      <a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
-      <a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br>
-      <!-- Support VideoJS by keeping this link. -->
-      <a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
-    </p>
-  </div>
-  <!-- End VideoJS -->
-
-  <a href="#" onclick="document.getElementById('example_video_1').currentTime = 10; return false;">Click</a>
-
-  <table id="attributes">
-  </table>
-  
-  <textarea id="events"></textarea>
-
-</body>
-</html>

docs/API.markdown

@@ -1,214 +0,0 @@
-API
-===
-The VideoJS API allows you to interact with the video through Javascript, whether the browser is playing the video through HTML5 video or through the Flash fallback (with supported Flash players).
-
-To use the API functions, you need access to the video player object. Luckily this is easy to get. You just need to make sure your video tag has an ID. The default embed code has an ID of "example_video_1". If you have multiple videos on one page, make sure every video tag has a unique ID.
-
-NOTE: Before you can access the player, the DOM must be ready and the VideoJS setup methods must have run. Follow the examples and you'll be fine.
-
-Using the VideoJS setup with built-in DOM ready function.
-
-    VideoJS.setupAll(options, function(){
-
-      var myPlayer = VideoJS.player("example_video_id");
-
-    });
-
-Using a javascript library's DOM ready function (jQuery example)
-
-    $(function(){ // DOM Ready
-
-      var myPlayer = VideoJS.setup("example_video_1", options);
-
-    });
-
-After the player has been setup, you can also always access the player through the video element's "player" attribute.
-
-    // Javascript Example
-    myPlayer = document.getElementById("example_video_1").player;
-  
-    // jQuery Example
-    myPlayer = $("#example_video_1")[0].player
-  
-    // VideoJS jQuery Plugin Example
-    myPlayer = $("#example_video_1").player();
-
-
-Now that you have access to the player through the myPlayer variable, you can control the video or react to video events using the following methods.
-
-
-### play()
-  Start video playback.
-  Returns the player object.
-  Example:
-
-    myPlayer.play();
-
-### onPlay(callback) // Type: Function
-  Trigger the supplied callback function every time the video starts playing.
-  Returns the player object.
-  Example:
-
-    myPlayer.onPlay(function(){
-      alert("OMG Video is playing!");
-    });
-
-### pause()
-  Pause the video playback.
-  Returns: the player object
-  Example:
-
-    myPlayer.pause();
-
-### onPause(callback) // Type: Function
-  Trigger the supplied callback function every time the video is paused.
-  Returns the player object.
-  Example:
-
-    myPlayer.onPause(function(){
-      alert("OMG Video is paused now!");
-    });
-
-### currentTime()
-  Returns the current time of the video in seconds.
-  Example:
-
-    var whereYouAt = myPlayer.currentTime();
-
-### currentTime(seconds) // Type: Integer or Float
-  Seek to the supplied time (seconds).
-  Returns the player object.
-  Example:
-
-    myPlayer.currentTime(120); // 2 minutes into the video
-
-### onTimeUpdate(callback) // Type: Function
-  Trigger the supplied callback function every time the currentTime changes. This is triggered about 10 times per second.
-  Returns the player object.
-  Example:
-
-    myPlayer.onTimeUpdate(function(){
-      alert("The video is now " + myPlayer.currentTime() + " seconds in.");
-    });
-
-### onEnded(callback) // Type: Function
-  Trigger the supplied callback function when the video finishes playing.
-  Returns the player object.
-  Example:
-
-    myPlayer.onEnded(function(){
-      alert("Fin!");
-    });
-
-### duration()
-  Returns the length in time of the video in seconds. Note: The video must have started loading before the duration can be known.
-  Example:
-
-    var howLongIsThis = myPlayer.duration();
-
-### onDurationUpdate(callback) // Type: Function
-  Trigger the supplied callback function when the video's duration is updated.
-  Returns the player object.
-  Example:
-
-    myPlayer.onDurationUpdate(function(){
-      alert("The video's duration is now " + myPlayer.duration());
-    });
-
-### buffered()
-  Returns the amount of video that has loaded (downloaded) into the buffer.
-  Example:
-
-    // Needs to be expanded
-    var howMuchIsLoaded = myPlayer.duration();
-
-### onBufferedUpdate(callback) // Type: Function
-  Trigger the supplied callback function when the video's buffered amount is updated.
-  Returns the player object.
-  Example:
-
-    // Needs to be updated
-    myPlayer.onBufferedUpdate(function(){
-      alert("The video's duration is now " + myPlayer.duration());
-    });
-
-### volume()
-  Returns the current volume of the video as a percent in decimal form. 0 is off (muted), 1.0 is all the way up, 0.5 is half way.
-  Example:
-
-    var howLoudIsIt = myPlayer.volume();
-
-### volume(percentAsDecimal)
-  Set the volume to the supplied percent (as a decimal between 0 and 1).
-  Example:
-
-    myPlayer.volume(0.5); // Set volume to half
-
-### onVolumeChange(callback)
-  Trigger the supplied callback function when the video's volume changes.
-  Returns the player object.
-  Example:
-
-    myPlayer.onVolumeChange(function(){
-      alert("The video's volume is now " + myPlayer.volume());
-    });
-
-### width()
-  Returns the current width of the video in pixels.
-  Example:
-  
-    var howWideIsIt = myPlayer.width();
-
-### width(pixels)
-  Change the width of the video to the supplied width in pixels.
-  Returns the player object
-  Example:
-
-    myPlayer.width(640);
-
-### height()
-  Returns the current height of the video in pixels.
-  Example:
-
-    var howTallIsIt = myPlayer.height();
-
-### height(pixels)
-  Change the height of the video to the supplied height in pixels.
-  Returns the player object
-
-    myPlayer.height(480);
-
-### size(width, height)
-  Changes the width and height of the video to the supplied width and height. This is more efficient if you're changing both width and height.
-  Returns the player object.
-  
-    myPlayer.size(640,480);
-
-### onResize(callback)
-  Trigger the supplied callback function when the video's size (width, height, or both) changes.
-  Returns the player object.
-
-    myPlayer.onResize(function(){
-      alert("The video is now " + myPlayer.width() + " by " + myPlayer.height());
-    });
-
-### enterFullScreen()
-  Increase the size of the video to full screen. In some browsers, full screen is not supported natively, so it enters full window mode, where the fills the browser window. In browsers that support native full screen, typically the browser's default controls will be shown, and not the VideoJS custom skin. In full window mode, the VideoJS controls and skin will always be used.
-  Returns the player object.
-
-    myPlayer.enterFullScreen();
-
-### exitFullScreen()
-  Return the video to its normal size after having been in full screen mode.
-  Returns the player object.
-
-    myPlayer.exitFullScreen();
-
-### onError(callback)
-  Trigger the supplied callback function when the video when there is an error with the video.
-  Returns the player object.
-
-    // Need to make work
-    myPlayer.onError(function(errorText, errorID){
-      alert("There's something wrong. " + errorText);
-    });

docs/api.md

@@ -0,0 +1,234 @@
+API
+===
+The Video.js API allows you to interact with the video through Javascript, whether the browser is playing the video through HTML5 video, Flash, or any other supported playback technologies.
+
+Referencing the Player
+----------------------
+To use the API functions, you need access to the player object. Luckily this is easy to get. You just need to make sure your video tag has an ID. The example embed code has an ID of "example\_video_1". If you have multiple videos on one page, make sure every video tag has a unique ID.
+```js
+var myPlayer = videojs("example_video_1");
+```
+
+(If the player hasn't been initialized yet via the data-setup attribute or another method, this will also initialize the player.)
+
+Wait Until the Player is Ready
+------------------------------
+The time it takes Video.js to set up the video and API will vary depending on the playback technology being used (HTML5 will often be much faster to load than Flash). For that reason we want to use the player's 'ready' function to trigger any code that requires the player's API.
+```javascript
+videojs("example_video_1").ready(function(){
+
+  var myPlayer = this;
+
+  // EXAMPLE: Start playing the video.
+  myPlayer.play();
+
+});
+```
+
+API Methods
+-----------
+Now that you have access to a ready player, you can control the video, get values, or respond to video events using the following functions. The Video.js API function names follow the [HTML5 media API](http://www.w3.org/TR/html5/video.html). The main difference is that attributes which you would get or set on a video element using the equals sign ( `myVideoElement.currentTime = "120";` ), you would use a function argument syntax for Video.js ( `myPlayer.currentTime(120);` )
+
+### play() ###
+Start video playback. Returns the player object.
+```js
+myPlayer.play();
+```
+
+
+### pause() ###
+Pause the video playback. Returns the player object
+```js
+myPlayer.pause();
+```
+
+
+### paused() ###
+Returns false if the video is currently playing, or true otherwise. ()
+```js
+var isPaused = myPlayer.paused();
+var isPlaying = !myPlayer.paused();
+```
+
+
+### src(newSource) ###
+The source function updates the video source. There are three types of variables you can pass as the argument.
+
+**URL String**: A URL to the the video file. Use this method if you're sure the current playback technology (HTML5/Flash) can support the source you provide. Currently only MP4 files can be used in both HTML5 and Flash.
+```js
+myPlayer.src("http://www.example.com/path/to/video.mp4");
+```
+
+**Source Object (or element):** A javascript object containing information about the source file. Use this method if you want the player to determine if it can support the file using the type information.
+```js
+myPlayer.src({ type: "video/mp4", src: "http://www.example.com/path/to/video.mp4" });
+```
+
+**Array of Source Objects:** To provide multiple versions of the source so that it can be played using HTML5 across browsers you can use an array of source objects. Video.js will detect which version is supported and load that file.
+```js
+myPlayer.src([
+  { type: "video/mp4", src: "http://www.example.com/path/to/video.mp4" },
+  { type: "video/webm", src: "http://www.example.com/path/to/video.webm" },
+  { type: "video/ogg", src: "http://www.example.com/path/to/video.ogv" }
+]);
+```
+
+Returns the player object.
+
+
+### currentTime() ###
+Returns the current time of the video in seconds.
+```js
+var whereYouAt = myPlayer.currentTime();
+```
+
+
+### currentTime(seconds) // Type: Integer or Float ###
+Seek to the supplied time (seconds). Returns the player object.
+```js
+myPlayer.currentTime(120); // 2 minutes into the video
+```
+
+
+### duration() ###
+Returns the length in time of the video in seconds. NOTE: The video must have started loading before the duration can be known, and in the case of Flash, may not be known until the video starts playing.
+```js
+var howLongIsThis = myPlayer.duration();
+```
+
+
+### buffered() ###
+Returns a [TimeRange](glossary.md#timerange) object with sections of the video that have been downloaded. If you just want the percent of the video that's been downloaded, use bufferedPercent.
+```js
+var bufferedTimeRange = myPlayer.buffered(),
+
+// Number of different ranges of time have been buffered. Usually 1.
+numberOfRanges = bufferedTimeRange.length,
+
+// Time in seconds when the first range starts. Usually 0.
+firstRangeStart = bufferedTimeRange.start(0),
+
+// Time in seconds when the first range ends
+firstRangeEnd = bufferedTimeRange.end(0),
+
+// Length in seconds of the first time range
+firstRangeLength = firstRangeEnd - firstRangeStart;
+```
+
+
+### bufferedPercent() ###
+Returns the percent (as a decimal) of the video that's been downloaded. 0 means none, 1 means all.
+```js
+var howMuchIsDownloaded = myPlayer.bufferedPercent();
+```
+
+
+### volume() ###
+Returns the current volume of the video as a percent in decimal form. 0 is off (muted), 1.0 is all the way up, 0.5 is half way.
+```js
+var howLoudIsIt = myPlayer.volume();
+```
+
+
+### volume(percentAsDecimal) ###
+Set the volume to the supplied percent (as a decimal between 0 and 1).
+```js
+myPlayer.volume(0.5); // Set volume to half
+```
+
+
+### width() ###
+Returns the current width of the video in pixels.
+```js
+var howWideIsIt = myPlayer.width();
+```
+
+
+### width(pixels) ###
+Change the width of the video to the supplied width in pixels. Returns the player object
+```js
+myPlayer.width(640);
+```
+
+
+### height() ###
+Returns the current height of the video in pixels.
+```js
+var howTallIsIt = myPlayer.height();
+```
+
+
+### height(pixels) ###
+Change the height of the video to the supplied height in pixels. Returns the player object
+```js
+myPlayer.height(480);
+```
+
+
+### dimensions(width, height) ###
+Changes the width and height of the video to the supplied width and height. This is more efficient if you're changing both width and height (only triggers the player's resize event once). Returns the player object.
+```js
+myPlayer.dimensions(640,480);
+```
+
+
+### requestFullScreen() ###
+Increase the size of the video to full screen. In some browsers, full screen is not supported natively, so it enters full window mode, where the video fills the browser window. In browsers and devices that support native full screen, sometimes the browser's default controls will be shown, and not the Video.js custom skin. This includes most mobile devices (iOS, Android) and older versions of Safari. Returns the player object.
+```js
+myPlayer.requestFullScreen();
+```
+
+
+### cancelFullScreen() ###
+Return the video to its normal size after having been in full screen mode. Returns the player object.
+```js
+myPlayer.cancelFullScreen();
+```
+
+
+### dispose() ###
+Destroys the video player and does any necessary cleanup. This is especially helpful if you are dynamically adding and removing videos to/from the DOM. Use after removing videos from the DOM.
+```js
+myPlayer.dispose();
+```
+
+
+
+Events
+------
+You can attach event listeners to the player similarly to how you would for a video element.
+
+```js
+var myFunc = function(){
+  var myPlayer = this;
+  // Do something when the event is fired
+};
+myPlayer.on("eventName", myFunc);
+```
+
+You can also remove the listeners later.
+```js
+myPlayer.off("eventName", myFunc);
+```
+
+
+### Event Types
+List of player events you can add listeners for.
+
+<table border="0" cellspacing="5" cellpadding="5">
+  <tr><th>Name</th><th>Description</th></tr>
+  <tr><td>loadstart</td><td>Fired when the user agent begins looking for media data.</td></tr>
+  <tr><td>loadedmetadata</td><td>Fired when the player has initial duration and dimension information.</td></tr>
+  <tr><td>loadeddata</td><td>Fired when the player has downloaded data at the current playback position.</td></tr>
+  <tr><td>loadedalldata</td><td>Fired when the player has finished downloading the source data.</td></tr>
+  <tr><td>play</td><td>Fired whenever the media begins or resumes playback.</td></tr>
+  <tr><td>pause</td><td>Fired whenever the media has been paused.</td></tr>
+  <tr><td>timeupdate</td><td>Fired when the current playback position has changed. During playback this is fired every 15-250 milliseconds, depnding on the playback technology in use.</td></tr>
+  <tr><td>ended</td><td>Fired when the end of the media resource is reached. currentTime == duration</td></tr>
+  <tr><td>durationchange</td><td>Fired when the duration of the media resource is changed, or known for the first time.</td></tr>
+  <tr><td>progress</td><td>Fired while the user agent is downloading media data.</td></tr>
+  <tr><td>resize</td><td>Fired when the width and/or height of the video window changes.</td></tr>
+  <tr><td>volumechange</td><td>Fired when the volume changes.</td></tr>
+  <tr><td>error</td><td>Fired when there is an error in playback.</td></tr>
+  <tr><td>fullscreenchange</td><td>Fired when the player switches in or out of fullscreen mode.</td></tr>
+</table>

docs/behaviors.markdown

@@ -1,53 +0,0 @@
-Behaviors
-=========
-Behaviors allow you to make an element on your page act as a video control or a display of video information. The easiest example of this is creating a play button. The following code will make a click on your element play the video.
-
-    myPlayer.activateElement(myElement, "playButton");
-
-mouseOverVideoReporter
-  The mouseOverVideoReporter behavior is mostly used internally to trigger showing the controls when a user's mouse is over the video. It's used on elements that are shown in front of the video, that might block a mouseover on the video itself from registering.
-
-controlBar
-  The controlBar behavior is what's added to the main control bar to make it show/hide depending on the user's mouse and the set preferences. It can also be added to other elements if the same effect is desired.
-
-playButton
-  The playButton behavior can be added to an element to make it play the video when clicked. (See also playToggle)
-
-pauseButton
-  The pauseButton behavior can be added to an element to make it pause the video when clicked.
-
-playToggle
-  The playToggle behavior can be added to an element to make it toggle between play and pause. When the video is playing it will pause the video, and vice versa. The play button in the default control bar works this way.
-  The icon in the play button changes to pause (two vertical bars) or play (triangle) depending on the state of the video. This is done through CSS classes. When the video is playing, a class of "vjs-playing" will be added to the playToggle element. When the video is paused, a class of "vjs-paused" will be added to the element. If you are using an image for the icon, set it as a background image of the element (or a sub element) and change the background image accordingly.
-
-    #my_play_toggle.vjs-playing { background-image: url("my-pause-icon.png") }
-    #my_play_toggle.vjs-paused { background-image: url("my-play-icon.png") }
-
-playProgressBar
-  With the playProgressBar behavior, you can make an element grow like a progress bar as the video plays. The width of the element is set as a percent, and uses the video's current time divided by the video's total duration. For this reason, you may also need a container element to get the desired effect. In this example the width of the playProgressBar will be based on the width of myPlayProgressHolder.
-    <div id="myPlayProgressHolder">
-      <div id="myPlayProgressBar"></div>
-    </div>
-
-loadProgressBar
-  The loadProgressBar behavior works similarly to the playProgressBar behavior, except that it's based on the amount of video data that's been downloaded to the users machine.
-
-currentTimeDisplay
-  The currentTimeDisplay behavior will make an element display the video's current playback time in the format of 00:00. It does so by changing the innerHTML of the element to the time.
-
-durationDisplay
-  The durationDisplay behavior will make an element display the video's duration in the format of 00:00. It does so by changing the innerHTML of the element to the duration.
-
-currentTimeScrubber
-  The currentTimeScrubber behavior allows you to make an element that controls the current time of the video by clicking and dragging on the element. The current time will be set based on where the user clicks or drags to, in relation to the width of the element.
-
-volumeDisplay
-...
-
-volumeScrubber
-  The volumeScrubber behavior allows you to make an element that controls the volume of the video by clicking and dragging on the element. The volume will be set based on where the user clicks or drags to, in relation to the width of the element.
-
-fullscreenToggle
-...
-
-(Note to self: Have a video that is fixed position beside the behavior docs, that all examples are tied to)

docs/components.md

@@ -0,0 +1,91 @@
+Components
+===
+The Video.js player is built on top of a simple, custom UI components architecture. The player class and all control classes inherit from the Component class, or a subclass of Component.
+
+```js
+videojs.Control = videojs.Component.extend({});
+videojs.Button = videojs.Control.extend({});
+videojs.PlayToggle = videojs.Button.extend({});
+```
+
+(The Class interface itself is provided using John Resig's [simple class inheritance](http://ejohn.org/blog/simple-javascript-inheritance/) also found in [JSNinja](http://jsninja.com).
+
+The UI component architecture makes it easier to add child components to a parent component and build up an entire user interface, like the controls for the Video.js player.
+
+```js
+// Adding a new control to the player
+myPlayer.addChild('BigPlayButton');
+```
+
+Every component has an associated DOM element, and when you add a child component, it inserts the element of that child into the element of the parent.
+
+```js
+myPlayer.addChild('BigPlayButton');
+```
+
+Results in:
+
+```html
+    <!-- Player Element -->
+    <div class="video-js">
+      <!-- BigPlayButton Element -->
+      <div class="vjs-big-play-button"></div>
+    </div>
+```
+
+The actual default component structure of the Video.js player looks something like this:
+
+```
+Player
+    PosterImage
+    TextTrackDisplay
+    LoadingSpinner
+    BigPlayButton
+    ControlBar
+        PlayToggle
+        FullscreenToggle
+        CurrentTimeDisplay
+        TimeDivider
+        DurationDisplay
+        RemainingTimeDisplay
+        ProgressControl
+            SeekBar
+              LoadProgressBar
+              PlayProgressBar
+              SeekHandle
+        VolumeControl
+            VolumeBar
+                VolumeLevel
+                VolumeHandle
+        MuteToggle
+```
+
+Component Methods
+-----------------
+
+### addChild() ###
+Add a child component to myComponent. This will also insert the child component's DOM element into myComponent's element.
+
+
+
+```js
+myComponent.addChild('');
+```
+
+
+myPlayer.addChild('BigPlayButton');
+myPlayer.removeChild('BigPlayButton');
+myPlayer.getChild('BiPlayButton');
+myPlayer.children();
+
+
+myPlayer.getChildById('biPlayButton');
+myPlayer.removeChildById('my-player-big-play-button');
+
+el();
+getContentEl();
+getChildren();
+
+getParent();
+
+#home_player_big-play-button

docs/glossary.markdown

@@ -1,9 +0,0 @@
-Glossary
-========
-
-### DOM (Document Object Model)
-The container of elements on the page that must be loaded before you can interact with the elements with through Javascript.
-http://en.wikipedia.org/wiki/Document_Object_Model
-
-### Flash Fallback
-The Flash video player (SWF) used to play a video when HTML5 isn't supported.

docs/glossary.md

@@ -0,0 +1,39 @@
+Glossary
+========
+Terms related to web video.
+
+### DOM (Document Object Model)
+The container of elements on the page that must be loaded before you can interact with the elements with through Javascript.
+http://en.wikipedia.org/wiki/Document_Object_Model
+
+
+### Flash Fallback
+The Flash video player (SWF) used to play a video when HTML5 isn't supported.
+
+
+### TimeRange
+
+
+### HTML5 Video
+HTML is the markup language that makes up every page on the web. The newest version, HTML5, includes specifications for a video tag, that is meant to allow website developers to add a video to a page the same way they would add an image. In order for this to work, web browser developers (Mozilla, Apple, Microsoft, Google, Opera, etc.) have to build the video playback functionality into their browsers. The W3C has created directions on how video should work in browsers, and it’s up to browser developers to follow those directions, so that video works the same across all browsers. This doesn’t always happen thanks to technology, legal, and financial choices made by browser developers, but so far no one’s varying too far from the specifications. However the specifications are still being changed and refined, so browsers developers have to keep up with that as well.
+
+Playing video in a web page may not seem so special since you can already view video on a web page through plugins like Flash Player, Quicktime, Silverlight, and RealPlayer, however this is a big step forward for standardizing video playback across web browsers and devices. The goal is that in the future, developers will only need to use one method for embedding a video, that’s based on open standards (not controlled by one company), and it will work everywhere.
+
+A prime example of this is the iPhone and iPad. Apple has decided not to support Flash on their mobile devices, but they do support HTML5 video. Since Flash is currently the most common way video is added to web pages, most web video (aside from YouTube who has a special relationship with Apple) can’t be viewed on the iPhone or iPad. These devices are very popular, so many web sites are switching to hybrid HTML5/Flash player setups (like VideoJS).
+
+
+### Video Tag
+There are a number of great resources that will give you an introduction to the video tag an how it is used including:
+
+  - [Dive into HTML5](http://diveintohtml5.org/video.html)
+  - Lynda.com's ['HTML5 Video and Audio in Depth'](http://www.lynda.com/HTML-5-tutorials/HTML5-Video-and-Audio-in-Depth/80781-2.html) video tutorials created by yours truly.
+
+An if you really want to dig in, you can read the (W3C Spec)[http://www.w3.org/TR/html5/video.html]. (Warning - not for the faint of heart)
+
+
+### Skin
+"Skin" refers to the design of the player's controls, also sometimes called the chrome. With VideoJS, new skins can be built simply by creating a new stylesheet.
+
+
+### Content Delivery Network (CDN)
+A network of servers around the world that host copies of a file. When your browser requests one of these files, the CDN automatically determines which server is closest to your location and delivers the file from there. This drastically increases delivery time, especially internationally.

docs/index.md

@@ -0,0 +1,27 @@
+[Video.js homepage](http://videojs.com)
+
+<h1>Video.js Documentation</h1>
+
+The Video.js documentation is here to help you setup and use the player. These docs can be found and contributed to in the [Video.js library repository](https://github.com/videojs/video.js/tree/master/docs).
+
+## Getting Started
+
+* [Setup](setup.md) - Check out the [5 second setup](http://videojs.com/#section5) if you're just getting started. The setup documentation gives a deeper view of the additional methods you can use to trigger the player setup.
+
+* [Options](options.md) - There are a number of options that can be used to change how the player behaves, starting with the HTML5 media options like autoplay and preload, and expanding to Video.JS specific options.
+
+* [Tracks](tracks.md) - Text Tracks are used to display subtitles and captions, and add a menu for navigating between chapters in a video.
+
+## Customizing
+
+* [API](api.md) - The Video.js API allows you to control the video through javascript or trigger event listeners, whether the video is playing through HTML5, flash, or another playback technology.
+
+* [Skins](skins.md) - You can change the look of the player across playback technologies just by editing a CSS file. The skins documentation gives you a intro to how the HTML and CSS of the default skin is put together.
+
+* [Tech](tech.md) - A 'playback technology' is the term we're using to represent HTML5 video, Flash, and other video plugins, as well as other players like the YouTube player. Basically anything that has a unique API to audio or video. Additional playback technologies can be added relatively easily.
+
+* [Plugins](plugins.md) - You can package up interesting Video.js customizations and reuse them elsewhere. Find out how to build your own plugin or use one created by someone else.
+
+## Resources
+
+* [Glossary](glossary.md) - Some helpful definitions.

docs/options.md

@@ -0,0 +1,114 @@
+Options
+=======
+
+Setting Options
+---------------
+
+The Video.js embed code is simply an HTML5 video tag, so for many of the options you can use the standard tag attributes to set the options.
+
+```html
+<video controls autoplay preload="auto" ...>
+```
+
+Alternatively, you can use the data-setup attribute to provide options in the [JSON](http://json.org/example.html) format. This is also how you would set options that aren't standard to the video tag.
+
+```html
+<video data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'...>
+```
+
+Finally, if you're not using the data-setup attribute to trigger the player setup, you can pass in an object with the player options as the second argument in the javascript setup function.
+
+```js
+videojs("example_video_1", { "controls": true, "autoplay": false, "preload": "auto" });
+```
+
+
+Individual Options
+------------------
+
+> ### Note on Video Tag Attributes ###
+> With HTML5 video tag attributes that can only be true or false (boolean), you simply include the attribute (no equals sign) to turn it on, or exclude it to turn it off. For example, to turn controls on:
+
+WRONG
+```html
+<video controls="true" ...>
+```
+
+RIGHT
+```html
+<video controls ...>
+```
+
+> The biggest issue people run into is trying to set these values to false using false as the value (e.g. controls="false") which actually does the opposite and sets the value to true because the attribute is still included. If you need the attribute to include an equals sign for XHTML validation, you can set the attribute's value to the same as its name (e.g. controls="controls").
+
+
+### controls ###
+The controls option sets whether or not the player has controls that the user can interact with. Without controls the only way to start the video playing is with the autoplay attribute or through the API.
+
+```html
+<video controls ...>
+or
+{ "controls": true }
+```
+
+
+### autoplay ###
+If autoplay is true, the video will start playing as soon as page is loaded (without any interaction from the user).
+NOT SUPPORTED BY APPLE iOS DEVICES. Apple blocks the autoplay functionality in an effort to protect it's customers from unwillingly using a lot of their (often expensive) monthly data plans. A user touch/click is required to start the video in this case.
+```html
+<video autoplay ...>
+or
+{ "autoplay": true }
+```
+
+
+### preload ###
+The preload attribute informs the browser whether or not the video data should begin downloading as soon as the video tag is loaded. The options are auto, metadata, and none.
+
+'auto': Start loading the video immediately (if the browser agrees). Some mobile devices like iPhones and iPads will not preload the video in order to protect their users' bandwidth. This is why the value is called 'auto' and not something more final like 'true'.
+
+'metadata': Load only the meta data of the video, which includes information like the duration and dimensions of the video.
+
+'none': Don't preload any of the video data. This will wait until the user clicks play to begin downloading.
+
+```html
+<video preload ...>
+or
+{ "preload": "auto" }
+```
+
+
+### poster ###
+The poster attribute sets the image that displays before the video begins playing. This is often a frame of the video or a custom title screen. As soon as the user clicks play the image will go away.
+```html
+<video poster="myPoster.jpg" ...>
+or
+{ "poster": "myPoster.jpg" }
+```
+
+
+### loop ###
+The loop attribute causes the video to start over as soon as it ends. This could be used for a visual affect like clouds in the background.
+```html
+<video loop ...>
+or
+{ "loop": "true" }
+```
+
+
+### width ###
+The width attribute sets the display width of the video.
+```html
+<video width="640" ...>
+or
+{ "width": 640 }
+```
+
+
+### height ###
+The height attribute sets the display height of the video.
+```html
+<video height="480" ...>
+or
+{ "height": 480 }
+```

docs/plugins.md

@@ -0,0 +1,41 @@
+Plugins
+=======
+If you've built something cool with Video.js, you can easily share it with the rest of the world by creating a plugin.
+
+Step 1: Write Some Javascript
+-----------------------------
+You may have already done this step. Code up something interesting and then wrap it in a function. At the most basic level, that's all a video.js plugin is. By convention, plugins take a hash of options as their first argument:
+
+    function examplePlugin(options) {
+      this.on('play', function(e) {
+        console.log('playback has started!');
+      });
+    };
+
+When it's activated, `this` will be the Video.js player your plugin is attached to. You can use anything you'd like in the [Video.js API](api.md) when you're writing a plugin: change the `src`, mess up the DOM, or listen for and emit your own events.
+
+Step 2: Registering A Plugin
+-------------------------------
+It's time to give the rest of the world the opportunity to be awed by your genius. When your plugin is loaded, it needs to let Video.js know this amazing new functionality is now available:
+
+    vjs.plugin('examplePlugin', examplePlugin);
+
+From this point on, your plugin will be added to the Video.js prototype and will show up as a property on every instance created. Make sure you choose a unique name that doesn't clash with any of the properties already in Video.js. Which leads us to...
+
+Step 3: Using A Plugin
+----------------------
+There are two ways to initialize a plugin. If you're creating your video tag dynamically, you can specify the plugins you'd like to initialize with it and any options you want to pass to them:
+
+    vjs('vidId', {
+      plugins: {
+        examplePlugin: {
+          exampleOption: true
+        }
+      }
+    });
+
+If you've already initialized your video tag, you can activate a plugin at any time by calling its setup function directly:
+
+    video.examplePlugin({ exampleOption: true });
+
+That's it. Head on over to the Video.js wiki and add your plugin to the list so everyone else can check it out.

docs/setup.md

@@ -0,0 +1,70 @@
+Setup
+=====
+
+Video.js is pretty easy to set up. It can take a matter of seconds to get the player up and working on your web page.
+
+Step 1: Include the Video.js Javascript and CSS files in the head of your page.
+------------------------------------------------------------------------------
+
+You can download the Video.js source and host it on your own servers, or use the free CDN hosted version. It's often recommended now to put JavaScript before the end body tag (</body>) instead of the head (<head>), but Video.js includes an 'HTML5 Shiv', which needs to be in the head for older IE versions to respect the video tag as a valid element.
+
+> NOTE: If you're already using an HTML5 shiv like [Modernizr](http://modernizr.com/) you can include the Video.js JavaScript anywhere, however make sure your version of Modernizr includes the shiv for video.
+
+### CDN Version ###
+```html
+<link href="http://vjs.zencdn.net/4.1/video-js.css" rel="stylesheet">
+<script src="http://vjs.zencdn.net/4.1/video.js"></script>
+```
+
+### Self Hosted. ###
+With the self hosted option you'll also want to update the location of the video-js.swf file.
+```html
+<link href="http://example.com/path/to/video-js.css" rel="stylesheet">
+<script src="http://example.com/path/to/video.js"></script>
+<script>
+  videojs.options.flash.swf = "http://example.com/path/to/video-js.swf"
+</script>
+```
+
+
+Step 2: Add an HTML5 video tag to your page.
+--------------------------------------------
+With Video.js you just use an HTML5 video tag to embed a video. Video.js will then read the tag and make it work in all browsers, not just ones that support HTML5 video. Beyond the basic markup, Video.js needs a few extra pieces.
+
+  1. The 'data-setup' Atrribute tells Video.js to automatically set up the video when the page is ready, and read any options (in JSON format) from the attribute (see [options](options.md)). There are other methods for initializing the player, but this is the easiest.
+
+  2. The 'id' Attribute: Should be used and unique for every video on the same page.
+
+  3. The 'class' attribute contains two classes:
+    - `video-js` applies styles that are required for Video.js functionality, like fullscreen and subtitles.
+    - `vjs-default-skin` applies the default skin to the HTML controls, and can be removed or overridden to create your own controls design.
+
+Otherwise include/exclude attributes, settings, sources, and tracks exactly as you would for HTML5 video.
+
+```html
+<video id="example_video_1" class="video-js vjs-default-skin"
+  controls preload="auto" width="640" height="264"
+  poster="http://video-js.zencoder.com/oceans-clip.png"
+  data-setup='{"example_option":true}'>
+ <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
+ <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
+ <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
+</video>
+```
+
+
+Alternative Setup for Dynamically Loaded HTML
+---------------------------------------------
+If your web page or application loads the video tag dynamically (ajax, appendChild, etc.), so that it may not exist when the page loads, you'll want to manually set up the player instead of relying on the data-setup attribute. To do this, first remove the data-setup attribute from the tag so there's no confusion around when the player is initialized. Next, run the following javascript some time after the Video.js javascript library has loaded, and after the video tag has been loaded into the DOM.
+```js
+videojs("example_video_1", {}, function(){
+  // Player (this) is initialized and ready.
+});
+```
+
+The first argument in the `videojs` function is the ID of your video tag. Replace it with your own.
+
+The second argument is an options object. It allows you to set additional options like you can with the data-setup attribute.
+
+The third argument is a 'ready' callback. Once Video.js has initialized it will call this function.
+

docs/skins.md

@@ -0,0 +1,23 @@
+Skins
+=====
+
+The default Video.js skin is made using HTML and CSS, so there's no need to learn a complicated skinning language to update colors or even create an entirely new skin.
+
+New in version 4.0 is the use of font icons. All of the icons (play, pause, etc.) use the new custom font, which allows the icons to be scaled and colored just like any other text font.
+
+The easiest way to try this out is by using the [player skin designer](http://designer.videojs.com/).
+
+When you create a new skin, you can either override styles in the default skin:
+
+```css
+.vjs-default-skin .vjs-play-progress { background: #900; }
+```
+
+Or remove the 'vjs-default-skin' class from the video tag and create a new skin from scratch.
+
+```html
+<video class="video-js my-custom-skin" ...>
+```
+
+More custom skins will be available for download soon. If you have one you like you can share it by forking [this example on CodePen.io](http://codepen.io/heff/pen/EarCt), and adding a link on the [Skins wiki page](https://github.com/videojs/video.js/wiki/Skins).
+

docs/tech.md

@@ -0,0 +1,100 @@
+Playback Technology ("Tech")
+============================
+Playback Technology refers to the specific browser or plugin technology used to play the video or audio. When using HTML5, the playback technology is the video or audio element. When using Flash, the playback technology is the specific Flash player used, e.g. Flowplayer, YouTube Player, video-js.swf, etc. (not just "Flash"). This could also include Silverlight, Quicktime, or any other plugin that will play back video in the browser, as long as there is an API wrapper written for it.
+
+Essentially we're using HTML5 and plugins only as video decoders, and using HTML and JavaScript to create a consistent API and skinning experience across all of them.
+
+Building an API Wrapper
+-----------------------
+We'll write a more complete guide on writing a wrapper soon, but for now the best resource is the [Video.js](https://github.com/zencoder/video-js/tree/master/src) source where you can see how both the HTML5 and video-js.swf API wrappers were created.
+
+Required Methods
+----------------
+canPlayType
+play
+pause
+currentTime
+volume
+duration
+buffered
+supportsFullScreen
+
+Required Events
+---------------
+loadstart
+play
+pause
+playing
+ended
+volumechange
+durationchange
+error
+
+Optional Events (include if supported)
+--------------------------------------
+timeupdate
+progress
+enterFullScreen
+exitFullScreen
+
+Adding Playback Technology
+==================
+When adding additional Tech to a video player, make sure to add the supported tech to the video object.
+
+### Tag Method: ###
+    <video data-setup='{"techOrder": ["html5", "flash", "other supported tech"]}'
+
+### Object Method: ###
+    videojs("videoID", {
+      techOrder: ["html5", "flash", "other supported tech"]
+    });
+
+Flash Technology
+==================
+The Flash playback tech is a part of the default `techOrder`. You may notice undesirable playback behavior in browsers that are subject to using this playback tech, in particular when scrubbing and seeking within a video. This behavior is a result of Flash's progressive video playback.
+
+Enabling Streaming Playback
+--------------------------------
+In order to force the Flash tech to choose streaming playback, you need to provide a valid streaming source **before other valid Flash video sources**. This is necessary because of the source selection algorithm, where playback tech chooses the first possible source object with a valid type. Valid streaming `type` values include `rtmp/mp4` and `rtmp/flv`. The streaming `src` value requires valid connection and stream strings, separated by an `&`. An example of supplying a streaming source through your HTML markup might look like:
+
+    <source src="rtmp://your.streaming.provider.net/cfx/st/&mp4:path/to/video.mp4" type="rtmp/mp4">
+    <source src="http://your.static.provider.net/path/to/video.mp4" type="video/mp4">
+    <source src="http://your.static.provider.net/path/to/video.webm" type="video/webm">
+
+You may optionally use the last `/` as the separator between connection and stream strings, for example:
+
+    <source src="rtmp://your.streaming.provider.net/cfx/st/mp4:video.mp4" type="rtmp/mp4">
+
+All four RTMP protocols are valid in the `src` (RTMP, RTMPT, RTMPE, and RTMPS).
+
+Youtube Technology
+==================
+To add a youtube source to your video tag, use the following source:
+
+    <source src="http://www.youtube.com/watch?v=[ytVideoId]" type="video/youtube"
+
+Important Note:
+------------------
+> You can simply copy and paste the url of the youtube page from the browser and
+> the Youtube Tech will be able to find the video id by itself. This is just the
+> minimum needed to get the video working. (Useful for data storage)
+
+
+Youtube Technology - Extra Options
+----------------------------------
+
+In Addition to the natively supported options, the Youtube API supports the following
+added options:
+
+### ytcontrols ###
+Type: Boolean (T/F)
+Default: False
+
+Determines whether to show Youtube's basic Red/Black default play bar skin or to hide
+it and use the native video-js play bar.
+
+### hd ###
+Type: Boolean (T/F)
+Default: False
+
+Determines whether or not to play back the video in HD.

docs/tracks.md

@@ -0,0 +1,225 @@
+Tracks
+======
+
+Text Tracks are a function of HTML5 video for providing time triggered text to the viewer. Video.js makes tracks work across all browsers. There are currently five types of tracks:
+
+- **Subtitles**: Translations of the dialogue in the video for when audio is available but not understood. Subtitles are shown over the video.
+- **Captions**: Transcription of the dialogue, sound effects, musical cues, and other audio information for when the viewer is deaf/hard of hearing, or the video is muted. Captions are also shown over the video.
+- **Chapters**: Chapter titles that are used to create navigation within the video. Typically they're in the form of a list of chapters that the viewer can click on to go to a specific chapter.
+- **Descriptions** (not supported yet): Text descriptions of what's happening in the video for when the video portion isn't available, because the viewer is blind, not using a screen, or driving and about to crash because they're trying to enjoy a video while driving. Descriptions are read by a screen reader or turned into a separate audio track.
+- **Metadata** (not supported yet): Tracks that have data meant for javascript to parse and do something with. These aren't shown to the user.
+
+Creating the Text File
+----------------------
+Timed text requires a text file in [WebVTT](http://dev.w3.org/html5/webvtt/) format. This format defines a list of "cues" that have a start time, and end time, and text to display. [Microsoft has a builder](http://ie.microsoft.com/testdrive/Graphics/CaptionMaker/) that can help you get started on the file.
+
+When creating captions, there's also additional [caption formatting techniques](http://www.theneitherworld.com/mcpoodle/SCC_TOOLS/DOCS/SCC_FORMAT.HTML#style) that would be good to use, like brackets around sound effects. [ sound effect ]
+
+Adding to Video.js
+------------------
+Once you have your WebVTT file created, you can add it to Video.js using the track trag. Put your track track tag after all the source elements, and before any fallback content.
+
+```html
+<video id="example_video_1" class="video-js vjs-default-skin"  
+  controls preload="auto" width="640" height="264"  
+  data-setup='{"example_option":true}'>  
+ <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />  
+ <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />  
+ <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />  
+
+ <track kind="captions" src="http://example.com/path/to/captions.vtt" srclang="en" label="English" default>
+
+</video>
+```
+
+Track Attributes
+----------------
+Additional settings for track tags.
+
+### kind
+One of the five track types listed above. Kind defaults to subtitles if no kind is included.
+
+### label
+The label for the track that will be show to the user, for example in a menu that list the different languages available for subtitles.
+
+### default
+The default attribute can be used to have a track default to showing. Otherwise the viewer would need to select their language from the captions or subtitles menu.
+NOTE: For chapters, default is required if you want the chapters menu to show.
+
+### srclang
+The two-letter code (valid BCP 47 language tag) for the language of the text track, for example "en" for English. Here's a list of available language codes.
+
+<table border="0" cellspacing="5" cellpadding="5">
+  <tr>
+    <td>
+
+      <table>
+        <tr><th>ab<th><td>Abkhazian</td></tr>
+        <tr><th>aa<th><td>Afar</td></tr>
+        <tr><th>af<th><td>Afrikaans</td></tr>
+        <tr><th>sq<th><td>Albanian</td></tr>
+        <tr><th>am<th><td>Amharic</td></tr>
+        <tr><th>ar<th><td>Arabic</td></tr>
+        <tr><th>an<th><td>Aragonese</td></tr>
+        <tr><th>hy<th><td>Armenian</td></tr>
+        <tr><th>as<th><td>Assamese</td></tr>
+        <tr><th>ay<th><td>Aymara</td></tr>
+        <tr><th>az<th><td>Azerbaijani</td></tr>
+        <tr><th>ba<th><td>Bashkir</td></tr>
+        <tr><th>eu<th><td>Basque</td></tr>
+        <tr><th>bn<th><td>Bengali (Bangla)</td></tr>
+        <tr><th>dz<th><td>Bhutani</td></tr>
+        <tr><th>bh<th><td>Bihari</td></tr>
+        <tr><th>bi<th><td>Bislama</td></tr>
+        <tr><th>br<th><td>Breton</td></tr>
+        <tr><th>bg<th><td>Bulgarian</td></tr>
+        <tr><th>my<th><td>Burmese</td></tr>
+        <tr><th>be<th><td>Byelorussian (Belarusian)</td></tr>
+        <tr><th>km<th><td>Cambodian</td></tr>
+        <tr><th>ca<th><td>Catalan</td></tr>
+        <tr><th>zh<th><td>Chinese (Simplified)</td></tr>
+        <tr><th>zh<th><td>Chinese (Traditional)</td></tr>
+        <tr><th>co<th><td>Corsican</td></tr>
+        <tr><th>hr<th><td>Croatian</td></tr>
+        <tr><th>cs<th><td>Czech</td></tr>
+        <tr><th>da<th><td>Danish</td></tr>
+        <tr><th>nl<th><td>Dutch</td></tr>
+        <tr><th>en<th><td>English</td></tr>
+        <tr><th>eo<th><td>Esperanto</td></tr>
+        <tr><th>et<th><td>Estonian</td></tr>
+        <tr><th>fo<th><td>Faeroese</td></tr>
+        <tr><th>fa<th><td>Farsi</td></tr>
+        <tr><th>fj<th><td>Fiji</td></tr>
+        <tr><th>fi<th><td>Finnish</td></tr>
+      </table>
+      
+    </td>
+    <td>
+      
+      <table>
+        <tr><th>fr<th><td>French</td></tr>
+        <tr><th>fy<th><td>Frisian</td></tr>
+        <tr><th>gl<th><td>Galician</td></tr>
+        <tr><th>gd<th><td>Gaelic (Scottish)</td></tr>
+        <tr><th>gv<th><td>Gaelic (Manx)</td></tr>
+        <tr><th>ka<th><td>Georgian</td></tr>
+        <tr><th>de<th><td>German</td></tr>
+        <tr><th>el<th><td>Greek</td></tr>
+        <tr><th>kl<th><td>Greenlandic</td></tr>
+        <tr><th>gn<th><td>Guarani</td></tr>
+        <tr><th>gu<th><td>Gujarati</td></tr>
+        <tr><th>ht<th><td>Haitian Creole</td></tr>
+        <tr><th>ha<th><td>Hausa</td></tr>
+        <tr><th>he<th><td>Hebrew</td></tr>
+        <tr><th>hi<th><td>Hindi</td></tr>
+        <tr><th>hu<th><td>Hungarian</td></tr>
+        <tr><th>is<th><td>Icelandic</td></tr>
+        <tr><th>io<th><td>Ido</td></tr>
+        <tr><th>id<th><td>Indonesian</td></tr>
+        <tr><th>ia<th><td>Interlingua</td></tr>
+        <tr><th>ie<th><td>Interlingue</td></tr>
+        <tr><th>iu<th><td>Inuktitut</td></tr>
+        <tr><th>ik<th><td>Inupiak</td></tr>
+        <tr><th>ga<th><td>Irish</td></tr>
+        <tr><th>it<th><td>Italian</td></tr>
+        <tr><th>ja<th><td>Japanese</td></tr>
+        <tr><th>jv<th><td>Javanese</td></tr>
+        <tr><th>kn<th><td>Kannada</td></tr>
+        <tr><th>ks<th><td>Kashmiri</td></tr>
+        <tr><th>kk<th><td>Kazakh</td></tr>
+        <tr><th>rw<th><td>Kinyarwanda (Ruanda)</td></tr>
+        <tr><th>ky<th><td>Kirghiz</td></tr>
+        <tr><th>rn<th><td>Kirundi (Rundi)</td></tr>
+        <tr><th>ko<th><td>Korean</td></tr>
+        <tr><th>ku<th><td>Kurdish</td></tr>
+        <tr><th>lo<th><td>Laothian</td></tr>
+        <tr><th>la<th><td>Latin</td></tr>
+      </table>
+      
+    </td>
+    <td>
+      
+      <table>
+        <tr><th>lv<th><td>Latvian (Lettish)</td></tr>
+        <tr><th>li<th><td>Limburgish ( Limburger)</td></tr>
+        <tr><th>ln<th><td>Lingala</td></tr>
+        <tr><th>lt<th><td>Lithuanian</td></tr>
+        <tr><th>mk<th><td>Macedonian</td></tr>
+        <tr><th>mg<th><td>Malagasy</td></tr>
+        <tr><th>ms<th><td>Malay</td></tr>
+        <tr><th>ml<th><td>Malayalam</td></tr>
+        <tr><th>mt<th><td>Maltese</td></tr>
+        <tr><th>mi<th><td>Maori</td></tr>
+        <tr><th>mr<th><td>Marathi</td></tr>
+        <tr><th>mo<th><td>Moldavian</td></tr>
+        <tr><th>mn<th><td>Mongolian</td></tr>
+        <tr><th>na<th><td>Nauru</td></tr>
+        <tr><th>ne<th><td>Nepali</td></tr>
+        <tr><th>no<th><td>Norwegian</td></tr>
+        <tr><th>oc<th><td>Occitan</td></tr>
+        <tr><th>or<th><td>Oriya</td></tr>
+        <tr><th>om<th><td>Oromo (Afan, Galla)</td></tr>
+        <tr><th>ps<th><td>Pashto (Pushto)</td></tr>
+        <tr><th>pl<th><td>Polish</td></tr>
+        <tr><th>pt<th><td>Portuguese</td></tr>
+        <tr><th>pa<th><td>Punjabi</td></tr>
+        <tr><th>qu<th><td>Quechua</td></tr>
+        <tr><th>rm<th><td>Rhaeto-Romance</td></tr>
+        <tr><th>ro<th><td>Romanian</td></tr>
+        <tr><th>ru<th><td>Russian</td></tr>
+        <tr><th>sm<th><td>Samoan</td></tr>
+        <tr><th>sg<th><td>Sangro</td></tr>
+        <tr><th>sa<th><td>Sanskrit</td></tr>
+        <tr><th>sr<th><td>Serbian</td></tr>
+        <tr><th>sh<th><td>Serbo-Croatian</td></tr>
+        <tr><th>st<th><td>Sesotho</td></tr>
+        <tr><th>tn<th><td>Setswana</td></tr>
+        <tr><th>sn<th><td>Shona</td></tr>
+        <tr><th>ii<th><td>Sichuan Yi</td></tr>
+        <tr><th>sd<th><td>Sindhi</td></tr>
+      </table>
+      
+    </td>
+    <td>
+      
+      <table>
+        <tr><th>si<th><td>Sinhalese</td></tr>
+        <tr><th>ss<th><td>Siswati</td></tr>
+        <tr><th>sk<th><td>Slovak</td></tr>
+        <tr><th>sl<th><td>Slovenian</td></tr>
+        <tr><th>so<th><td>Somali</td></tr>
+        <tr><th>es<th><td>Spanish</td></tr>
+        <tr><th>su<th><td>Sundanese</td></tr>
+        <tr><th>sw<th><td>Swahili (Kiswahili)</td></tr>
+        <tr><th>sv<th><td>Swedish</td></tr>
+        <tr><th>tl<th><td>Tagalog</td></tr>
+        <tr><th>tg<th><td>Tajik</td></tr>
+        <tr><th>ta<th><td>Tamil</td></tr>
+        <tr><th>tt<th><td>Tatar</td></tr>
+        <tr><th>te<th><td>Telugu</td></tr>
+        <tr><th>th<th><td>Thai</td></tr>
+        <tr><th>bo<th><td>Tibetan</td></tr>
+        <tr><th>ti<th><td>Tigrinya</td></tr>
+        <tr><th>to<th><td>Tonga</td></tr>
+        <tr><th>ts<th><td>Tsonga</td></tr>
+        <tr><th>tr<th><td>Turkish</td></tr>
+        <tr><th>tk<th><td>Turkmen</td></tr>
+        <tr><th>tw<th><td>Twi</td></tr>
+        <tr><th>ug<th><td>Uighur</td></tr>
+        <tr><th>uk<th><td>Ukrainian</td></tr>
+        <tr><th>ur<th><td>Urdu</td></tr>
+        <tr><th>uz<th><td>Uzbek</td></tr>
+        <tr><th>vi<th><td>Vietnamese</td></tr>
+        <tr><th>vo<th><td>Volapük</td></tr>
+        <tr><th>wa<th><td>Wallon</td></tr>
+        <tr><th>cy<th><td>Welsh</td></tr>
+        <tr><th>wo<th><td>Wolof</td></tr>
+        <tr><th>xh<th><td>Xhosa</td></tr>
+        <tr><th>yi<th><td>Yiddish</td></tr>
+        <tr><th>yo<th><td>Yoruba</td></tr>
+        <tr><th>zu<th><td>Zulu</td></tr>
+      </table>
+      
+    </td>
+  </tr>
+</table>

package.json

@@ -0,0 +1,55 @@
+{
+  "name": "video.js",
+  "description": "An HTML5 and Flash video player with a common API and skin for both.",
+  "version": "4.2.0",
+  "copyright": "Copyright 2013 Brightcove, Inc. https://github.com/videojs/video.js/blob/master/LICENSE",
+  "keywords": [
+    "html5",
+    "flash",
+    "video",
+    "player"
+  ],
+  "homepage": "http://videojs.com",
+  "author": "Steve Heffernan",
+  "scripts": {
+    "test": "grunt test --verbose"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/zencoder/video-js.git"
+  },
+  "devDependencies": {
+    "grunt-cli": "~0.1.0",
+    "grunt": "~0.4.0",
+    "grunt-contrib-jshint": "~0.4.3",
+    "grunt-contrib-watch": "~0.1.4",
+    "grunt-contrib-qunit": "~0.2.1",
+    "calcdeps": "~0.1.7",
+    "grunt-contrib-clean": "~0.4.0a",
+    "grunt-contrib-copy": "~0.3.2",
+    "mocha": "~1.8.1",
+    "contribflow": "~0.2.0",
+    "grunt-s3": "~0.2.0-alpha",
+    "semver": "~1.1.4",
+    "grunt-contrib-cssmin": "~0.6.0",
+    "uglify-js": "~2.3.6",
+    "grunt-contrib-less": "~0.6.4"
+  },
+  "testling": {
+    "browsers": [
+      "ie6",
+      "ie7",
+      "ie8",
+      "ie9",
+      "firefox/15",
+      "chrome/22",
+      "opera/12",
+      "safari/5.1"
+    ],
+    "harness": "mocha-qunit",
+    "scripts": [
+      "src/js/*.js",
+      "test/unit/*.js"
+    ]
+  }
+}

sandbox/index.html.example

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>Video.js Sandbox</title>
+
+  <link href="../build/files/video-js.css" rel="stylesheet" type="text/css">
+
+  <!-- LOAD VIDEO.JS SOURCE FILES IN ORDER -->
+  <script src="../build/source-loader.js"></script>
+
+  <!-- Set the location of the flash SWF -->
+  <script>
+    vjs.options.flash.swf = '../src/swf/video-js.swf'
+  </script>
+
+</head>
+<body>
+  <p style="background-color:#eee; border: 1px solid #777; padding: 10px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;">You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example, so please don't edit or add those files. To get started make a copy of index.html.example and rename it to index.html.</p>
+
+  <video id="vid1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264"
+      poster="http://video-js.zencoder.com/oceans-clip.png"
+      data-setup='{}'>
+    <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'>
+    <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
+    <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg'>
+    <track kind="captions" src="../build/demo-files/demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
+    <p>Video Playback Not Supported</p>
+  </video>
+
+  <script>
+    vid = document.getElementById("vid1");
+  </script>
+
+</body>
+</html>

sandbox/plugin.html.example

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>Video.js Plugin Example</title>
+
+  <link href="../build/files/video-js.css" rel="stylesheet" type="text/css">
+
+  <!-- LOAD VIDEO.JS SOURCE FILES IN ORDER -->
+  <script src="../build/source-loader.js"></script>
+
+</head>
+<body>
+  <p style="background-color:#eee; border: 1px solid #777; padding: 10px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;">This page shows you how to create, register and initialize a Video.js plugin.</p>
+
+  <video id="vid1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png">
+    <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'>
+    <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
+    <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg'>
+    <p>Video Playback Not Supported</p>
+  </video>
+
+  <script>
+    (function() {
+      var vid1, progressed;
+
+      // create a really simple plugin
+      // this one just logs the buffered percentage to the console whenever
+      // more data is downloaded
+      progressed = function(options) {
+        this.on('progress', function(e) {
+          console.log(this.bufferedPercent());
+        });
+      };
+
+      // register the plugin
+      vjs.plugin('progressed', progressed);
+
+      // initialize it
+      vid1 = vjs('vid1');
+      vid1.progressed();
+    })();
+  </script>
+
+</body>
+</html>

skins/hu.css

@@ -1,116 +0,0 @@
-/*
-VideoJS HuCSS Skin (http://videojs.com)
-Version 2.0.0
-*/
-
-.hu-css .vjs-controls {
-  height: 47px; opacity: 0.95; color: #fff;
-  background: #3A3835;
-}
-.hu-css.video-js-box.vjs-controls-below .vjs-controls { background: #3A3835; }
-
-.hu-css .vjs-controls > div {
-  top: 0;
-  background: none;
-  -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
-  -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
-}
-
-/* Top Level Items */
-.hu-css .vjs-controls > div.vjs-play-control,
-.hu-css .vjs-controls > div.vjs-volume-control,
-.hu-css .vjs-controls > div.vjs-fullscreen-control {
-  bottom: 20px; height: 27px;
-}
-/* Bottom Level Items */
-.hu-css .vjs-controls > div.vjs-progress-control, .hu-css .vjs-controls > div.vjs-time-control {
-  margin-top: 28px; height: 19px;
-}
-
-/* Placement of Control Items */
-.hu-css .vjs-controls > div.vjs-play-control       { width: 33px; left: 0px; }
-.hu-css .vjs-controls > div.vjs-progress-control   { width: left: 84px; right: 0; }
-.hu-css .vjs-controls > div.vjs-time-control       { width: 84px; left: 0px; }
-.hu-css .vjs-controls > div.vjs-volume-control     { width: 43px; right: 44px; }
-.hu-css .vjs-controls > div.vjs-fullscreen-control { width: 43px; right: 0px; }
-
-/* Play/Pause
--------------------------------------------------------------------------------- */
-.hu-css.vjs-paused .vjs-play-control span { margin: 9px 0 0 12px; }
-.hu-css.vjs-playing .vjs-play-control span { margin: 9px 0 0 12px; }
-.hu-css .vjs-play-control:hover { background-color: #000; }
-
-/* Progress
--------------------------------------------------------------------------------- */
-.hu-css .vjs-progress-holder { /* Box containing play and load progresses */
-  height: 19px; border: none;
-  margin: 0px 0px 0 0px; /* Placement within the progress control item */
-  background: #000;
-  -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
-}
-.hu-css .vjs-progress-holder div { height: 13px; margin-top: 3px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }
-.hu-css .vjs-play-progress {
-  /* Default */ background: #777;
-  /* Webkit  */ background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#777));
-  /* Firefox */ background: -moz-linear-gradient(top,  #999,  #777);
-}
-.hu-css .vjs-load-progress { background: #555; }
-
-/* Time Display
--------------------------------------------------------------------------------- */
-.hu-css .vjs-controls .vjs-time-control { font-size: 11px; background: #000; }
-.hu-css .vjs-controls .vjs-time-control span { line-height: 19px; /* Centering vertically */ }
-
-/* Volume
--------------------------------------------------------------------------------- */
-/*.hu-css .vjs-volume-control:hover { background-color: #000; }*/
-.hu-css .vjs-volume-control div { margin: 0 5px 0 5px; padding: 9px 0 0 0; }
-.hu-css .vjs-volume-control div span { /* Individual volume bars */
-  margin: 0 2px 0 0; /* Space between */
-  width: 3px; height: 0px; /* Total height is height + bottom border */
-  border-bottom: 12px solid #555; /* Default (off) color and height of visible portion */
-}
-.hu-css .vjs-volume-control div span.vjs-volume-level-on { border-color: #fff; /* Volume on bar color */ }
-/* Creating differnt bar heights through height (transparent) and bottom border (visible). */
-.hu-css .vjs-volume-control div span:nth-child(1) { border-bottom-width: 2px; height: 10px; }
-.hu-css .vjs-volume-control div span:nth-child(2) { border-bottom-width: 4px; height: 8px; }
-.hu-css .vjs-volume-control div span:nth-child(3) { border-bottom-width: 6px; height: 6px; }
-.hu-css .vjs-volume-control div span:nth-child(4) { border-bottom-width: 8px; height: 4px; }
-.hu-css .vjs-volume-control div span:nth-child(5) { border-bottom-width: 10px; height: 2px; }
-
-/* Fullscreen
--------------------------------------------------------------------------------- */
-.hu-css .vjs-fullscreen-control:hover { background-color: #000; }
-.hu-css .vjs-fullscreen-control div { margin: 8px 0 0 0px; padding-left: 13px; height: 13px; border-left: 1px solid #555; }
-.hu-css .vjs-fullscreen-control div span:nth-child(1) { margin-right: 9px; margin-bottom: 5px; border-top: 4px solid #fff; border-right: 4px solid rgba(0,0,0,0); }
-.hu-css .vjs-fullscreen-control div span:nth-child(2) { border-top: 4px solid #fff; border-left: 4px solid rgba(0,0,0,0); }
-.hu-css .vjs-fullscreen-control div span:nth-child(3) { clear: both; margin: 0 9px 0 0; border-bottom: 4px solid #fff; border-right: 4px solid rgba(0,0,0,0); }
-.hu-css .vjs-fullscreen-control div span:nth-child(4) { border-bottom: 4px solid #fff; border-left: 4px solid rgba(0,0,0,0); }
-/* Icon when video is in fullscreen mode */
-.hu-css.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(1) { border: none; border-bottom: 4px solid #fff; border-left: 4px solid rgba(0,0,0,0); }
-.hu-css.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(2) { border: none; border-bottom: 4px solid #fff; border-right: 4px solid rgba(0,0,0,0); }
-.hu-css.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(3) { border: none; border-top: 4px solid #fff; border-left: 4px solid rgba(0,0,0,0); }
-.hu-css.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(4) { border: none; border-top: 4px solid #fff; border-right: 4px solid rgba(0,0,0,0); }
-
-/* Big Play Button (at start)
----------------------------------------------------------*/
-.hu-css div.vjs-big-play-button {
-  width: 76px; height: 70px; margin: -35px 0 0 -38px;
-  border: 1px solid #ccc; opacity: 0.8;
-  -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px;
-
-  background: rgba(50,50,50,0.8);
-
-  /* CSS Shadows */
-  -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
-}
-.hu-css div.vjs-big-play-button:hover {
-  -webkit-box-shadow: 0px 0px 80px #fff; -moz-box-shadow: 0px 0px 80px #fff; box-shadow: 0px 0px 80px #fff;
-}
-.hu-css div.vjs-big-play-button span {
-  margin: 16px 0 0 21px;
-  /* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */
-  border-left: 40px solid #fff; /* Width & Color of play icon */
-  /* Height of play icon is total top & bottom border widths. Color is transparent. */
-  border-top: 20px solid rgba(0,0,0,0); border-bottom: 20px solid rgba(0,0,0,0);
-}

skins/tube.css

@@ -1,111 +0,0 @@
-/*
-VideoJS TubeCSS Skin (http://videojs.com)
-Version 2.0.0
-*/
-
-.tube-css .vjs-controls {
-  opacity: 1; color: #000;
-  height: 24px;
-  bottom: 0;
-  background-color: #ccc;
-  background: #fcfcfc -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#d0d0d0)) left top;
-  background: #fcfcfc -moz-linear-gradient(top,  #fcfcfc,  #d0d0d0) left top;
-}
-
-.tube-css .vjs-controls > div {
-  height: 23px; margin: 0; background: none; top: 0;
-  border: 1px solid #b1b1b1; border-left-color: #eee;
-  -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
-  -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
-}
-
-/* Placement of Control Items */
-.tube-css .vjs-controls > div.vjs-play-control       { width: 25px; left: 0; }
-.tube-css .vjs-controls > div.vjs-progress-control   { left: 102px; right: 83px; }
-.tube-css .vjs-controls > div.vjs-time-control       { width: 75px; left: 27px; }
-.tube-css .vjs-controls > div.vjs-volume-control     { width: 50px; right: 30px; }
-.tube-css .vjs-controls > div.vjs-fullscreen-control { width: 30px; right: 0; }
-
-/* Removing borders on time & progress to join them */
-.tube-css .vjs-controls > div.vjs-progress-control { border-left: none; }
-.tube-css .vjs-controls > div.vjs-time-control { border-right: none; }
-
-
-/* Play/Pause
--------------------------------------------------------------------------------- */
-.tube-css .vjs-play-control { margin-left: 0; border-left-color: #b1b1b1; }
-.tube-css.vjs-paused  .vjs-play-control span { border-left-color: #333; border-top-width: 7px; border-left-width: 13px; border-bottom-width: 7px; margin: 5px 0 0 7px; }
-.tube-css.vjs-playing .vjs-play-control span { height: 14px; margin: 5px auto 0; border-left: 4px solid #333; border-right: 4px solid #333; }
-.tube-css.vjs-paused  .vjs-play-control:hover span { border-left-color: #CF1A1A; }
-.tube-css.vjs-playing .vjs-play-control:hover span { border-left-color: #CF1A1A; border-right-color: #CF1A1A; }
-
-/* Time Display
--------------------------------------------------------------------------------- */
-.tube-css .vjs-controls .vjs-time-control { font-size: 11px; }
-.tube-css .vjs-controls .vjs-time-control span { line-height: 25px; /* Centering vertically */ }
-
-/* Progress
--------------------------------------------------------------------------------- */
-.tube-css .vjs-progress-holder {
-  margin-right: 10px;
-  background-color: #b1b1b1;
-  background: #b1b1b1 -webkit-gradient(linear, left top, left bottom, from(#b1b1b1), to(#cacaca)) left top;
-  background: #b1b1b1 -moz-linear-gradient(top,  #b1b1b1,  #cacaca) left top;
-  border-color: #CACACA; border-bottom-color: #eaeaea;
-  -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
-}
-.tube-css .vjs-progress-control .vjs-load-progress { background: #C89191; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }
-.tube-css .vjs-progress-control .vjs-play-progress { background: #f33; background: -webkit-gradient(linear, left top, left bottom, from(#f33), to(#CF1A1A)); background: -moz-linear-gradient(top,  #f33,  #CF1A1A); -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }
-
-/* Volume
--------------------------------------------------------------------------------- */
-.tube-css .vjs-volume-control div { padding: 3px 0 0 0; }
-.tube-css .vjs-volume-control div span { border-bottom-color: #ccc; }
-/* Volume icon color */
-.tube-css .vjs-volume-control div span.vjs-volume-level-on { border-color: #333; }
-/* Volume icon hovering color */
-.tube-css .vjs-volume-control:hover div span.vjs-volume-level-on { border-color: #CF1A1A; }
-
-/* Fullscreen
--------------------------------------------------------------------------------- */
-.tube-css .vjs-fullscreen-control div { margin: 4px 0 0 8px; }
-/* Fullscreen icon color */
-.tube-css .vjs-fullscreen-control div span:nth-child(3), .tube-css .vjs-fullscreen-control div span:nth-child(4), .tube-css.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(1), .tube-css.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(2) {
-  border-bottom-color: #333;
-}
-.tube-css .vjs-fullscreen-control div span:nth-child(1), .tube-css .vjs-fullscreen-control div span:nth-child(2), .tube-css.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(3), .tube-css.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(4) {
-  border-top-color: #333;
-}
-/* Fullscreen icon hovering color */
-.tube-css .vjs-fullscreen-control:hover div span:nth-child(3), .tube-css .vjs-fullscreen-control:hover div span:nth-child(4), .tube-css.vjs-fullscreen .vjs-fullscreen-control:hover div span:nth-child(1), .tube-css.vjs-fullscreen .vjs-fullscreen-control:hover div span:nth-child(2) {
-  border-bottom-color: #CF1A1A;
-}
-.tube-css .vjs-fullscreen-control:hover div span:nth-child(1), .tube-css .vjs-fullscreen-control:hover div span:nth-child(2), .tube-css.vjs-fullscreen .vjs-fullscreen-control:hover div span:nth-child(3), .tube-css.vjs-fullscreen .vjs-fullscreen-control:hover div span:nth-child(4) {
-  border-top-color: #CF1A1A;
-}
-
-/* Big Play Button (at start)
----------------------------------------------------------*/
-.tube-css div.vjs-big-play-button { 
-  width: 84px; height: 58px; margin: -29px 0 0 -42px;
-  border: 2px solid #ccc; opacity: 0.9;
-  -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
-
-  /* CSS Background Gradients */
-  /* Default */ background-color: #333;
-  /* Webkit  */ background: #000 -webkit-gradient(linear, left top, left bottom, from(#000), to(#333)) left 29px;
-  /* Firefox */ background: #000 -moz-linear-gradient(top,  #000,  #333) left 29px;
-
-  /* CSS Shadows */
-  -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
-}
-.tube-css div.vjs-big-play-button:hover {
-  opacity: 1;
-}
-.tube-css div.vjs-big-play-button span {
-  margin: 11px 0 0 26px;
-  /* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */
-  border-left: 36px solid #fff; /* Width & Color of play icon */
-  /* Height of play icon is total top & bottom border widths. Color is transparent. */
-  border-top: 18px solid rgba(0,0,0,0); border-bottom: 18px solid rgba(0,0,0,0);
-}

skins/vim.css

@@ -1,89 +0,0 @@
-/*
-VideoJS VimCSS Skin (http://videojs.com)
-Version 2.0.0
-*/
-
-.vim-css .vjs-controls {
-  height: 60px; opacity: 0.9; color: #fff;
-}
-.vim-css .vjs-controls > div {
-  height: 32px; top: 18px; padding: 0; text-align: center; background: rgba(23, 35, 34, 0.746094);
-  -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
-  -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
-}
-/* Placement of Control Items */
-.vim-css .vjs-controls > div.vjs-play-control       { width: 65px; left: 10px; }
-.vim-css .vjs-controls > div.vjs-progress-control   { left: 85px; right: 160px; }
-.vim-css .vjs-controls > div.vjs-time-control       { width: 75px; right: 85px; }
-.vim-css .vjs-controls > div.vjs-volume-control     { width: 50px; right: 35px; }
-.vim-css .vjs-controls > div.vjs-fullscreen-control { width: 25px; right: 10px; }
-
-/* Play/Pause
--------------------------------------------------------------------------------- */
-.vim-css .vjs-controls .vjs-play-control { top: 10px; margin: 0; height: 40px;  -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
-.vim-css .vjs-play-control:hover { background: #00ADEF; }
-.vim-css.vjs-paused .vjs-play-control span { border-left-color: #fff; border-top-width: 9px; border-left-width: 18px; border-bottom-width: 9px; margin: 11px 0 0 24px; }
-.vim-css.vjs-playing .vjs-play-control span { width: 5px; height: 18px; margin: 5px auto 0; border-left: 5px solid #fff; border-right: 5px solid #fff; margin: 11px 0 0 24px; }
-
-/* Progress
--------------------------------------------------------------------------------- */
-.vim-css .vjs-controls .vjs-progress-control { -webkit-border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; }
-.vim-css .vjs-progress-control .vjs-progress-holder { height: 8px; padding: 1px; margin: 10px 5px 0 10px; border-color: #666666; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }
-.vim-css .vjs-progress-control .vjs-play-progress { height: 8px; background: #00ADEF; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }
-.vim-css .vjs-progress-control .vjs-load-progress { height: 8px; background: #898F8F; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }
-
-/* Time Display
--------------------------------------------------------------------------------- */
-.vim-css .vjs-controls .vjs-time-control { font-size: 11px; }
-.vim-css .vjs-controls .vjs-time-control span { line-height: 32px; /* Centering vertically */ }
-
-/* Volume
--------------------------------------------------------------------------------- */
-.vim-css .vjs-volume-control div { padding: 7px 0 0 5px; width: 30px; }
-.vim-css .vjs-volume-control div span {
-  float: left; margin: 0 2px 0 0; padding: 0; width: 3px; height: 3px; border-bottom: 12px solid #666666;
-  -webkit-transition: all 100ms linear; -moz-transition: all 100ms linear;
-}
-.vim-css .vjs-volume-control div span.vjs-volume-level-on { border-color: #00ADEF; }
-.vim-css .vjs-volume-control div span:hover { height: 0; border-bottom-width: 15px; }
-
-/* Fullscreen
--------------------------------------------------------------------------------- */
-.vim-css .vjs-fullscreen-control div { margin: 10px 0 0 0; }
-.vim-css .vjs-controls .vjs-fullscreen-control { -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; }
-/* Making default fullscreen icon smaller */
-.vim-css .vjs-fullscreen-control div span:nth-child(1) { margin: 0 4px 4px 0; border: none; border-top: 4px solid #fff; border-right: 4px solid rgba(0,0,0,0); }
-.vim-css .vjs-fullscreen-control div span:nth-child(2) { border: none; border-top: 4px solid #fff; border-left: 4px solid rgba(0,0,0,0); }
-.vim-css .vjs-fullscreen-control div span:nth-child(3) { clear: both; margin: 0 4px 0 0; border: none; border-bottom: 4px solid #fff; border-right: 4px solid rgba(0,0,0,0); }
-.vim-css .vjs-fullscreen-control div span:nth-child(4) { border: none; border-bottom: 4px solid #fff; border-left: 4px solid rgba(0,0,0,0); }
-.vim-css.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(1) { border: none; border-bottom: 4px solid #fff; border-left: 4px solid rgba(0,0,0,0); }
-.vim-css.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(2) { border: none; border-bottom: 4px solid #fff; border-right: 4px solid rgba(0,0,0,0); }
-.vim-css.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(3) { border: none; border-top: 4px solid #fff; border-left: 4px solid rgba(0,0,0,0); }
-.vim-css.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(4) { border: none; border-top: 4px solid #fff; border-right: 4px solid rgba(0,0,0,0); }
-/* Fullscreen control hovering */
-.vim-css .vjs-fullscreen-control:hover div span:nth-child(3), .vim-css .vjs-fullscreen-control:hover div span:nth-child(4), .vim-css.vjs-fullscreen .vjs-fullscreen-control:hover div span:nth-child(1), .vim-css.vjs-fullscreen .vjs-fullscreen-control:hover div span:nth-child(2) { border-bottom-color: #00ADEF; }
-.vim-css .vjs-fullscreen-control:hover div span:nth-child(1), .vim-css .vjs-fullscreen-control:hover div span:nth-child(2), .vim-css.vjs-fullscreen .vjs-fullscreen-control:hover div span:nth-child(3), .vim-css.vjs-fullscreen .vjs-fullscreen-control:hover div span:nth-child(4) { border-top-color: #00ADEF; }
-
-/* Big Play Button (at start)
----------------------------------------------------------*/
-.vim-css div.vjs-big-play-button {
-  width: 130px; height: 80px; margin: -40px 0 0 -65px;
-  border: none; opacity: 0.9;
-  -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
-
-  background: rgba(23, 35, 34, 0.746094);
-
-  /* CSS Shadows */
-  -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
-}
-.vim-css div.vjs-big-play-button:hover {
-  background: #00ADEF;
-  opacity: 1;
-}
-.vim-css div.vjs-big-play-button span {
-  margin: 22px 0 0 48px;
-  /* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */
-  border-left: 36px solid #fff; /* Width & Color of play icon */
-  /* Height of play icon is total top & bottom border widths. Color is transparent. */
-  border-top: 18px solid rgba(0,0,0,0); border-bottom: 18px solid rgba(0,0,0,0);
-}

src/css/font/vjs.svg

@@ -0,0 +1,40 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>
+This is a custom SVG font generated by IcoMoon.
+<iconset grid="16"></iconset>
+</metadata>
+<defs>
+<font id="VideoJS" horiz-adv-x="512" >
+<font-face units-per-em="512" ascent="480" descent="-32" />
+<missing-glyph horiz-adv-x="512" />
+<glyph unicode="&#xe000;" d="M 512.00,480.00 L 512.00,272.00 L 432.00,352.00 L 336.00,256.00 L 288.00,304.00 L 384.00,400.00 L 304.00,480.00 ZM 224.00,144.00 L 128.00,48.00 L 208.00-32.00 L 0.00-32.00 L 0.00,176.00 L 80.00,96.00 L 176.00,192.00 Z"  />
+<glyph unicode="&#xe001;" d="M 96.00,416.00L 416.00,224.00L 96.00,32.00 z"  />
+<glyph unicode="&#xe002;" d="M 64.00,416.00L 224.00,416.00L 224.00,32.00L 64.00,32.00zM 288.00,416.00L 448.00,416.00L 448.00,32.00L 288.00,32.00z"  />
+<glyph unicode="&#xe003;" d="M 200.666,440.666 C 213.50,453.50 224.00,449.15 224.00,431.00 L 224.00,17.00 C 224.00-1.15 213.50-5.499 200.666,7.335 L 80.00,128.00 L 0.00,128.00 L 0.00,320.00 L 80.00,320.00 L 200.666,440.666 Z"  />
+<glyph unicode="&#xe004;" d="M 274.51,109.49c-6.143,0.00-12.284,2.343-16.971,7.029c-9.373,9.373-9.373,24.568,0.00,33.941
+		c 40.55,40.55, 40.55,106.529,0.00,147.078c-9.373,9.373-9.373,24.569,0.00,33.941c 9.373,9.372, 24.568,9.372, 33.941,0.00
+		c 59.265-59.265, 59.265-155.696,0.00-214.961C 286.794,111.833, 280.652,109.49, 274.51,109.49zM 200.666,440.666 C 213.50,453.50 224.00,449.15 224.00,431.00 L 224.00,17.00 C 224.00-1.15 213.50-5.499 200.666,7.335 L 80.00,128.00 L 0.00,128.00 L 0.00,320.00 L 80.00,320.00 L 200.666,440.666 Z"  />
+<glyph unicode="&#xe005;" d="M 359.765,64.235c-6.143,0.00-12.284,2.343-16.971,7.029c-9.372,9.372-9.372,24.568,0.00,33.941
+		c 65.503,65.503, 65.503,172.085,0.00,237.588c-9.372,9.373-9.372,24.569,0.00,33.941c 9.372,9.371, 24.569,9.372, 33.941,0.00
+		C 417.532,335.938, 440.00,281.696, 440.00,224.00c0.00-57.695-22.468-111.938-63.265-152.735C 372.049,66.578, 365.907,64.235, 359.765,64.235zM 274.51,109.49c-6.143,0.00-12.284,2.343-16.971,7.029c-9.373,9.373-9.373,24.568,0.00,33.941
+		c 40.55,40.55, 40.55,106.529,0.00,147.078c-9.373,9.373-9.373,24.569,0.00,33.941c 9.373,9.372, 24.568,9.372, 33.941,0.00
+		c 59.265-59.265, 59.265-155.696,0.00-214.961C 286.794,111.833, 280.652,109.49, 274.51,109.49zM 200.666,440.666 C 213.50,453.50 224.00,449.15 224.00,431.00 L 224.00,17.00 C 224.00-1.15 213.50-5.499 200.666,7.335 L 80.00,128.00 L 0.00,128.00 L 0.00,320.00 L 80.00,320.00 L 200.666,440.666 Z"  />
+<glyph unicode="&#xe006;" d="M 445.02,18.98c-6.143,0.00-12.284,2.343-16.971,7.029c-9.372,9.373-9.372,24.568,0.00,33.941
+		C 471.868,103.771, 496.001,162.03, 496.001,224.00c0.00,61.969-24.133,120.229-67.952,164.049c-9.372,9.373-9.372,24.569,0.00,33.941
+		c 9.372,9.372, 24.569,9.372, 33.941,0.00c 52.885-52.886, 82.011-123.20, 82.011-197.99c0.00-74.791-29.126-145.104-82.011-197.99
+		C 457.304,21.323, 451.162,18.98, 445.02,18.98zM 359.765,64.235c-6.143,0.00-12.284,2.343-16.971,7.029c-9.372,9.372-9.372,24.568,0.00,33.941
+		c 65.503,65.503, 65.503,172.085,0.00,237.588c-9.372,9.373-9.372,24.569,0.00,33.941c 9.372,9.371, 24.569,9.372, 33.941,0.00
+		C 417.532,335.938, 440.00,281.696, 440.00,224.00c0.00-57.695-22.468-111.938-63.265-152.735C 372.049,66.578, 365.907,64.235, 359.765,64.235zM 274.51,109.49c-6.143,0.00-12.284,2.343-16.971,7.029c-9.373,9.373-9.373,24.568,0.00,33.941
+		c 40.55,40.55, 40.55,106.529,0.00,147.078c-9.373,9.373-9.373,24.569,0.00,33.941c 9.373,9.372, 24.568,9.372, 33.941,0.00
+		c 59.265-59.265, 59.265-155.696,0.00-214.961C 286.794,111.833, 280.652,109.49, 274.51,109.49zM 200.666,440.666 C 213.50,453.50 224.00,449.15 224.00,431.00 L 224.00,17.00 C 224.00-1.15 213.50-5.499 200.666,7.335 L 80.00,128.00 L 0.00,128.00 L 0.00,320.00 L 80.00,320.00 L 200.666,440.666 Z" horiz-adv-x="544"  />
+<glyph unicode="&#xe007;" d="M 256.00,480.00L 96.00,224.00L 256.00-32.00L 416.00,224.00 z"  />
+<glyph unicode="&#xe008;" d="M 0.00,480.00 L 687.158,480.00 L 687.158-35.207 L 0.00-35.207 L 0.00,480.00 z M 622.731,224.638 C 621.878,314.664 618.46,353.922 597.131,381.656 C 593.291,387.629 586.038,391.042 580.065,395.304 C 559.158,410.669 460.593,416.211 346.247,416.211 C 231.896,416.211 128.642,410.669 108.162,395.304 C 101.762,391.042 94.504,387.629 90.242,381.656 C 69.331,353.922 66.349,314.664 65.069,224.638 C 66.349,134.607 69.331,95.353 90.242,67.62 C 94.504,61.22 101.762,58.233 108.162,53.967 C 128.642,38.18 231.896,33.06 346.247,32.207 C 460.593,33.06 559.158,38.18 580.065,53.967 C 586.038,58.233 593.291,61.22 597.131,67.62 C 618.46,95.353 621.878,134.607 622.731,224.638 z M 331.179,247.952 C 325.389,318.401 287.924,359.905 220.901,359.905 C 159.672,359.905 111.54,304.689 111.54,215.965 C 111.54,126.859 155.405,71.267 227.907,71.267 C 285.79,71.267 326.306,113.916 332.701,184.742 L 263.55,184.742 C 260.81,158.468 249.843,138.285 226.69,138.285 C 190.136,138.285 183.435,174.462 183.435,212.92 C 183.435,265.854 198.665,292.886 223.951,292.886 C 246.492,292.886 260.81,276.511 262.939,247.952 L 331.179,247.952 z M 570.013,247.952 C 564.228,318.401 526.758,359.905 459.74,359.905 C 398.507,359.905 350.379,304.689 350.379,215.965 C 350.379,126.859 394.244,71.267 466.746,71.267 C 524.625,71.267 565.14,113.916 571.536,184.742 L 502.384,184.742 C 499.649,158.468 488.682,138.285 465.529,138.285 C 428.971,138.285 422.27,174.462 422.27,212.92 C 422.27,265.854 437.504,292.886 462.785,292.886 C 485.327,292.886 499.649,276.511 501.778,247.952 L 570.013,247.952 z " horiz-adv-x="687.1578947368421"  />
+<glyph unicode="&#xe009;" d="M 64.00,416.00L 448.00,416.00L 448.00,32.00L 64.00,32.00z"  />
+<glyph unicode="&#xe00a;" d="M 192.00,416.00A64.00,64.00 12780.00 1 1 320.00,416A64.00,64.00 12780.00 1 1 192.00,416zM 327.765,359.765A64.00,64.00 12780.00 1 1 455.765,359.765A64.00,64.00 12780.00 1 1 327.765,359.765zM 416.00,224.00A32.00,32.00 12780.00 1 1 480.00,224A32.00,32.00 12780.00 1 1 416.00,224zM 359.765,88.235A32.00,32.00 12780.00 1 1 423.765,88.23500000000001A32.00,32.00 12780.00 1 1 359.765,88.23500000000001zM 224.001,32.00A32.00,32.00 12780.00 1 1 288.001,32A32.00,32.00 12780.00 1 1 224.001,32zM 88.236,88.235A32.00,32.00 12780.00 1 1 152.236,88.23500000000001A32.00,32.00 12780.00 1 1 88.236,88.23500000000001zM 72.236,359.765A48.00,48.00 12780.00 1 1 168.236,359.765A48.00,48.00 12780.00 1 1 72.236,359.765zM 28.00,224.00A36.00,36.00 12780.00 1 1 100.00,224A36.00,36.00 12780.00 1 1 28.00,224z"  />
+<glyph unicode="&#xe00b;" d="M 224.00,192.00 L 224.00-16.00 L 144.00,64.00 L 48.00-32.00 L 0.00,16.00 L 96.00,112.00 L 16.00,192.00 ZM 512.00,432.00 L 416.00,336.00 L 496.00,256.00 L 288.00,256.00 L 288.00,464.00 L 368.00,384.00 L 464.00,480.00 Z"  />
+<glyph unicode="&#xe00c;" d="M 256.00,448.00 C 397.385,448.00 512.00,354.875 512.00,240.00 C 512.00,125.124 397.385,32.00 256.00,32.00 C 242.422,32.00 229.095,32.867 216.088,34.522 C 161.099-20.467 95.463-30.328 32.00-31.776 L 32.00-18.318 C 66.268-1.529 96.00,29.052 96.00,64.00 C 96.00,68.877 95.621,73.665 94.918,78.348 C 37.02,116.48 0.00,174.725 0.00,240.00 C 0.00,354.875 114.615,448.00 256.00,448.00 Z"  />
+<glyph unicode="&#x20;" horiz-adv-x="256" />
+<glyph class="hidden" unicode="&#xf000;" d="M0,480L 512 -32L0 -32 z" horiz-adv-x="0" />
+</font></defs></svg>

src/css/video-js.font.dev.svg

@@ -0,0 +1,40 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>
+This is a custom SVG font generated by IcoMoon.
+<iconset grid="16"></iconset>
+</metadata>
+<defs>
+<font id="VideoJS" horiz-adv-x="512" >
+<font-face units-per-em="512" ascent="480" descent="-32" />
+<missing-glyph horiz-adv-x="512" />
+<glyph unicode="&#xe000;" d="M 512.00,480.00 L 512.00,272.00 L 432.00,352.00 L 336.00,256.00 L 288.00,304.00 L 384.00,400.00 L 304.00,480.00 ZM 224.00,144.00 L 128.00,48.00 L 208.00-32.00 L 0.00-32.00 L 0.00,176.00 L 80.00,96.00 L 176.00,192.00 Z" data-tags="expand, enlarge, maximize, fullscreen" />
+<glyph unicode="&#xe001;" d="M 96.00,416.00L 416.00,224.00L 96.00,32.00 z" data-tags="play, media control, audio" />
+<glyph unicode="&#xe002;" d="M 64.00,416.00L 224.00,416.00L 224.00,32.00L 64.00,32.00zM 288.00,416.00L 448.00,416.00L 448.00,32.00L 288.00,32.00z" data-tags="pause, media control, audio" />
+<glyph unicode="&#xe003;" d="M 200.666,440.666 C 213.50,453.50 224.00,449.15 224.00,431.00 L 224.00,17.00 C 224.00-1.15 213.50-5.499 200.666,7.335 L 80.00,128.00 L 0.00,128.00 L 0.00,320.00 L 80.00,320.00 L 200.666,440.666 Z" data-tags="volume-mute, speaker, media control, audio, mute" />
+<glyph unicode="&#xe004;" d="M 274.51,109.49c-6.143,0.00-12.284,2.343-16.971,7.029c-9.373,9.373-9.373,24.568,0.00,33.941
+		c 40.55,40.55, 40.55,106.529,0.00,147.078c-9.373,9.373-9.373,24.569,0.00,33.941c 9.373,9.372, 24.568,9.372, 33.941,0.00
+		c 59.265-59.265, 59.265-155.696,0.00-214.961C 286.794,111.833, 280.652,109.49, 274.51,109.49zM 200.666,440.666 C 213.50,453.50 224.00,449.15 224.00,431.00 L 224.00,17.00 C 224.00-1.15 213.50-5.499 200.666,7.335 L 80.00,128.00 L 0.00,128.00 L 0.00,320.00 L 80.00,320.00 L 200.666,440.666 Z" data-tags="volume-low, speaker, media control, audio" />
+<glyph unicode="&#xe005;" d="M 359.765,64.235c-6.143,0.00-12.284,2.343-16.971,7.029c-9.372,9.372-9.372,24.568,0.00,33.941
+		c 65.503,65.503, 65.503,172.085,0.00,237.588c-9.372,9.373-9.372,24.569,0.00,33.941c 9.372,9.371, 24.569,9.372, 33.941,0.00
+		C 417.532,335.938, 440.00,281.696, 440.00,224.00c0.00-57.695-22.468-111.938-63.265-152.735C 372.049,66.578, 365.907,64.235, 359.765,64.235zM 274.51,109.49c-6.143,0.00-12.284,2.343-16.971,7.029c-9.373,9.373-9.373,24.568,0.00,33.941
+		c 40.55,40.55, 40.55,106.529,0.00,147.078c-9.373,9.373-9.373,24.569,0.00,33.941c 9.373,9.372, 24.568,9.372, 33.941,0.00
+		c 59.265-59.265, 59.265-155.696,0.00-214.961C 286.794,111.833, 280.652,109.49, 274.51,109.49zM 200.666,440.666 C 213.50,453.50 224.00,449.15 224.00,431.00 L 224.00,17.00 C 224.00-1.15 213.50-5.499 200.666,7.335 L 80.00,128.00 L 0.00,128.00 L 0.00,320.00 L 80.00,320.00 L 200.666,440.666 Z" data-tags="volume-medium, speaker, media control, audio" />
+<glyph unicode="&#xe006;" d="M 445.02,18.98c-6.143,0.00-12.284,2.343-16.971,7.029c-9.372,9.373-9.372,24.568,0.00,33.941
+		C 471.868,103.771, 496.001,162.03, 496.001,224.00c0.00,61.969-24.133,120.229-67.952,164.049c-9.372,9.373-9.372,24.569,0.00,33.941
+		c 9.372,9.372, 24.569,9.372, 33.941,0.00c 52.885-52.886, 82.011-123.20, 82.011-197.99c0.00-74.791-29.126-145.104-82.011-197.99
+		C 457.304,21.323, 451.162,18.98, 445.02,18.98zM 359.765,64.235c-6.143,0.00-12.284,2.343-16.971,7.029c-9.372,9.372-9.372,24.568,0.00,33.941
+		c 65.503,65.503, 65.503,172.085,0.00,237.588c-9.372,9.373-9.372,24.569,0.00,33.941c 9.372,9.371, 24.569,9.372, 33.941,0.00
+		C 417.532,335.938, 440.00,281.696, 440.00,224.00c0.00-57.695-22.468-111.938-63.265-152.735C 372.049,66.578, 365.907,64.235, 359.765,64.235zM 274.51,109.49c-6.143,0.00-12.284,2.343-16.971,7.029c-9.373,9.373-9.373,24.568,0.00,33.941
+		c 40.55,40.55, 40.55,106.529,0.00,147.078c-9.373,9.373-9.373,24.569,0.00,33.941c 9.373,9.372, 24.568,9.372, 33.941,0.00
+		c 59.265-59.265, 59.265-155.696,0.00-214.961C 286.794,111.833, 280.652,109.49, 274.51,109.49zM 200.666,440.666 C 213.50,453.50 224.00,449.15 224.00,431.00 L 224.00,17.00 C 224.00-1.15 213.50-5.499 200.666,7.335 L 80.00,128.00 L 0.00,128.00 L 0.00,320.00 L 80.00,320.00 L 200.666,440.666 Z" horiz-adv-x="544" data-tags="volume-high, speaker, media control, audio" />
+<glyph unicode="&#xe007;" d="M 256.00,480.00L 96.00,224.00L 256.00-32.00L 416.00,224.00 z" data-tags="diamonds, bet, game, gamble, cards" />
+<glyph unicode="&#xe008;" d="M 0.00,480.00 L 687.158,480.00 L 687.158-35.207 L 0.00-35.207 L 0.00,480.00 z M 622.731,224.638 C 621.878,314.664 618.46,353.922 597.131,381.656 C 593.291,387.629 586.038,391.042 580.065,395.304 C 559.158,410.669 460.593,416.211 346.247,416.211 C 231.896,416.211 128.642,410.669 108.162,395.304 C 101.762,391.042 94.504,387.629 90.242,381.656 C 69.331,353.922 66.349,314.664 65.069,224.638 C 66.349,134.607 69.331,95.353 90.242,67.62 C 94.504,61.22 101.762,58.233 108.162,53.967 C 128.642,38.18 231.896,33.06 346.247,32.207 C 460.593,33.06 559.158,38.18 580.065,53.967 C 586.038,58.233 593.291,61.22 597.131,67.62 C 618.46,95.353 621.878,134.607 622.731,224.638 z M 331.179,247.952 C 325.389,318.401 287.924,359.905 220.901,359.905 C 159.672,359.905 111.54,304.689 111.54,215.965 C 111.54,126.859 155.405,71.267 227.907,71.267 C 285.79,71.267 326.306,113.916 332.701,184.742 L 263.55,184.742 C 260.81,158.468 249.843,138.285 226.69,138.285 C 190.136,138.285 183.435,174.462 183.435,212.92 C 183.435,265.854 198.665,292.886 223.951,292.886 C 246.492,292.886 260.81,276.511 262.939,247.952 L 331.179,247.952 z M 570.013,247.952 C 564.228,318.401 526.758,359.905 459.74,359.905 C 398.507,359.905 350.379,304.689 350.379,215.965 C 350.379,126.859 394.244,71.267 466.746,71.267 C 524.625,71.267 565.14,113.916 571.536,184.742 L 502.384,184.742 C 499.649,158.468 488.682,138.285 465.529,138.285 C 428.971,138.285 422.27,174.462 422.27,212.92 C 422.27,265.854 437.504,292.886 462.785,292.886 C 485.327,292.886 499.649,276.511 501.778,247.952 L 570.013,247.952 z " horiz-adv-x="687.1578947368421" data-tags="Closed_captioning_symbol" />
+<glyph unicode="&#xe009;" d="M 64.00,416.00L 448.00,416.00L 448.00,32.00L 64.00,32.00z" data-tags="stop, media control, audio, square" />
+<glyph unicode="&#xe00a;" d="M 192.00,416.00A64.00,64.00 12780.00 1 1 320.00,416A64.00,64.00 12780.00 1 1 192.00,416zM 327.765,359.765A64.00,64.00 12780.00 1 1 455.765,359.765A64.00,64.00 12780.00 1 1 327.765,359.765zM 416.00,224.00A32.00,32.00 12780.00 1 1 480.00,224A32.00,32.00 12780.00 1 1 416.00,224zM 359.765,88.235A32.00,32.00 12780.00 1 1 423.765,88.23500000000001A32.00,32.00 12780.00 1 1 359.765,88.23500000000001zM 224.001,32.00A32.00,32.00 12780.00 1 1 288.001,32A32.00,32.00 12780.00 1 1 224.001,32zM 88.236,88.235A32.00,32.00 12780.00 1 1 152.236,88.23500000000001A32.00,32.00 12780.00 1 1 88.236,88.23500000000001zM 72.236,359.765A48.00,48.00 12780.00 1 1 168.236,359.765A48.00,48.00 12780.00 1 1 72.236,359.765zM 28.00,224.00A36.00,36.00 12780.00 1 1 100.00,224A36.00,36.00 12780.00 1 1 28.00,224z" data-tags="spinner, loading, busy, wait, wheel" />
+<glyph unicode="&#xe00b;" d="M 224.00,192.00 L 224.00-16.00 L 144.00,64.00 L 48.00-32.00 L 0.00,16.00 L 96.00,112.00 L 16.00,192.00 ZM 512.00,432.00 L 416.00,336.00 L 496.00,256.00 L 288.00,256.00 L 288.00,464.00 L 368.00,384.00 L 464.00,480.00 Z" data-tags="contract, minimize, shrink, collapse" />
+<glyph unicode="&#xe00c;" d="M 256.00,448.00 C 397.385,448.00 512.00,354.875 512.00,240.00 C 512.00,125.124 397.385,32.00 256.00,32.00 C 242.422,32.00 229.095,32.867 216.088,34.522 C 161.099-20.467 95.463-30.328 32.00-31.776 L 32.00-18.318 C 66.268-1.529 96.00,29.052 96.00,64.00 C 96.00,68.877 95.621,73.665 94.918,78.348 C 37.02,116.48 0.00,174.725 0.00,240.00 C 0.00,354.875 114.615,448.00 256.00,448.00 Z" data-tags="bubble, comment, chat, talk" />
+<glyph unicode="&#x20;" horiz-adv-x="256" />
+<glyph class="hidden" unicode="&#xf000;" d="M0,480L 512 -32L0 -32 z" horiz-adv-x="0" />
+</font></defs></svg>

src/css/video-js.less

@@ -0,0 +1,936 @@
+/*!
+Video.js Default Styles (http://videojs.com)
+Version GENERATED_AT_BUILD
+Create your own skin at http://designer.videojs.com
+*/
+
+// To customize the player skin, change the values of the variables or edit the
+// CSS below.
+// (This file uses LESS. Learn more at http://lesscss.org/)
+
+// The base font size controls the size of everything, not just text. All
+// diminensions use em-based sizes so that the scale along with the font size.
+// Try increasing it to 20px and see what happens.
+@base-font-size: 10px;
+@touch-device-font-size: 15px;
+
+// The main font color controls the color of the text and the icons (font icons)
+@main-font-color: #CCCCCC; // e.g. rgb(255, 255, 255) or #ffffff
+
+// The default color of control backgrounds is mostly black but with a little
+// bit of blue so it can still be seen on all black video frames, which are
+// common.
+@control-bg-color: #07141E; // e.g. rgb(255, 255, 255) or #ffffff
+@control-bg-alpha: 0.7; // 1.0 = 100% opacity, 0.0 = 0% opacity
+
+// The slider bar color is used for the progress bar and the volume bar
+@slider-bar-color: #66A8CC; // e.g. rgb(255, 255, 255) or #ffffff
+// The background of the progress bar and volume bar have a lined pattern that
+// is created from a base64 encoded image. You can generate your own pattern at
+// http://www.patternify.com/ then replace the value in the quotes with your own
+@slider-bar-pattern: ~'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC';
+// The color of the slider background
+@slider-background-color: #333333;
+@slider-background-alpha: 0.9; // 1.0 = 100% opacity, 0.0 = 0% opacity
+
+// The "Big Play Button" is the play button that shows before the video plays.
+// To center it set the align values to center and middle. The typical location
+// of the button is the center, but there is trend towards moving it to a corner
+// where it gets out of the way of valuable content in the poster image.
+@big-play-align: left; // left, center, or right
+@big-play-vertical-align: top; // top, middle, or bottom
+// The button colors match the control colors by default but you can customize
+// them by replace the variables (@control-bg-color) with your own color values.
+@big-play-bg-color: @control-bg-color;
+@big-play-bg-alpha: @control-bg-alpha;
+// The font size is what makes the big play button, big. All width/height values
+// use ems, which are a multiple of the font size.
+// If the @base-font-size is 10px, then 3em equals 30px.
+@big-play-font-size: 3em;
+// Now that font size is set, the following em values will be a multiple of the
+// new font size. If @big-play-font-size is 3em (30px), then setting the any of
+// the following values to 2em would equal 60px. 2 * font-size
+@big-play-margin: 0.5em;
+@big-play-width: 4em;
+@big-play-height: 2.6em;
+@big-play-border-radius: 0.8em;
+@big-play-border-width: 0.1em;
+@big-play-border-color: #3b4249;
+
+/* SKIN
+================================================================================
+The main class name for all skin-specific styles. To make your own skin,
+replace all occurances of 'vjs-default-skin' with a new name. Then add your new
+skin name to your video tag instead of the default skin.
+e.g. <video class="video-js my-skin-name">
+*/
+.vjs-default-skin {
+  color: @main-font-color;
+}
+
+/* Custom Icon Font
+--------------------------------------------------------------------------------
+The control icons are from a custom font. Each icon corresponds to a character
+(e.g. "\e001"). Font icons allow for easy scaling and coloring of icons.
+*/
+@font-face{
+  font-family: 'VideoJS';
+  src: url('font/vjs.eot');
+  src: url('font/vjs.eot?#iefix') format('embedded-opentype'),
+  url('font/vjs.woff') format('woff'),
+  url('font/vjs.ttf') format('truetype');
+
+  font-weight: normal;
+  font-style: normal;
+}
+
+// Icon font character values
+@play-icon: "\e001";
+@pause-icon: "\e002";
+@volume-muted-icon: "\e003";
+@volume-low-icon: "\e004";
+@volume-mid-icon: "\e005";
+@volume-high-icon: "\e006";
+@fullscreen-enter-icon: "\e000";
+@fullscreen-exit-icon: "\e00b";
+@square-icon: "\e009";
+@spinner-icon: "\e00a";
+@subtitles-icon: "\e00c";
+@captions-icon: "\e008";
+
+/* Base UI Component Classes
+--------------------------------------------------------------------------------
+*/
+
+/* Slider - used for Volume bar and Seek bar */
+.vjs-default-skin .vjs-slider {
+  /* Replace browser focus hightlight with handle highlight *///
+  outline: 0;
+  position: relative;
+  cursor: pointer;
+  padding: 0;
+
+  .background-color-with-alpha(@slider-background-color, @slider-background-alpha);
+}
+
+.vjs-default-skin .vjs-slider:focus {
+  .box-shadow(0 0 2em #fff);
+}
+
+.vjs-default-skin .vjs-slider-handle {
+  position: absolute;
+  /* Needed for IE6 *///
+  left: 0;
+  top: 0;
+}
+
+.vjs-default-skin .vjs-slider-handle:before {
+  content: @square-icon;
+  font-family: VideoJS;
+  font-size: 1em;
+  line-height: 1;
+  text-align: center;
+  text-shadow: 0em 0em 1em #fff;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  /* Rotate the square icon to make a diamond *///
+  .transform(rotate(-45deg));
+}
+
+/* Control Bar
+--------------------------------------------------------------------------------
+The default control bar that is a container for most of the controls.
+*/
+.vjs-default-skin .vjs-control-bar {
+  /* Start hidden *///
+  display: none;
+  position: absolute;
+  /* Place control bar at the bottom of the player box/video.
+     If you want more margin below the control bar, add more height. *///
+  bottom: 0;
+  /* Use left/right to stretch to 100% width of player div *///
+  left: 0;
+  right: 0;
+  /* Height includes any margin you want above or below control items *///
+  height: 3.0em;
+
+  .background-color-with-alpha(@control-bg-color, @control-bg-alpha);
+}
+
+/* Show the control bar only once the video has started playing */
+.vjs-default-skin.vjs-has-started .vjs-control-bar {
+  display: block;
+  /* Visibility needed to make sure things hide in older browsers too. */
+  visibility: visible;
+  opacity: 1;
+
+  @trans: visibility 0.1s, opacity 0.1s; // Var needed because of comma
+  .transition(@trans);
+}
+
+/* Hide the control bar when the video is playing and the user is inactive  */
+.vjs-default-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
+  display: block;
+  visibility: hidden;
+  opacity: 0;
+
+  @trans: visibility 1.0s, opacity 1.0s;
+  .transition(@trans);
+}
+
+.vjs-default-skin.vjs-controls-disabled .vjs-control-bar {
+  display: none;
+}
+
+.vjs-default-skin.vjs-using-native-controls .vjs-control-bar {
+  display: none;
+}
+
+/* IE8 is flakey with fonts, and you have to change the actual content to force
+fonts to show/hide properly.
+  - "\9" IE8 hack didn't work for this
+  - Found in XP IE8 from http://modern.ie. Does not show up in "IE8 mode" in IE9
+*/
+@ie8screen: ~"\0screen";
+.vjs-default-skin.vjs-user-inactive.vjs-playing .vjs-control-bar :before {
+  @media @ie8screen { content: ""; }
+}
+
+/* General styles for individual controls. */
+.vjs-default-skin .vjs-control {
+  outline: none;
+  position: relative;
+  float: left;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+  height: 3.0em;
+  width: 4em;
+}
+
+/* FontAwsome button icons */
+.vjs-default-skin .vjs-control:before {
+  font-family: VideoJS;
+  font-size: 1.5em;
+  line-height: 2;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
+}
+
+/* Replacement for focus outline */
+.vjs-default-skin .vjs-control:focus:before,
+.vjs-default-skin .vjs-control:hover:before {
+  text-shadow: 0em 0em 1em rgba(255, 255, 255, 1);
+}
+
+.vjs-default-skin .vjs-control:focus {
+  /*  outline: 0; *///
+  /* keyboard-only users cannot see the focus on several of the UI elements when
+  this is set to 0 */
+}
+
+/* Hide control text visually, but have it available for screenreaders */
+.vjs-default-skin .vjs-control-text {
+  .hide-visually;
+}
+
+/* Play/Pause
+--------------------------------------------------------------------------------
+*/
+.vjs-default-skin .vjs-play-control {
+  width: 5em;
+  cursor: pointer;
+}
+.vjs-default-skin .vjs-play-control:before {
+  content: @play-icon;
+}
+.vjs-default-skin.vjs-playing .vjs-play-control:before {
+  content: @pause-icon;
+}
+
+/* Volume/Mute
+-------------------------------------------------------------------------------- */
+.vjs-default-skin .vjs-mute-control,
+.vjs-default-skin .vjs-volume-menu-button {
+  cursor: pointer;
+  float: right;
+}
+.vjs-default-skin .vjs-mute-control:before,
+.vjs-default-skin .vjs-volume-menu-button:before {
+  content: @volume-high-icon;
+}
+.vjs-default-skin .vjs-mute-control.vjs-vol-0:before,
+.vjs-default-skin .vjs-volume-menu-button.vjs-vol-0:before {
+  content: @volume-muted-icon;
+}
+.vjs-default-skin .vjs-mute-control.vjs-vol-1:before,
+.vjs-default-skin .vjs-volume-menu-button.vjs-vol-1:before {
+  content: @volume-low-icon;
+}
+.vjs-default-skin .vjs-mute-control.vjs-vol-2:before,
+.vjs-default-skin .vjs-volume-menu-button.vjs-vol-2:before {
+  content: @volume-mid-icon;
+}
+
+.vjs-default-skin .vjs-volume-control {
+  width: 5em;
+  float: right;
+}
+.vjs-default-skin .vjs-volume-bar {
+  width: 5em;
+  height: 0.6em;
+  margin: 1.1em auto 0;
+}
+
+.vjs-default-skin .vjs-volume-menu-button .vjs-menu-content {
+  height: 2.9em;
+}
+
+.vjs-default-skin .vjs-volume-level {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 0.5em;
+
+  background: @slider-bar-color
+    url(@slider-bar-pattern)
+    -50% 0 repeat;
+}
+.vjs-default-skin .vjs-volume-bar .vjs-volume-handle {
+  width: 0.5em;
+  height: 0.5em;
+}
+
+.vjs-default-skin .vjs-volume-handle:before {
+  font-size: 0.9em;
+  top: -0.2em;
+  left: -0.2em;
+
+  width: 1em;
+  height: 1em;
+}
+
+.vjs-default-skin .vjs-volume-menu-button .vjs-menu .vjs-menu-content {
+  width: 6em;
+  left: -4em;
+}
+
+/* Progress
+--------------------------------------------------------------------------------
+*/
+.vjs-default-skin .vjs-progress-control {
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: auto;
+  font-size: 0.3em;
+  height: 1em;
+  /* Set above the rest of the controls. *///
+  top: -1em;
+
+  /* Shrink the bar slower than it grows. *///
+  .transition(all 0.4s);
+}
+
+/* On hover, make the progress bar grow to something that's more clickable.
+    This simply changes the overall font for the progress bar, and this
+    updates both the em-based widths and heights, as wells as the icon font */
+.vjs-default-skin:hover .vjs-progress-control {
+  font-size: .9em;
+
+  /* Even though we're not changing the top/height, we need to include them in
+      the transition so they're handled correctly. */
+  .transition(all 0.2s);
+}
+
+/* Box containing play and load progresses. Also acts as seek scrubber. */
+.vjs-default-skin .vjs-progress-holder {
+  height: 100%;
+}
+
+/* Progress Bars */
+.vjs-default-skin .vjs-progress-holder .vjs-play-progress,
+.vjs-default-skin .vjs-progress-holder .vjs-load-progress {
+  position: absolute;
+  display: block;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  /* Needed for IE6 *///
+  left: 0;
+  top: 0;
+}
+
+.vjs-default-skin .vjs-play-progress {
+  /*
+    Using a data URI to create the white diagonal lines with a transparent
+      background. Surprisingly works in IE8.
+      Created using http://www.patternify.com
+    Changing the first color value will change the bar color.
+    Also using a paralax effect to make the lines move backwards.
+      The -50% left position makes that happen.
+  */
+  background: @slider-bar-color
+    url(@slider-bar-pattern)
+    -50% 0 repeat;
+}
+.vjs-default-skin .vjs-load-progress {
+  background: rgb(100, 100, 100) /* IE8- Fallback */;
+  background: rgba(255, 255, 255, 0.4);
+}
+
+.vjs-default-skin .vjs-seek-handle {
+  width: 1.5em;
+  height: 100%;
+}
+
+.vjs-default-skin .vjs-seek-handle:before {
+  padding-top: 0.1em /* Minor adjustment */;
+}
+
+/* Time Display
+--------------------------------------------------------------------------------
+*/
+.vjs-default-skin .vjs-time-controls {
+  font-size: 1em;
+  /* Align vertically by making the line height the same as the control bar *///
+  line-height: 3em;
+}
+.vjs-default-skin .vjs-current-time { float: left; }
+.vjs-default-skin .vjs-duration { float: left; }
+/* Remaining time is in the HTML, but not included in default design */
+.vjs-default-skin .vjs-remaining-time { display: none; float: left; }
+.vjs-time-divider { float: left; line-height: 3em; }
+
+/* Fullscreen
+--------------------------------------------------------------------------------
+*/
+.vjs-default-skin .vjs-fullscreen-control {
+  width: 3.8em;
+  cursor: pointer;
+  float: right;
+}
+.vjs-default-skin .vjs-fullscreen-control:before {
+  content: @fullscreen-enter-icon;
+}
+/* Switch to the exit icon when the player is in fullscreen */
+.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control:before {
+  content: @fullscreen-exit-icon;
+}
+
+/* Big Play Button (play button at start)
+--------------------------------------------------------------------------------
+Positioning of the play button in the center or other corners can be done more
+easily in the skin designer. http://designer.videojs.com/
+*/
+.vjs-default-skin .vjs-big-play-button {
+  // Calculate total width/height so we're able to center the button
+  @total-width: @big-play-width + (@big-play-border-width * 2);
+  @total-height: @big-play-height + (@big-play-border-width * 2);
+  // Position the button using the absolute-align mixin (bottom of page)
+  .absolute-align(@big-play-align, @big-play-margin, @total-width);
+  .absolute-align(@big-play-vertical-align, @big-play-margin, @total-height);
+
+  font-size: @big-play-font-size;
+  display: block;
+  z-index: 2;
+  position: absolute;
+  width: @big-play-width;
+  height: @big-play-height;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  opacity: 1;
+
+  /* Need a slightly gray bg so it can be seen on black backgrounds *///
+  .background-color-with-alpha(@big-play-bg-color, @big-play-bg-alpha);
+
+  border: @big-play-border-width solid @big-play-border-color;
+
+  .border-radius(@big-play-border-radius);
+  .box-shadow(0px 0px 1em rgba(255, 255, 255, 0.25));
+  .transition(all 0.4s);
+}
+
+/* Hide if controls are disabled */
+.vjs-default-skin.vjs-controls-disabled .vjs-big-play-button {
+  display: none;
+}
+/* Hide when video starts playing */
+.vjs-default-skin.vjs-has-started .vjs-big-play-button {
+  display: none;
+}
+/* Hide on mobile devices. Remove when we stop using native controls
+    by default on mobile  */
+.vjs-default-skin.vjs-using-native-controls .vjs-big-play-button {
+  display: none;
+}
+
+.vjs-default-skin:hover .vjs-big-play-button,
+.vjs-default-skin .vjs-big-play-button:focus {
+  outline: 0;
+  border-color: #fff;
+  /* IE8 needs a non-glow hover state *///
+  background-color: rgb(80, 80, 80);
+  background-color: rgba(50, 50, 50, 0.75);
+
+  .box-shadow(0 0 3em #fff);
+  .transition(all 0s);
+}
+
+.vjs-default-skin .vjs-big-play-button:before {
+  content: @play-icon;
+  font-family: VideoJS;
+  /* In order to center the play icon vertically we need to set the line height
+     to the same as the button height */
+  line-height: @big-play-height;
+  text-shadow: 0.05em 0.05em 0.1em #000;
+  text-align: center /* Needed for IE8 */;
+
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+/* Loading Spinner
+--------------------------------------------------------------------------------
+*/
+.vjs-loading-spinner {
+  display: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+
+  font-size: 5em;
+  line-height: 1;
+
+  width: 1em;
+  height: 1em;
+
+  margin-left: -0.5em;
+  margin-top: -0.5em;
+
+  opacity: 0.75;
+
+  .animation(spin 1.5s infinite linear);
+}
+
+.vjs-default-skin .vjs-loading-spinner:before {
+  content: @spinner-icon;
+  font-family: VideoJS;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1em;
+  height: 1em;
+  text-align: center;
+  text-shadow: 0em 0em 0.1em #000;
+}
+
+@-moz-keyframes spin {
+  0% { -moz-transform: rotate(0deg); }
+  100% { -moz-transform: rotate(359deg); }
+}
+@-webkit-keyframes spin {
+  0% { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(359deg); }
+}
+@-o-keyframes spin {
+  0% { -o-transform: rotate(0deg); }
+  100% { -o-transform: rotate(359deg); }
+}
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(359deg); }
+}
+
+/* Menu Buttons (Captions/Subtitles/etc.)
+--------------------------------------------------------------------------------
+*/
+.vjs-default-skin .vjs-menu-button {
+  float: right;
+  cursor: pointer;
+}
+
+.vjs-default-skin .vjs-menu {
+  display: none;
+  position: absolute;
+  bottom: 0;
+  left: 0em; /* (Width of vjs-menu - width of button) / 2 */
+  width: 0em;
+  height: 0em;
+  margin-bottom: 3em;
+
+  border-left: 2em solid transparent;
+  border-right: 2em solid transparent;
+
+  border-top: 1.55em solid rgb(0, 0, 0); /* Same width top as ul bottom */
+  border-top-color: rgba(7, 40, 50, 0.5); /* Same as ul background */
+}
+
+/* Button Pop-up Menu */
+.vjs-default-skin .vjs-menu-button .vjs-menu .vjs-menu-content {
+  display: block;
+  padding: 0; margin: 0;
+  position: absolute;
+  width: 10em;
+  bottom: 1.5em; /* Same bottom as vjs-menu border-top */
+  max-height: 15em;
+  overflow: auto;
+
+  left: -5em; /* Width of menu - width of button / 2 */
+
+  .background-color-with-alpha(@control-bg-color, @control-bg-alpha);
+  .box-shadow(-0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2));
+}
+
+.vjs-default-skin .vjs-menu-button:hover .vjs-menu {
+  display: block;
+}
+.vjs-default-skin .vjs-menu-button ul li {
+  list-style: none;
+  margin: 0;
+  padding: 0.3em 0 0.3em 0;
+  line-height: 1.4em;
+  font-size: 1.2em;
+  text-align: center;
+  text-transform: lowercase;
+}
+.vjs-default-skin .vjs-menu-button ul li.vjs-selected {
+  background-color: #000;
+}
+.vjs-default-skin .vjs-menu-button ul li:focus,
+.vjs-default-skin .vjs-menu-button ul li:hover,
+.vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus,
+.vjs-default-skin .vjs-menu-button ul li.vjs-selected:hover {
+  outline: 0;
+  color: #111;
+
+  .background-color-with-alpha(rgb(255, 255, 255), 0.75);
+  .box-shadow(0 0 1em rgba(255, 255, 255, 1));
+}
+.vjs-default-skin .vjs-menu-button ul li.vjs-menu-title {
+  text-align: center;
+  text-transform: uppercase;
+  font-size: 1em;
+  line-height: 2em;
+  padding: 0;
+  margin: 0 0 0.3em 0;
+  font-weight: bold;
+  cursor: default;
+}
+
+/* Subtitles Button */
+.vjs-default-skin .vjs-subtitles-button:before { content: @subtitles-icon; }
+
+/* Captions Button */
+.vjs-default-skin .vjs-captions-button:before {
+  content: @captions-icon;
+}
+
+/* Replacement for focus outline */
+.vjs-default-skin .vjs-captions-button:focus .vjs-control-content:before,
+.vjs-default-skin .vjs-captions-button:hover .vjs-control-content:before {
+  .box-shadow(0 0 1em rgba(255, 255, 255, 1));
+}
+
+/*
+REQUIRED STYLES (be careful overriding)
+================================================================================
+When loading the player, the video tag is replaced with a DIV,
+that will hold the video tag or object tag for other playback methods.
+The div contains the video playback element (Flash or HTML5) and controls,
+and sets the width and height of the video.
+
+** If you want to add some kind of border/padding (e.g. a frame), or special
+positioning, use another containing element. Otherwise you risk messing up
+control positioning and full window mode. **
+*/
+.video-js {
+  background-color: #000;
+  position: relative;
+  padding: 0;
+  /* Start with 10px for base font size so other dimensions can be em based and
+     easily calculable. */
+  font-size: @base-font-size;
+  /* Allow poster to be vertially aligned. */
+  vertical-align: middle;
+  /*  display: table-cell; */ /*This works in Safari but not Firefox.*/
+
+  /* Provide some basic defaults for fonts */
+  font-weight: normal;
+  font-style: normal;
+  /* Avoiding helvetica: issue #376 */
+  font-family: Arial, sans-serif;
+
+  /* Turn off user selection (text highlighting) by default.
+     The majority of player components will not be text blocks.
+     Text areas will need to turn user selection back on. */
+  .user-select(none);
+}
+
+/* Playback technology elements expand to the width/height of the containing div
+    <video> or <object> */
+.video-js .vjs-tech {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when
+   checking fullScreenEnabled. */
+.video-js:-moz-full-screen { position: absolute; }
+
+/* Fullscreen Styles */
+body.vjs-full-window {
+  padding: 0;
+  margin: 0;
+  height: 100%;
+  /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html *///
+  overflow-y: auto;
+}
+.video-js.vjs-fullscreen {
+  position: fixed;
+  overflow: hidden;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 100% !important;
+  height: 100% !important;
+  /* IE6 full-window (underscore hack) *///
+  _position: absolute;
+}
+.video-js:-webkit-full-screen {
+  width: 100% !important;
+  height: 100% !important;
+}
+.video-js.vjs-fullscreen.vjs-user-inactive {
+  cursor: none;
+}
+
+/* Poster Styles */
+.vjs-poster {
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  background-size: contain;
+  cursor: pointer;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  width: 100%;
+}
+.vjs-poster img {
+  display: block;
+  margin: 0 auto;
+  max-height: 100%;
+  padding: 0;
+  width: 100%;
+}
+
+/* Hide the poster when native controls are used otherwise it covers them */
+.video-js.vjs-using-native-controls .vjs-poster {
+  display: none;
+}
+
+/* Text Track Styles */
+/* Overall track holder for both captions and subtitles */
+.video-js .vjs-text-track-display {
+  text-align: center;
+  position: absolute;
+  bottom: 4em;
+  /* Leave padding on left and right *///
+  left: 1em;
+  right: 1em;
+}
+/* Individual tracks */
+.video-js .vjs-text-track {
+  display: none;
+  font-size: 1.4em;
+  text-align: center;
+  margin-bottom: 0.1em;
+  /* Transparent black background, or fallback to all black (oldIE) *///
+  .background-color-with-alpha(rgb(0, 0, 0), 0.5);
+}
+.video-js .vjs-subtitles { color: #fff /* Subtitles are white */; }
+.video-js .vjs-captions { color: #fc6 /* Captions are yellow */; }
+.vjs-tt-cue { display: block; }
+
+/* Hide disabled or unsupported controls */
+.vjs-default-skin .vjs-hidden { display: none; }
+
+.vjs-lock-showing {
+  display: block !important;
+  opacity: 1;
+  visibility: visible;
+}
+
+// MIXINS
+// =============================================================================
+// Mixins are a LESS feature and are used to add vendor prefixes to CSS rules
+// when needed.
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
+.box-shadow (@string: 0 0 1em rgba(0, 0, 0, 0.25)) {
+  /* box-shadow *///
+  -webkit-box-shadow: @string;
+     -moz-box-shadow: @string;
+          box-shadow: @string;
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
+.border-radius (@string: 5px) {
+  /* border-radius *///
+  -webkit-border-radius: @string;
+     -moz-border-radius: @string;
+          border-radius: @string;
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/transition
+.transition (@string: all 1s linear) {
+  /* transition *///
+  -webkit-transition: @string;
+     -moz-transition: @string;
+       -o-transition: @string;
+          transition: @string;
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/transition
+.transition-delay (@string: 1s) {
+  /* transition-delay *///
+  -webkit-transition-delay: @string;
+     -moz-transition-delay: @string;
+       -o-transition-delay: @string;
+          transition-delay: @string;
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/animation
+.animation (@string: spin 1s infinite linear) {
+  /* animation *///
+  -webkit-animation: @string;
+     -moz-animation: @string;
+       -o-animation: @string;
+          animation: @string;
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/transform
+.transform (@string: rotate(-45deg)) {
+  /* transform *///
+  -webkit-transform: @string;
+     -moz-transform: @string;
+      -ms-transform: @string;
+       -o-transform: @string;
+          transform: @string;
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
+.user-select (@string: none) {
+  /* user-select *///
+  -webkit-user-select: @string;
+     -moz-user-select: @string;
+      -ms-user-select: @string;
+          user-select: @string;
+}
+
+// Hide something visually but keep available for screen readers.
+// http://h5bp.com/v
+.hide-visually () {
+  /* hide-visually *///
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position:
+  absolute;
+  width: 1px;
+}
+
+// Align an object with absolute positioning
+// Used to align the Big Play Button in the corners or center
+.absolute-align (@align, @margin, @length) when (@align = top) {
+  top: @margin;
+}
+.absolute-align (@align, @margin, @length) when (@align = bottom) {
+  bottom: @margin;
+}
+.absolute-align (@align, @margin, @length) when (@align = left) {
+  left: @margin;
+}
+.absolute-align (@align, @margin, @length) when (@align = right) {
+  right: @margin;
+}
+.absolute-align (@align, @margin, @length) when (@align = center) {
+  /* Center it horizontally *///
+  left: 50%;
+  margin-left: -(@length / 2);
+}
+.absolute-align (@align, @margin, @length) when (@align = middle) {
+  /* Center it vertically *///
+  top: 50%;
+  margin-top: -(@length / 2);
+}
+
+// http://stackoverflow.com/questions/637921/opacity-of-background-but-not-the-text
+.background-color-with-alpha (@color, @alpha) {
+  @rgba: rgba(red(@color), green(@color), blue(@color), @alpha);
+  /* background-color-with-alpha *///
+  background-color: @color;
+  background-color: @rgba;
+  // No longer using MS filters because they break border radius in IE9
+  // @argb: argb(@rgba);
+  // filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{argb}, endColorstr=@{argb})";
+  // -ms-filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{argb}, endColorstr=@{argb})";
+}
+
+.border-color-with-alpha (@color, @alpha) {
+  @rgba: rgba(red(@color), green(@color), blue(@color), @alpha);
+  /* border-color-with-alpha *///
+  border-color: @color;
+  border-color: @rgba;
+}
+
+// NOTES ON LESS (tracking learnings so we don't forget)
+// =============================================================================
+// * We want this file to continue to be accessible by people who don't know
+//   LESS but know CSS. This means finding the balance between using the most
+//   valuable LESS features (e.g. variables) and keeping it looking like CSS.
+//   So it's best to avoid advanced LESS features like conditional statements.
+//   (we're using one for the big play button position because that's a hot
+//   topic)
+//
+// * We care about the readability of the CSS output of LESS, which means we
+//   have to be careful about what features of LESS we use. (if you're building
+//   your own skin this may not apply)
+//     1. Comments inside of rules (strangely) have an extra line added after
+//        them in the CSS output. To avoid this we can add a LESS comment after
+//        the CSS comment.
+//          /* comment *///
+//
+//     2. In a rule with nested rules, any comments outside of a rule are moved
+//        to the top of the parent rule. i.e. it might look like:
+//          /* title of rule 1 */
+//          /* title of rule 2 */
+//          .rule1 {}
+//          .rule2 {}
+//        This is why we aren't using nested rules inside of the
+//        vjs-default-skin class.
+
+/* -----------------------------------------------------------------------------
+The original source of this file lives at
+https://github.com/videojs/video.js/blob/master/src/css/video-js.less */

src/js/big-play-button.js

@@ -0,0 +1,22 @@
+/* Big Play Button
+================================================================================ */
+/**
+ * Initial play button. Shows before the video has played. The hiding of the
+ * big play button is done via CSS and player states.
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.BigPlayButton = vjs.Button.extend();
+
+vjs.BigPlayButton.prototype.createEl = function(){
+  return vjs.Button.prototype.createEl.call(this, 'div', {
+    className: 'vjs-big-play-button',
+    innerHTML: '<span></span>',
+    'aria-label': 'play video'
+  });
+};
+
+vjs.BigPlayButton.prototype.onClick = function(){
+  this.player_.play();
+};

src/js/button.js

@@ -0,0 +1,75 @@
+/* Button - Base class for all buttons
+================================================================================ */
+/**
+ * Base class for all buttons
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.Button = vjs.Component.extend({
+  /** @constructor */
+  init: function(player, options){
+    vjs.Component.call(this, player, options);
+
+    var touchstart = false;
+    this.on('touchstart', function(event) {
+      // Stop click and other mouse events from triggering also
+      event.preventDefault();
+      touchstart = true;
+    });
+    this.on('touchmove', function() {
+      touchstart = false;
+    });
+    var self = this;
+    this.on('touchend', function(event) {
+      if (touchstart) {
+        self.onClick(event);
+      }
+      event.preventDefault();
+    });
+
+    this.on('click', this.onClick);
+    this.on('focus', this.onFocus);
+    this.on('blur', this.onBlur);
+  }
+});
+
+vjs.Button.prototype.createEl = function(type, props){
+  // Add standard Aria and Tabindex info
+  props = vjs.obj.merge({
+    className: this.buildCSSClass(),
+    innerHTML: '<div class="vjs-control-content"><span class="vjs-control-text">' + (this.buttonText || 'Need Text') + '</span></div>',
+    role: 'button',
+    'aria-live': 'polite', // let the screen reader user know that the text of the button may change
+    tabIndex: 0
+  }, props);
+
+  return vjs.Component.prototype.createEl.call(this, type, props);
+};
+
+vjs.Button.prototype.buildCSSClass = function(){
+  // TODO: Change vjs-control to vjs-button?
+  return 'vjs-control ' + vjs.Component.prototype.buildCSSClass.call(this);
+};
+
+  // Click - Override with specific functionality for button
+vjs.Button.prototype.onClick = function(){};
+
+  // Focus - Add keyboard functionality to element
+vjs.Button.prototype.onFocus = function(){
+  vjs.on(document, 'keyup', vjs.bind(this, this.onKeyPress));
+};
+
+  // KeyPress (document level) - Trigger click when keys are pressed
+vjs.Button.prototype.onKeyPress = function(event){
+  // Check for space bar (32) or enter (13) keys
+  if (event.which == 32 || event.which == 13) {
+    event.preventDefault();
+    this.onClick();
+  }
+};
+
+// Blur - Remove keyboard triggers
+vjs.Button.prototype.onBlur = function(){
+  vjs.off(document, 'keyup', vjs.bind(this, this.onKeyPress));
+};

src/js/cdn.js

@@ -0,0 +1,56 @@
+/**
+ * Google Analytics tracking pixel for the freely hosted version of Video.js
+ * at vjs.zencdn.net. We'll use this data to develop a support matrix of
+ * browsers and devices, and possibly track errors.
+ *
+ * This code generates the GA tracking URL without requiring the GA javascript
+ * library.
+ *
+ * @type {Image}
+ */
+;(function(i,w,n,e,l){
+  l=w.location;
+
+  // Setting the source of an image will load the URL even without adding to dom
+  // Using //www, still seems to work for https even though ssl.google is used by google
+  i.src='//www.google-analytics.com/__utm.gif'
+    // Version
+    +'?utmwv=5.4.2'
+    // ID
+    +'&utmac=UA-16505296-2'
+    // Sessions
+    // &utms=2
+    // Cache breaker (using utmcc to do this)
+    +'&utmn='+1
+    +'&utmhn='+e(l.hostname)
+    // Encoding
+    // &utmcs=UTF-8
+    +'&utmsr='+w.screen.availWidth+'x'+w.screen.availHeight
+    // Browser window
+    // &utmvp=1057x1105
+    // Color depth
+    // &utmsc=24-bit
+    +'&utmul='+(n.language||n.userLanguage||'').toLowerCase()
+    // Java
+    // &utmje=1
+    // Flash version
+    // &utmfl=11.7%20r700
+    // Page title
+    // &utmdt=HTML5%20Video%20Player%20%7C%20Video.js
+    // Adsense
+    // &utmhid=1112291628
+    // Referrer, '-' is none
+    // Using current page as referrer so stats show up cleaner than "Direct"
+    +'&utmr='+e(l.href)
+    +'&utmp='+e(l.hostname+l.pathname)
+    // Current time stamp
+    // &utmht=1370890439353
+    // ?
+    // &utmu=q
+    // Cookies! Manually setting visitor ID and setting everything else to 1
+    // Random number used as cache buster instead of utmn
+    +'&utmcc=__utma%3D1.'+Math.floor(Math.random()*1e10)+'.1.1.1.1%3B'
+    // Custom Var: vjsv is the variable name and 1.0.0 is the VJS version
+    +'&utme=8(vjsv)9(v0.0.0)'
+  ;
+})(new Image(),window,navigator,encodeURIComponent);

src/js/component.js

@@ -0,0 +1,715 @@
+/**
+ * @fileoverview Player Component - Base class for all UI objects
+ *
+ */
+
+/**
+ * Base UI Component class
+ * @param {Object} player  Main Player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.Component = vjs.CoreObject.extend({
+  /** @constructor */
+  init: function(player, options, ready){
+    this.player_ = player;
+
+    // Make a copy of prototype.options_ to protect against overriding global defaults
+    this.options_ = vjs.obj.copy(this.options_);
+
+    // Updated options with supplied options
+    options = this.options(options);
+
+    // Get ID from options, element, or create using player ID and unique ID
+    this.id_ = options['id'] || ((options['el'] && options['el']['id']) ? options['el']['id'] : player.id() + '_component_' + vjs.guid++ );
+
+    this.name_ = options['name'] || null;
+
+    // Create element if one wasn't provided in options
+    this.el_ = options['el'] || this.createEl();
+
+    this.children_ = [];
+    this.childIndex_ = {};
+    this.childNameIndex_ = {};
+
+    // Add any child components in options
+    this.initChildren();
+
+    this.ready(ready);
+    // Don't want to trigger ready here or it will before init is actually
+    // finished for all children that run this constructor
+  }
+});
+
+/**
+ * Dispose of the component and all child components.
+ */
+vjs.Component.prototype.dispose = function(){
+  this.trigger('dispose');
+
+  // Dispose all children.
+  if (this.children_) {
+    for (var i = this.children_.length - 1; i >= 0; i--) {
+      if (this.children_[i].dispose) {
+        this.children_[i].dispose();
+      }
+    }
+  }
+
+  // Delete child references
+  this.children_ = null;
+  this.childIndex_ = null;
+  this.childNameIndex_ = null;
+
+  // Remove all event listeners.
+  this.off();
+
+  // Remove element from DOM
+  if (this.el_.parentNode) {
+    this.el_.parentNode.removeChild(this.el_);
+  }
+
+  vjs.removeData(this.el_);
+  this.el_ = null;
+};
+
+/**
+ * Reference to main player instance.
+ * @type {vjs.Player}
+ * @private
+ */
+vjs.Component.prototype.player_;
+
+/**
+ * Return the component's player.
+ * @return {vjs.Player}
+ */
+vjs.Component.prototype.player = function(){
+  return this.player_;
+};
+
+/**
+ * Component options object.
+ * @type {Object}
+ * @private
+ */
+vjs.Component.prototype.options_;
+
+/**
+ * Deep merge of options objects
+ * Whenever a property is an object on both options objects
+ * the two properties will be merged using vjs.obj.deepMerge.
+ *
+ * This is used for merging options for child components. We
+ * want it to be easy to override individual options on a child
+ * component without having to rewrite all the other default options.
+ *
+ * Parent.prototype.options_ = {
+ *   children: {
+ *     'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
+ *     'childTwo': {},
+ *     'childThree': {}
+ *   }
+ * }
+ * newOptions = {
+ *   children: {
+ *     'childOne': { 'foo': 'baz', 'abc': '123' }
+ *     'childTwo': null,
+ *     'childFour': {}
+ *   }
+ * }
+ *
+ * this.options(newOptions);
+ *
+ * RESULT
+ *
+ * {
+ *   children: {
+ *     'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
+ *     'childTwo': null, // Disabled. Won't be initialized.
+ *     'childThree': {},
+ *     'childFour': {}
+ *   }
+ * }
+ *
+ * @param  {Object} obj Object whose values will be overwritten
+ * @return {Object}      NEW merged object. Does not return obj1.
+ */
+vjs.Component.prototype.options = function(obj){
+  if (obj === undefined) return this.options_;
+
+  return this.options_ = vjs.obj.deepMerge(this.options_, obj);
+};
+
+/**
+ * The DOM element for the component.
+ * @type {Element}
+ * @private
+ */
+vjs.Component.prototype.el_;
+
+/**
+ * Create the component's DOM element.
+ * @param  {String=} tagName  Element's node type. e.g. 'div'
+ * @param  {Object=} attributes An object of element attributes that should be set on the element.
+ * @return {Element}
+ */
+vjs.Component.prototype.createEl = function(tagName, attributes){
+  return vjs.createEl(tagName, attributes);
+};
+
+/**
+ * Return the component's DOM element.
+ * @return {Element}
+ */
+vjs.Component.prototype.el = function(){
+  return this.el_;
+};
+
+/**
+ * An optional element where, if defined, children will be inserted
+ *   instead of directly in el_
+ * @type {Element}
+ * @private
+ */
+vjs.Component.prototype.contentEl_;
+
+/**
+ * Return the component's DOM element for embedding content.
+ *   will either be el_ or a new element defined in createEl
+ * @return {Element}
+ */
+vjs.Component.prototype.contentEl = function(){
+  return this.contentEl_ || this.el_;
+};
+
+/**
+ * The ID for the component.
+ * @type {String}
+ * @private
+ */
+vjs.Component.prototype.id_;
+
+/**
+ * Return the component's ID.
+ * @return {String}
+ */
+vjs.Component.prototype.id = function(){
+  return this.id_;
+};
+
+/**
+ * The name for the component. Often used to reference the component.
+ * @type {String}
+ * @private
+ */
+vjs.Component.prototype.name_;
+
+/**
+ * Return the component's ID.
+ * @return {String}
+ */
+vjs.Component.prototype.name = function(){
+  return this.name_;
+};
+
+/**
+ * Array of child components
+ * @type {Array}
+ * @private
+ */
+vjs.Component.prototype.children_;
+
+/**
+ * Returns array of all child components.
+ * @return {Array}
+ */
+vjs.Component.prototype.children = function(){
+  return this.children_;
+};
+
+/**
+ * Object of child components by ID
+ * @type {Object}
+ * @private
+ */
+vjs.Component.prototype.childIndex_;
+
+/**
+ * Returns a child component with the provided ID.
+ * @return {Array}
+ */
+vjs.Component.prototype.getChildById = function(id){
+  return this.childIndex_[id];
+};
+
+/**
+ * Object of child components by Name
+ * @type {Object}
+ * @private
+ */
+vjs.Component.prototype.childNameIndex_;
+
+/**
+ * Returns a child component with the provided ID.
+ * @return {Array}
+ */
+vjs.Component.prototype.getChild = function(name){
+  return this.childNameIndex_[name];
+};
+
+/**
+ * Adds a child component inside this component.
+ * @param {String|vjs.Component} child The class name or instance of a child to add.
+ * @param {Object=} options Optional options, including options to be passed to
+ *  children of the child.
+ * @return {vjs.Component} The child component, because it might be created in this process.
+ * @suppress {accessControls|checkRegExp|checkTypes|checkVars|const|constantProperty|deprecated|duplicate|es5Strict|fileoverviewTags|globalThis|invalidCasts|missingProperties|nonStandardJsDocs|strictModuleDepCheck|undefinedNames|undefinedVars|unknownDefines|uselessCode|visibility}
+ */
+vjs.Component.prototype.addChild = function(child, options){
+  var component, componentClass, componentName, componentId;
+
+  // If string, create new component with options
+  if (typeof child === 'string') {
+
+    componentName = child;
+
+    // Make sure options is at least an empty object to protect against errors
+    options = options || {};
+
+    // Assume name of set is a lowercased name of the UI Class (PlayButton, etc.)
+    componentClass = options['componentClass'] || vjs.capitalize(componentName);
+
+    // Set name through options
+    options['name'] = componentName;
+
+    // Create a new object & element for this controls set
+    // If there's no .player_, this is a player
+    // Closure Compiler throws an 'incomplete alias' warning if we use the vjs variable directly.
+    // Every class should be exported, so this should never be a problem here.
+    component = new window['videojs'][componentClass](this.player_ || this, options);
+
+  // child is a component instance
+  } else {
+    component = child;
+  }
+
+  this.children_.push(component);
+
+  if (typeof component.id === 'function') {
+    this.childIndex_[component.id()] = component;
+  }
+
+  // If a name wasn't used to create the component, check if we can use the
+  // name function of the component
+  componentName = componentName || (component.name && component.name());
+
+  if (componentName) {
+    this.childNameIndex_[componentName] = component;
+  }
+
+  // Add the UI object's element to the container div (box)
+  // Having an element is not required
+  if (typeof component['el'] === 'function' && component['el']()) {
+    this.contentEl().appendChild(component['el']());
+  }
+
+  // Return so it can stored on parent object if desired.
+  return component;
+};
+
+vjs.Component.prototype.removeChild = function(component){
+  if (typeof component === 'string') {
+    component = this.getChild(component);
+  }
+
+  if (!component || !this.children_) return;
+
+  var childFound = false;
+  for (var i = this.children_.length - 1; i >= 0; i--) {
+    if (this.children_[i] === component) {
+      childFound = true;
+      this.children_.splice(i,1);
+      break;
+    }
+  }
+
+  if (!childFound) return;
+
+  this.childIndex_[component.id] = null;
+  this.childNameIndex_[component.name] = null;
+
+  var compEl = component.el();
+  if (compEl && compEl.parentNode === this.contentEl()) {
+    this.contentEl().removeChild(component.el());
+  }
+};
+
+/**
+ * Initialize default child components from options
+ */
+vjs.Component.prototype.initChildren = function(){
+  var options = this.options_;
+
+  if (options && options['children']) {
+    var self = this;
+
+    // Loop through components and add them to the player
+    vjs.obj.each(options['children'], function(name, opts){
+      // Allow for disabling default components
+      // e.g. vjs.options['children']['posterImage'] = false
+      if (opts === false) return;
+
+      // Allow waiting to add components until a specific event is called
+      var tempAdd = function(){
+        // Set property name on player. Could cause conflicts with other prop names, but it's worth making refs easy.
+        self[name] = self.addChild(name, opts);
+      };
+
+      if (opts['loadEvent']) {
+        // this.one(opts.loadEvent, tempAdd)
+      } else {
+        tempAdd();
+      }
+    });
+  }
+};
+
+vjs.Component.prototype.buildCSSClass = function(){
+    // Child classes can include a function that does:
+    // return 'CLASS NAME' + this._super();
+    return '';
+};
+
+/* Events
+============================================================================= */
+
+/**
+ * Add an event listener to this component's element. Context will be the component.
+ * @param  {String}   type Event type e.g. 'click'
+ * @param  {Function} fn   Event listener
+ * @return {vjs.Component}
+ */
+vjs.Component.prototype.on = function(type, fn){
+  vjs.on(this.el_, type, vjs.bind(this, fn));
+  return this;
+};
+
+/**
+ * Remove an event listener from the component's element
+ * @param  {String=}   type Optional event type. Without type it will remove all listeners.
+ * @param  {Function=} fn   Optional event listener. Without fn it will remove all listeners for a type.
+ * @return {vjs.Component}
+ */
+vjs.Component.prototype.off = function(type, fn){
+  vjs.off(this.el_, type, fn);
+  return this;
+};
+
+/**
+ * Add an event listener to be triggered only once and then removed
+ * @param  {String}   type Event type
+ * @param  {Function} fn   Event listener
+ * @return {vjs.Component}
+ */
+vjs.Component.prototype.one = function(type, fn) {
+  vjs.one(this.el_, type, vjs.bind(this, fn));
+  return this;
+};
+
+/**
+ * Trigger an event on an element
+ * @param  {String} type  Event type to trigger
+ * @param  {Event|Object} event Event object to be passed to the listener
+ * @return {vjs.Component}
+ */
+vjs.Component.prototype.trigger = function(type, event){
+  vjs.trigger(this.el_, type, event);
+  return this;
+};
+
+/* Ready
+================================================================================ */
+/**
+ * Is the component loaded.
+ * @type {Boolean}
+ * @private
+ */
+vjs.Component.prototype.isReady_;
+
+/**
+ * Trigger ready as soon as initialization is finished.
+ *   Allows for delaying ready. Override on a sub class prototype.
+ *   If you set this.isReadyOnInitFinish_ it will affect all components.
+ *   Specially used when waiting for the Flash player to asynchrnously load.
+ *   @type {Boolean}
+ *   @private
+ */
+vjs.Component.prototype.isReadyOnInitFinish_ = true;
+
+/**
+ * List of ready listeners
+ * @type {Array}
+ * @private
+ */
+vjs.Component.prototype.readyQueue_;
+
+/**
+ * Bind a listener to the component's ready state.
+ *   Different from event listeners in that if the ready event has already happend
+ *   it will trigger the function immediately.
+ * @param  {Function} fn Ready listener
+ * @return {vjs.Component}
+ */
+vjs.Component.prototype.ready = function(fn){
+  if (fn) {
+    if (this.isReady_) {
+      fn.call(this);
+    } else {
+      if (this.readyQueue_ === undefined) {
+        this.readyQueue_ = [];
+      }
+      this.readyQueue_.push(fn);
+    }
+  }
+  return this;
+};
+
+/**
+ * Trigger the ready listeners
+ * @return {vjs.Component}
+ */
+vjs.Component.prototype.triggerReady = function(){
+  this.isReady_ = true;
+
+  var readyQueue = this.readyQueue_;
+
+  if (readyQueue && readyQueue.length > 0) {
+
+    for (var i = 0, j = readyQueue.length; i < j; i++) {
+      readyQueue[i].call(this);
+    }
+
+    // Reset Ready Queue
+    this.readyQueue_ = [];
+
+    // Allow for using event listeners also, in case you want to do something everytime a source is ready.
+    this.trigger('ready');
+  }
+};
+
+/* Display
+============================================================================= */
+
+/**
+ * Add a CSS class name to the component's element
+ * @param {String} classToAdd Classname to add
+ * @return {vjs.Component}
+ */
+vjs.Component.prototype.addClass = function(classToAdd){
+  vjs.addClass(this.el_, classToAdd);
+  return this;
+};
+
+/**
+ * Remove a CSS class name from the component's element
+ * @param {String} classToRemove Classname to remove
+ * @return {vjs.Component}
+ */
+vjs.Component.prototype.removeClass = function(classToRemove){
+  vjs.removeClass(this.el_, classToRemove);
+  return this;
+};
+
+/**
+ * Show the component element if hidden
+ * @return {vjs.Component}
+ */
+vjs.Component.prototype.show = function(){
+  this.el_.style.display = 'block';
+  return this;
+};
+
+/**
+ * Hide the component element if hidden
+ * @return {vjs.Component}
+ */
+vjs.Component.prototype.hide = function(){
+  this.el_.style.display = 'none';
+  return this;
+};
+
+/**
+ * Lock an item in its visible state. To be used with fadeIn/fadeOut.
+ * @return {vjs.Component}
+ */
+vjs.Component.prototype.lockShowing = function(){
+  this.addClass('vjs-lock-showing');
+  return this;
+};
+
+/**
+ * Unlock an item to be hidden. To be used with fadeIn/fadeOut.
+ * @return {vjs.Component}
+ */
+vjs.Component.prototype.unlockShowing = function(){
+  this.removeClass('vjs-lock-showing');
+  return this;
+};
+
+/**
+ * Disable component by making it unshowable
+ */
+vjs.Component.prototype.disable = function(){
+  this.hide();
+  this.show = function(){};
+};
+
+/**
+ * If a value is provided it will change the width of the player to that value
+ * otherwise the width is returned
+ * http://dev.w3.org/html5/spec/dimension-attributes.html#attr-dim-height
+ * Video tag width/height only work in pixels. No percents.
+ * But allowing limited percents use. e.g. width() will return number+%, not computed width
+ * @param  {Number|String=} num   Optional width number
+ * @param  {[type]} skipListeners Skip the 'resize' event trigger
+ * @return {vjs.Component|Number|String} Returns 'this' if dimension was set.
+ *   Otherwise it returns the dimension.
+ */
+vjs.Component.prototype.width = function(num, skipListeners){
+  return this.dimension('width', num, skipListeners);
+};
+
+/**
+ * Get or set the height of the player
+ * @param  {Number|String=} num     Optional new player height
+ * @param  {Boolean=} skipListeners Optional skip resize event trigger
+ * @return {vjs.Component|Number|String} The player, or the dimension
+ */
+vjs.Component.prototype.height = function(num, skipListeners){
+  return this.dimension('height', num, skipListeners);
+};
+
+/**
+ * Set both width and height at the same time.
+ * @param  {Number|String} width
+ * @param  {Number|String} height
+ * @return {vjs.Component}   The player.
+ */
+vjs.Component.prototype.dimensions = function(width, height){
+  // Skip resize listeners on width for optimization
+  return this.width(width, true).height(height);
+};
+
+/**
+ * Get or set width or height.
+ * All for an integer, integer + 'px' or integer + '%';
+ * Known issue: hidden elements. Hidden elements officially have a width of 0.
+ * So we're defaulting to the style.width value and falling back to computedStyle
+ * which has the hidden element issue.
+ * Info, but probably not an efficient fix:
+ * http://www.foliotek.com/devblog/getting-the-width-of-a-hidden-element-with-jquery-using-width/
+ * @param  {String=} widthOrHeight 'width' or 'height'
+ * @param  {Number|String=} num           New dimension
+ * @param  {Boolean=} skipListeners Skip resize event trigger
+ * @return {vjs.Component|Number|String} Return the player if setting a dimension.
+ *                                         Otherwise it returns the dimension.
+ */
+vjs.Component.prototype.dimension = function(widthOrHeight, num, skipListeners){
+  if (num !== undefined) {
+
+    // Check if using css width/height (% or px) and adjust
+    if ((''+num).indexOf('%') !== -1 || (''+num).indexOf('px') !== -1) {
+      this.el_.style[widthOrHeight] = num;
+    } else if (num === 'auto') {
+      this.el_.style[widthOrHeight] = '';
+    } else {
+      this.el_.style[widthOrHeight] = num+'px';
+    }
+
+    // skipListeners allows us to avoid triggering the resize event when setting both width and height
+    if (!skipListeners) { this.trigger('resize'); }
+
+    // Return component
+    return this;
+  }
+
+  // Not setting a value, so getting it
+  // Make sure element exists
+  if (!this.el_) return 0;
+
+  // Get dimension value from style
+  var val = this.el_.style[widthOrHeight];
+  var pxIndex = val.indexOf('px');
+  if (pxIndex !== -1) {
+    // Return the pixel value with no 'px'
+    return parseInt(val.slice(0,pxIndex), 10);
+
+  // No px so using % or no style was set, so falling back to offsetWidth/height
+  // If component has display:none, offset will return 0
+  // TODO: handle display:none and no dimension style using px
+  } else {
+
+    return parseInt(this.el_['offset'+vjs.capitalize(widthOrHeight)], 10);
+
+    // ComputedStyle version.
+    // Only difference is if the element is hidden it will return
+    // the percent value (e.g. '100%'')
+    // instead of zero like offsetWidth returns.
+    // var val = vjs.getComputedStyleValue(this.el_, widthOrHeight);
+    // var pxIndex = val.indexOf('px');
+
+    // if (pxIndex !== -1) {
+    //   return val.slice(0, pxIndex);
+    // } else {
+    //   return val;
+    // }
+  }
+};
+
+/**
+ * Emit 'tap' events when touch events are supported. We're requireing them to
+ * be enabled because otherwise every component would have this extra overhead
+ * unnecessarily, on mobile devices where extra overhead is especially bad.
+ *
+ * This is being implemented so we can support taps on the video element
+ * toggling the controls.
+ */
+vjs.Component.prototype.emitTapEvents = function(){
+  var touchStart, touchTime, couldBeTap, noTap;
+
+  // Track the start time so we can determine how long the touch lasted
+  touchStart = 0;
+
+  this.on('touchstart', function(event) {
+    // Record start time so we can detect a tap vs. "touch and hold"
+    touchStart = new Date().getTime();
+    // Reset couldBeTap tracking
+    couldBeTap = true;
+  });
+
+  noTap = function(){
+    couldBeTap = false;
+  };
+  // TODO: Listen to the original target. http://youtu.be/DujfpXOKUp8?t=13m8s
+  this.on('touchmove', noTap);
+  this.on('touchleave', noTap);
+  this.on('touchcancel', noTap);
+
+  // When the touch ends, measure how long it took and trigger the appropriate
+  // event
+  this.on('touchend', function() {
+    // Proceed only if the touchmove/leave/cancel event didn't happen
+    if (couldBeTap === true) {
+      // Measure how long the touch lasted
+      touchTime = new Date().getTime() - touchStart;
+      // The touch needs to be quick in order to consider it a tap
+      if (touchTime < 250) {
+        this.trigger('tap');
+        // It may be good to copy the touchend event object and change the
+        // type to tap, if the other event properties aren't exact after
+        // vjs.fixEvent runs (e.g. event.target)
+      }
+    }
+  });
+};

src/js/control-bar/control-bar.js

@@ -0,0 +1,29 @@
+/**
+ * Container of main controls
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.ControlBar = vjs.Component.extend();
+
+vjs.ControlBar.prototype.options_ = {
+  loadEvent: 'play',
+  children: {
+    'playToggle': {},
+    'currentTimeDisplay': {},
+    'timeDivider': {},
+    'durationDisplay': {},
+    'remainingTimeDisplay': {},
+    'progressControl': {},
+    'fullscreenToggle': {},
+    'volumeControl': {},
+    'muteToggle': {}
+    // 'volumeMenuButton': {}
+  }
+};
+
+vjs.ControlBar.prototype.createEl = function(){
+  return vjs.createEl('div', {
+    className: 'vjs-control-bar'
+  });
+};

src/js/control-bar/fullscreen-toggle.js

@@ -0,0 +1,28 @@
+/**
+ * Toggle fullscreen video
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.FullscreenToggle = vjs.Button.extend({
+  /** @constructor */
+  init: function(player, options){
+    vjs.Button.call(this, player, options);
+  }
+});
+
+vjs.FullscreenToggle.prototype.buttonText = 'Fullscreen';
+
+vjs.FullscreenToggle.prototype.buildCSSClass = function(){
+  return 'vjs-fullscreen-control ' + vjs.Button.prototype.buildCSSClass.call(this);
+};
+
+vjs.FullscreenToggle.prototype.onClick = function(){
+  if (!this.player_.isFullScreen) {
+    this.player_.requestFullScreen();
+    this.el_.children[0].children[0].innerHTML = 'Non-Fullscreen'; // change the button text to "Non-Fullscreen"
+  } else {
+    this.player_.cancelFullScreen();
+    this.el_.children[0].children[0].innerHTML = 'Fullscreen'; // change the button to "Fullscreen"
+  }
+};

src/js/control-bar/mute-toggle.js

@@ -0,0 +1,69 @@
+/**
+ * Mute the audio
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.MuteToggle = vjs.Button.extend({
+  /** @constructor */
+  init: function(player, options){
+    vjs.Button.call(this, player, options);
+
+    player.on('volumechange', vjs.bind(this, this.update));
+
+    // hide mute toggle if the current tech doesn't support volume control
+    if (player.tech && player.tech.features && player.tech.features['volumeControl'] === false) {
+      this.addClass('vjs-hidden');
+    }
+    player.on('loadstart', vjs.bind(this, function(){
+      if (player.tech.features && player.tech.features['volumeControl'] === false) {
+        this.addClass('vjs-hidden');
+      } else {
+        this.removeClass('vjs-hidden');
+      }
+    }));
+  }
+});
+
+vjs.MuteToggle.prototype.createEl = function(){
+  return vjs.Button.prototype.createEl.call(this, 'div', {
+    className: 'vjs-mute-control vjs-control',
+    innerHTML: '<div><span class="vjs-control-text">Mute</span></div>'
+  });
+};
+
+vjs.MuteToggle.prototype.onClick = function(){
+  this.player_.muted( this.player_.muted() ? false : true );
+};
+
+vjs.MuteToggle.prototype.update = function(){
+  var vol = this.player_.volume(),
+      level = 3;
+
+  if (vol === 0 || this.player_.muted()) {
+    level = 0;
+  } else if (vol < 0.33) {
+    level = 1;
+  } else if (vol < 0.67) {
+    level = 2;
+  }
+
+  // Don't rewrite the button text if the actual text doesn't change.
+  // This causes unnecessary and confusing information for screen reader users.
+  // This check is needed because this function gets called every time the volume level is changed.
+  if(this.player_.muted()){
+      if(this.el_.children[0].children[0].innerHTML!='Unmute'){
+          this.el_.children[0].children[0].innerHTML = 'Unmute'; // change the button text to "Unmute"
+      }
+  } else {
+      if(this.el_.children[0].children[0].innerHTML!='Mute'){
+          this.el_.children[0].children[0].innerHTML = 'Mute'; // change the button text to "Mute"
+      }
+  }
+
+  /* TODO improve muted icon classes */
+  for (var i = 0; i < 4; i++) {
+    vjs.removeClass(this.el_, 'vjs-vol-'+i);
+  }
+  vjs.addClass(this.el_, 'vjs-vol-'+level);
+};

src/js/control-bar/play-toggle.js

@@ -0,0 +1,44 @@
+/**
+ * Button to toggle between play and pause
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.PlayToggle = vjs.Button.extend({
+  /** @constructor */
+  init: function(player, options){
+    vjs.Button.call(this, player, options);
+
+    player.on('play', vjs.bind(this, this.onPlay));
+    player.on('pause', vjs.bind(this, this.onPause));
+  }
+});
+
+vjs.PlayToggle.prototype.buttonText = 'Play';
+
+vjs.PlayToggle.prototype.buildCSSClass = function(){
+  return 'vjs-play-control ' + vjs.Button.prototype.buildCSSClass.call(this);
+};
+
+  // OnClick - Toggle between play and pause
+vjs.PlayToggle.prototype.onClick = function(){
+  if (this.player_.paused()) {
+    this.player_.play();
+  } else {
+    this.player_.pause();
+  }
+};
+
+  // OnPlay - Add the vjs-playing class to the element so it can change appearance
+vjs.PlayToggle.prototype.onPlay = function(){
+  vjs.removeClass(this.el_, 'vjs-paused');
+  vjs.addClass(this.el_, 'vjs-playing');
+  this.el_.children[0].children[0].innerHTML = 'Pause'; // change the button text to "Pause"
+};
+
+  // OnPause - Add the vjs-paused class to the element so it can change appearance
+vjs.PlayToggle.prototype.onPause = function(){
+  vjs.removeClass(this.el_, 'vjs-playing');
+  vjs.addClass(this.el_, 'vjs-paused');
+  this.el_.children[0].children[0].innerHTML = 'Play'; // change the button text to "Play"
+};

src/js/control-bar/progress-control.js

@@ -0,0 +1,189 @@
+/**
+ * Seek, Load Progress, and Play Progress
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.ProgressControl = vjs.Component.extend({
+  /** @constructor */
+  init: function(player, options){
+    vjs.Component.call(this, player, options);
+  }
+});
+
+vjs.ProgressControl.prototype.options_ = {
+  children: {
+    'seekBar': {}
+  }
+};
+
+vjs.ProgressControl.prototype.createEl = function(){
+  return vjs.Component.prototype.createEl.call(this, 'div', {
+    className: 'vjs-progress-control vjs-control'
+  });
+};
+
+/**
+ * Seek Bar and holder for the progress bars
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.SeekBar = vjs.Slider.extend({
+  /** @constructor */
+  init: function(player, options){
+    vjs.Slider.call(this, player, options);
+    player.on('timeupdate', vjs.bind(this, this.updateARIAAttributes));
+    player.ready(vjs.bind(this, this.updateARIAAttributes));
+  }
+});
+
+vjs.SeekBar.prototype.options_ = {
+  children: {
+    'loadProgressBar': {},
+    'playProgressBar': {},
+    'seekHandle': {}
+  },
+  'barName': 'playProgressBar',
+  'handleName': 'seekHandle'
+};
+
+vjs.SeekBar.prototype.playerEvent = 'timeupdate';
+
+vjs.SeekBar.prototype.createEl = function(){
+  return vjs.Slider.prototype.createEl.call(this, 'div', {
+    className: 'vjs-progress-holder',
+    'aria-label': 'video progress bar'
+  });
+};
+
+vjs.SeekBar.prototype.updateARIAAttributes = function(){
+    // Allows for smooth scrubbing, when player can't keep up.
+    var time = (this.player_.scrubbing) ? this.player_.getCache().currentTime : this.player_.currentTime();
+    this.el_.setAttribute('aria-valuenow',vjs.round(this.getPercent()*100, 2)); // machine readable value of progress bar (percentage complete)
+    this.el_.setAttribute('aria-valuetext',vjs.formatTime(time, this.player_.duration())); // human readable value of progress bar (time complete)
+};
+
+vjs.SeekBar.prototype.getPercent = function(){
+  var currentTime;
+  // Flash RTMP provider will not report the correct time
+  // immediately after a seek. This isn't noticeable if you're
+  // seeking while the video is playing, but it is if you seek
+  // while the video is paused.
+  if (this.player_.techName === 'Flash' && this.player_.seeking()) {
+    var cache = this.player_.getCache();
+    if (cache.lastSetCurrentTime) {
+      currentTime = cache.lastSetCurrentTime;
+    }
+    else {
+      currentTime = this.player_.currentTime();
+    }
+  }
+  else {
+    currentTime = this.player_.currentTime();
+  }
+
+  return currentTime / this.player_.duration();
+};
+
+vjs.SeekBar.prototype.onMouseDown = function(event){
+  vjs.Slider.prototype.onMouseDown.call(this, event);
+
+  this.player_.scrubbing = true;
+
+  this.videoWasPlaying = !this.player_.paused();
+  this.player_.pause();
+};
+
+vjs.SeekBar.prototype.onMouseMove = function(event){
+  var newTime = this.calculateDistance(event) * this.player_.duration();
+
+  // Don't let video end while scrubbing.
+  if (newTime == this.player_.duration()) { newTime = newTime - 0.1; }
+
+  // Set new time (tell player to seek to new time)
+  this.player_.currentTime(newTime);
+};
+
+vjs.SeekBar.prototype.onMouseUp = function(event){
+  vjs.Slider.prototype.onMouseUp.call(this, event);
+
+  this.player_.scrubbing = false;
+  if (this.videoWasPlaying) {
+    this.player_.play();
+  }
+};
+
+vjs.SeekBar.prototype.stepForward = function(){
+  this.player_.currentTime(this.player_.currentTime() + 5); // more quickly fast forward for keyboard-only users
+};
+
+vjs.SeekBar.prototype.stepBack = function(){
+  this.player_.currentTime(this.player_.currentTime() - 5); // more quickly rewind for keyboard-only users
+};
+
+
+/**
+ * Shows load progres
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.LoadProgressBar = vjs.Component.extend({
+  /** @constructor */
+  init: function(player, options){
+    vjs.Component.call(this, player, options);
+    player.on('progress', vjs.bind(this, this.update));
+  }
+});
+
+vjs.LoadProgressBar.prototype.createEl = function(){
+  return vjs.Component.prototype.createEl.call(this, 'div', {
+    className: 'vjs-load-progress',
+    innerHTML: '<span class="vjs-control-text">Loaded: 0%</span>'
+  });
+};
+
+vjs.LoadProgressBar.prototype.update = function(){
+  if (this.el_.style) { this.el_.style.width = vjs.round(this.player_.bufferedPercent() * 100, 2) + '%'; }
+};
+
+
+/**
+ * Shows play progress
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.PlayProgressBar = vjs.Component.extend({
+  /** @constructor */
+  init: function(player, options){
+    vjs.Component.call(this, player, options);
+  }
+});
+
+vjs.PlayProgressBar.prototype.createEl = function(){
+  return vjs.Component.prototype.createEl.call(this, 'div', {
+    className: 'vjs-play-progress',
+    innerHTML: '<span class="vjs-control-text">Progress: 0%</span>'
+  });
+};
+
+/**
+ * SeekBar component includes play progress bar, and seek handle
+ * Needed so it can determine seek position based on handle position/size
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.SeekHandle = vjs.SliderHandle.extend();
+
+/** @inheritDoc */
+vjs.SeekHandle.prototype.defaultValue = '00:00';
+
+/** @inheritDoc */
+vjs.SeekHandle.prototype.createEl = function(){
+  return vjs.SliderHandle.prototype.createEl.call(this, 'div', {
+    className: 'vjs-seek-handle'
+  });
+};

src/js/control-bar/time-display.js

@@ -0,0 +1,132 @@
+/**
+ * Displays the current time
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.CurrentTimeDisplay = vjs.Component.extend({
+  /** @constructor */
+  init: function(player, options){
+    vjs.Component.call(this, player, options);
+
+    player.on('timeupdate', vjs.bind(this, this.updateContent));
+  }
+});
+
+vjs.CurrentTimeDisplay.prototype.createEl = function(){
+  var el = vjs.Component.prototype.createEl.call(this, 'div', {
+    className: 'vjs-current-time vjs-time-controls vjs-control'
+  });
+
+  this.content = vjs.createEl('div', {
+    className: 'vjs-current-time-display',
+    innerHTML: '<span class="vjs-control-text">Current Time </span>' + '0:00', // label the current time for screen reader users
+    'aria-live': 'off' // tell screen readers not to automatically read the time as it changes
+  });
+
+  el.appendChild(vjs.createEl('div').appendChild(this.content));
+  return el;
+};
+
+vjs.CurrentTimeDisplay.prototype.updateContent = function(){
+  // Allows for smooth scrubbing, when player can't keep up.
+  var time = (this.player_.scrubbing) ? this.player_.getCache().currentTime : this.player_.currentTime();
+  this.content.innerHTML = '<span class="vjs-control-text">Current Time </span>' + vjs.formatTime(time, this.player_.duration());
+};
+
+/**
+ * Displays the duration
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.DurationDisplay = vjs.Component.extend({
+  /** @constructor */
+  init: function(player, options){
+    vjs.Component.call(this, player, options);
+
+    player.on('timeupdate', vjs.bind(this, this.updateContent)); // this might need to be changes to 'durationchange' instead of 'timeupdate' eventually, however the durationchange event fires before this.player_.duration() is set, so the value cannot be written out using this method. Once the order of durationchange and this.player_.duration() being set is figured out, this can be updated.
+  }
+});
+
+vjs.DurationDisplay.prototype.createEl = function(){
+  var el = vjs.Component.prototype.createEl.call(this, 'div', {
+    className: 'vjs-duration vjs-time-controls vjs-control'
+  });
+
+  this.content = vjs.createEl('div', {
+    className: 'vjs-duration-display',
+    innerHTML: '<span class="vjs-control-text">Duration Time </span>' + '0:00', // label the duration time for screen reader users
+    'aria-live': 'off' // tell screen readers not to automatically read the time as it changes
+  });
+
+  el.appendChild(vjs.createEl('div').appendChild(this.content));
+  return el;
+};
+
+vjs.DurationDisplay.prototype.updateContent = function(){
+  var duration = this.player_.duration();
+  if (duration) {
+      this.content.innerHTML = '<span class="vjs-control-text">Duration Time </span>' + vjs.formatTime(duration); // label the duration time for screen reader users
+  }
+};
+
+/**
+ * Time Separator (Not used in main skin, but still available, and could be used as a 'spare element')
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.TimeDivider = vjs.Component.extend({
+  /** @constructor */
+  init: function(player, options){
+    vjs.Component.call(this, player, options);
+  }
+});
+
+vjs.TimeDivider.prototype.createEl = function(){
+  return vjs.Component.prototype.createEl.call(this, 'div', {
+    className: 'vjs-time-divider',
+    innerHTML: '<div><span>/</span></div>'
+  });
+};
+
+/**
+ * Displays the time left in the video
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.RemainingTimeDisplay = vjs.Component.extend({
+  /** @constructor */
+  init: function(player, options){
+    vjs.Component.call(this, player, options);
+
+    player.on('timeupdate', vjs.bind(this, this.updateContent));
+  }
+});
+
+vjs.RemainingTimeDisplay.prototype.createEl = function(){
+  var el = vjs.Component.prototype.createEl.call(this, 'div', {
+    className: 'vjs-remaining-time vjs-time-controls vjs-control'
+  });
+
+  this.content = vjs.createEl('div', {
+    className: 'vjs-remaining-time-display',
+    innerHTML: '<span class="vjs-control-text">Remaining Time </span>' + '-0:00', // label the remaining time for screen reader users
+    'aria-live': 'off' // tell screen readers not to automatically read the time as it changes
+  });
+
+  el.appendChild(vjs.createEl('div').appendChild(this.content));
+  return el;
+};
+
+vjs.RemainingTimeDisplay.prototype.updateContent = function(){
+  if (this.player_.duration()) {
+    this.content.innerHTML = '<span class="vjs-control-text">Remaining Time </span>' + '-'+ vjs.formatTime(this.player_.remainingTime());
+  }
+
+  // Allows for smooth scrubbing, when player can't keep up.
+  // var time = (this.player_.scrubbing) ? this.player_.getCache().currentTime : this.player_.currentTime();
+  // this.content.innerHTML = vjs.formatTime(time, this.player_.duration());
+};

src/js/control-bar/volume-control.js

@@ -0,0 +1,134 @@
+/**
+ * Control the volume
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.VolumeControl = vjs.Component.extend({
+  /** @constructor */
+  init: function(player, options){
+    vjs.Component.call(this, player, options);
+
+    // hide volume controls when they're not supported by the current tech
+    if (player.tech && player.tech.features && player.tech.features['volumeControl'] === false) {
+      this.addClass('vjs-hidden');
+    }
+    player.on('loadstart', vjs.bind(this, function(){
+      if (player.tech.features && player.tech.features['volumeControl'] === false) {
+        this.addClass('vjs-hidden');
+      } else {
+        this.removeClass('vjs-hidden');
+      }
+    }));
+  }
+});
+
+vjs.VolumeControl.prototype.options_ = {
+  children: {
+    'volumeBar': {}
+  }
+};
+
+vjs.VolumeControl.prototype.createEl = function(){
+  return vjs.Component.prototype.createEl.call(this, 'div', {
+    className: 'vjs-volume-control vjs-control'
+  });
+};
+
+/**
+ * Contains volume level
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.VolumeBar = vjs.Slider.extend({
+  /** @constructor */
+  init: function(player, options){
+    vjs.Slider.call(this, player, options);
+    player.on('volumechange', vjs.bind(this, this.updateARIAAttributes));
+    player.ready(vjs.bind(this, this.updateARIAAttributes));
+    setTimeout(vjs.bind(this, this.update), 0); // update when elements is in DOM
+  }
+});
+
+vjs.VolumeBar.prototype.updateARIAAttributes = function(){
+  // Current value of volume bar as a percentage
+  this.el_.setAttribute('aria-valuenow',vjs.round(this.player_.volume()*100, 2));
+  this.el_.setAttribute('aria-valuetext',vjs.round(this.player_.volume()*100, 2)+'%');
+};
+
+vjs.VolumeBar.prototype.options_ = {
+  children: {
+    'volumeLevel': {},
+    'volumeHandle': {}
+  },
+  'barName': 'volumeLevel',
+  'handleName': 'volumeHandle'
+};
+
+vjs.VolumeBar.prototype.playerEvent = 'volumechange';
+
+vjs.VolumeBar.prototype.createEl = function(){
+  return vjs.Slider.prototype.createEl.call(this, 'div', {
+    className: 'vjs-volume-bar',
+    'aria-label': 'volume level'
+  });
+};
+
+vjs.VolumeBar.prototype.onMouseMove = function(event) {
+  this.player_.volume(this.calculateDistance(event));
+};
+
+vjs.VolumeBar.prototype.getPercent = function(){
+  if (this.player_.muted()) {
+    return 0;
+  } else {
+    return this.player_.volume();
+  }
+};
+
+vjs.VolumeBar.prototype.stepForward = function(){
+  this.player_.volume(this.player_.volume() + 0.1);
+};
+
+vjs.VolumeBar.prototype.stepBack = function(){
+  this.player_.volume(this.player_.volume() - 0.1);
+};
+
+/**
+ * Shows volume level
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.VolumeLevel = vjs.Component.extend({
+  /** @constructor */
+  init: function(player, options){
+    vjs.Component.call(this, player, options);
+  }
+});
+
+vjs.VolumeLevel.prototype.createEl = function(){
+  return vjs.Component.prototype.createEl.call(this, 'div', {
+    className: 'vjs-volume-level',
+    innerHTML: '<span class="vjs-control-text"></span>'
+  });
+};
+
+/**
+ * Change volume level
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+ vjs.VolumeHandle = vjs.SliderHandle.extend();
+
+ /** @inheritDoc */
+ vjs.VolumeHandle.prototype.defaultValue = '00:00';
+
+ /** @inheritDoc */
+ vjs.VolumeHandle.prototype.createEl = function(){
+   return vjs.SliderHandle.prototype.createEl.call(this, 'div', {
+     className: 'vjs-volume-handle'
+   });
+ };

src/js/control-bar/volume-menu-button.js

@@ -0,0 +1,48 @@
+/**
+ * Menu button with a popup for showing the volume slider.
+ * @constructor
+ */
+vjs.VolumeMenuButton = vjs.MenuButton.extend({
+  /** @constructor */
+  init: function(player, options){
+    vjs.MenuButton.call(this, player, options);
+
+    // Same listeners as MuteToggle
+    player.on('volumechange', vjs.bind(this, this.update));
+
+    // hide mute toggle if the current tech doesn't support volume control
+    if (player.tech && player.tech.features && player.tech.features.volumeControl === false) {
+      this.addClass('vjs-hidden');
+    }
+    player.on('loadstart', vjs.bind(this, function(){
+      if (player.tech.features && player.tech.features.volumeControl === false) {
+        this.addClass('vjs-hidden');
+      } else {
+        this.removeClass('vjs-hidden');
+      }
+    }));
+    this.addClass('vjs-menu-button');
+  }
+});
+
+vjs.VolumeMenuButton.prototype.createMenu = function(){
+  var menu = new vjs.Menu(this.player_, {
+    contentElType: 'div'
+  });
+  var vc = new vjs.VolumeBar(this.player_, vjs.obj.merge({vertical: true}, this.options_.volumeBar));
+  menu.addChild(vc);
+  return menu;
+};
+
+vjs.VolumeMenuButton.prototype.onClick = function(){
+  vjs.MuteToggle.prototype.onClick.call(this);
+  vjs.MenuButton.prototype.onClick.call(this);
+};
+
+vjs.VolumeMenuButton.prototype.createEl = function(){
+  return vjs.Button.prototype.createEl.call(this, 'div', {
+    className: 'vjs-volume-menu-button vjs-menu-button vjs-control',
+    innerHTML: '<div><span class="vjs-control-text">Mute</span></div>'
+  });
+};
+vjs.VolumeMenuButton.prototype.update = vjs.MuteToggle.prototype.update;

src/js/core-object.js

@@ -0,0 +1,75 @@
+/**
+ * Core Object/Class for objects that use inheritance + contstructors
+ * @constructor
+ */
+vjs.CoreObject = vjs['CoreObject'] = function(){};
+// Manually exporting vjs['CoreObject'] here for Closure Compiler
+// because of the use of the extend/create class methods
+// If we didn't do this, those functions would get flattend to something like
+// `a = ...` and `this.prototype` would refer to the global object instead of
+// CoreObject
+
+/**
+ * Create a new object that inherits from this Object
+ * @param {Object} props Functions and properties to be applied to the
+ *                       new object's prototype
+ * @return {vjs.CoreObject} Returns an object that inherits from CoreObject
+ * @this {*}
+ */
+vjs.CoreObject.extend = function(props){
+  var init, subObj;
+
+  props = props || {};
+  // Set up the constructor using the supplied init method
+  // or using the init of the parent object
+  // Make sure to check the unobfuscated version for external libs
+  init = props['init'] || props.init || this.prototype['init'] || this.prototype.init || function(){};
+  // In Resig's simple class inheritance (previously used) the constructor
+  //  is a function that calls `this.init.apply(arguments)`
+  // However that would prevent us from using `ParentObject.call(this);`
+  //  in a Child constuctor because the `this` in `this.init`
+  //  would still refer to the Child and cause an inifinite loop.
+  // We would instead have to do
+  //    `ParentObject.prototype.init.apply(this, argumnents);`
+  //  Bleh. We're not creating a _super() function, so it's good to keep
+  //  the parent constructor reference simple.
+  subObj = function(){
+    init.apply(this, arguments);
+  };
+
+  // Inherit from this object's prototype
+  subObj.prototype = vjs.obj.create(this.prototype);
+  // Reset the constructor property for subObj otherwise
+  // instances of subObj would have the constructor of the parent Object
+  subObj.prototype.constructor = subObj;
+
+  // Make the class extendable
+  subObj.extend = vjs.CoreObject.extend;
+  // Make a function for creating instances
+  subObj.create = vjs.CoreObject.create;
+
+  // Extend subObj's prototype with functions and other properties from props
+  for (var name in props) {
+    if (props.hasOwnProperty(name)) {
+      subObj.prototype[name] = props[name];
+    }
+  }
+
+  return subObj;
+};
+
+/**
+ * Create a new instace of this Object class
+ * @return {vjs.CoreObject} Returns an instance of a CoreObject subclass
+ * @this {*}
+ */
+vjs.CoreObject.create = function(){
+  // Create a new object that inherits from this object's prototype
+  var inst = vjs.obj.create(this.prototype);
+
+  // Apply this constructor function to the new object
+  this.apply(inst, arguments);
+
+  // Return the new object
+  return inst;
+};

src/js/core.js

@@ -0,0 +1,111 @@
+/**
+ * @fileoverview Main function src.
+ */
+
+// HTML5 Shiv. Must be in <head> to support older browsers.
+document.createElement('video');
+document.createElement('audio');
+document.createElement('track');
+
+/**
+ * Doubles as the main function for users to create a player instance and also
+ * the main library object.
+ *
+ * @param  {String|Element} id      Video element or video element ID
+ * @param  {Object=} options        Optional options object for config/settings
+ * @param  {Function=} ready        Optional ready callback
+ * @return {vjs.Player}             A player instance
+ */
+var vjs = function(id, options, ready){
+  var tag; // Element of ID
+
+  // Allow for element or ID to be passed in
+  // String ID
+  if (typeof id === 'string') {
+
+    // Adjust for jQuery ID syntax
+    if (id.indexOf('#') === 0) {
+      id = id.slice(1);
+    }
+
+    // If a player instance has already been created for this ID return it.
+    if (vjs.players[id]) {
+      return vjs.players[id];
+
+    // Otherwise get element for ID
+    } else {
+      tag = vjs.el(id);
+    }
+
+  // ID is a media element
+  } else {
+    tag = id;
+  }
+
+  // Check for a useable element
+  if (!tag || !tag.nodeName) { // re: nodeName, could be a box div also
+    throw new TypeError('The element or ID supplied is not valid. (videojs)'); // Returns
+  }
+
+  // Element may have a player attr referring to an already created player instance.
+  // If not, set up a new player and return the instance.
+  return tag['player'] || new vjs.Player(tag, options, ready);
+};
+
+// Extended name, also available externally, window.videojs
+var videojs = vjs;
+window.videojs = window.vjs = vjs;
+
+// CDN Version. Used to target right flash swf.
+vjs.CDN_VERSION = 'GENERATED_CDN_VSN';
+vjs.ACCESS_PROTOCOL = ('https:' == document.location.protocol ? 'https://' : 'http://');
+
+/**
+ * Global Player instance options, surfaced from vjs.Player.prototype.options_
+ * vjs.options = vjs.Player.prototype.options_
+ * All options should use string keys so they avoid
+ * renaming by closure compiler
+ * @type {Object}
+ */
+vjs.options = {
+  // Default order of fallback technology
+  'techOrder': ['html5','flash'],
+  // techOrder: ['flash','html5'],
+
+  'html5': {},
+  'flash': {},
+
+  // Default of web browser is 300x150. Should rely on source width/height.
+  'width': 300,
+  'height': 150,
+  // defaultVolume: 0.85,
+  'defaultVolume': 0.00, // The freakin seaguls are driving me crazy!
+
+  // Included control sets
+  'children': {
+    'mediaLoader': {},
+    'posterImage': {},
+    'textTrackDisplay': {},
+    'loadingSpinner': {},
+    'bigPlayButton': {},
+    'controlBar': {}
+  },
+
+  // Default message to show when a video cannot be played.
+  'notSupportedMessage': 'Sorry, no compatible source and playback ' +
+      'technology were found for this video. Try using another browser ' +
+      'like <a href="http://bit.ly/ccMUEC">Chrome</a> or download the ' +
+      'latest <a href="http://adobe.ly/mwfN1">Adobe Flash Player</a>.'
+};
+
+// Set CDN Version of swf
+// The added (+) blocks the replace from changing this GENERATED_CDN_VSN string
+if (vjs.CDN_VERSION !== 'GENERATED'+'_CDN_VSN') {
+  videojs.options['flash']['swf'] = vjs.ACCESS_PROTOCOL + 'vjs.zencdn.net/'+vjs.CDN_VERSION+'/video-js.swf';
+}
+
+/**
+ * Global player list
+ * @type {Object}
+ */
+vjs.players = {};

src/js/events.js

@@ -0,0 +1,339 @@
+/**
+ * @fileoverview Event System (John Resig - Secrets of a JS Ninja http://jsninja.com/)
+ * (Original book version wasn't completely usable, so fixed some things and made Closure Compiler compatible)
+ * This should work very similarly to jQuery's events, however it's based off the book version which isn't as
+ * robust as jquery's, so there's probably some differences.
+ */
+
+/**
+ * Add an event listener to element
+ * It stores the handler function in a separate cache object
+ * and adds a generic handler to the element's event,
+ * along with a unique id (guid) to the element.
+ * @param  {Element|Object}   elem Element or object to bind listeners to
+ * @param  {String}   type Type of event to bind to.
+ * @param  {Function} fn   Event listener.
+ */
+vjs.on = function(elem, type, fn){
+  var data = vjs.getData(elem);
+
+  // We need a place to store all our handler data
+  if (!data.handlers) data.handlers = {};
+
+  if (!data.handlers[type]) data.handlers[type] = [];
+
+  if (!fn.guid) fn.guid = vjs.guid++;
+
+  data.handlers[type].push(fn);
+
+  if (!data.dispatcher) {
+    data.disabled = false;
+
+    data.dispatcher = function (event){
+
+      if (data.disabled) return;
+      event = vjs.fixEvent(event);
+
+      var handlers = data.handlers[event.type];
+
+      if (handlers) {
+        // Copy handlers so if handlers are added/removed during the process it doesn't throw everything off.
+        var handlersCopy = handlers.slice(0);
+
+        for (var m = 0, n = handlersCopy.length; m < n; m++) {
+          if (event.isImmediatePropagationStopped()) {
+            break;
+          } else {
+            handlersCopy[m].call(elem, event);
+          }
+        }
+      }
+    };
+  }
+
+  if (data.handlers[type].length == 1) {
+    if (document.addEventListener) {
+      elem.addEventListener(type, data.dispatcher, false);
+    } else if (document.attachEvent) {
+      elem.attachEvent('on' + type, data.dispatcher);
+    }
+  }
+};
+
+/**
+ * Removes event listeners from an element
+ * @param  {Element|Object}   elem Object to remove listeners from
+ * @param  {String=}   type Type of listener to remove. Don't include to remove all events from element.
+ * @param  {Function} fn   Specific listener to remove. Don't incldue to remove listeners for an event type.
+ */
+vjs.off = function(elem, type, fn) {
+  // Don't want to add a cache object through getData if not needed
+  if (!vjs.hasData(elem)) return;
+
+  var data = vjs.getData(elem);
+
+  // If no events exist, nothing to unbind
+  if (!data.handlers) { return; }
+
+  // Utility function
+  var removeType = function(t){
+     data.handlers[t] = [];
+     vjs.cleanUpEvents(elem,t);
+  };
+
+  // Are we removing all bound events?
+  if (!type) {
+    for (var t in data.handlers) removeType(t);
+    return;
+  }
+
+  var handlers = data.handlers[type];
+
+  // If no handlers exist, nothing to unbind
+  if (!handlers) return;
+
+  // If no listener was provided, remove all listeners for type
+  if (!fn) {
+    removeType(type);
+    return;
+  }
+
+  // We're only removing a single handler
+  if (fn.guid) {
+    for (var n = 0; n < handlers.length; n++) {
+      if (handlers[n].guid === fn.guid) {
+        handlers.splice(n--, 1);
+      }
+    }
+  }
+
+  vjs.cleanUpEvents(elem, type);
+};
+
+/**
+ * Clean up the listener cache and dispatchers
+ * @param  {Element|Object} elem Element to clean up
+ * @param  {String} type Type of event to clean up
+ */
+vjs.cleanUpEvents = function(elem, type) {
+  var data = vjs.getData(elem);
+
+  // Remove the events of a particular type if there are none left
+  if (data.handlers[type].length === 0) {
+    delete data.handlers[type];
+    // data.handlers[type] = null;
+    // Setting to null was causing an error with data.handlers
+
+    // Remove the meta-handler from the element
+    if (document.removeEventListener) {
+      elem.removeEventListener(type, data.dispatcher, false);
+    } else if (document.detachEvent) {
+      elem.detachEvent('on' + type, data.dispatcher);
+    }
+  }
+
+  // Remove the events object if there are no types left
+  if (vjs.isEmpty(data.handlers)) {
+    delete data.handlers;
+    delete data.dispatcher;
+    delete data.disabled;
+
+    // data.handlers = null;
+    // data.dispatcher = null;
+    // data.disabled = null;
+  }
+
+  // Finally remove the expando if there is no data left
+  if (vjs.isEmpty(data)) {
+    vjs.removeData(elem);
+  }
+};
+
+/**
+ * Fix a native event to have standard property values
+ * @param  {Object} event Event object to fix
+ * @return {Object}
+ */
+vjs.fixEvent = function(event) {
+
+  function returnTrue() { return true; }
+  function returnFalse() { return false; }
+
+  // Test if fixing up is needed
+  // Used to check if !event.stopPropagation instead of isPropagationStopped
+  // But native events return true for stopPropagation, but don't have
+  // other expected methods like isPropagationStopped. Seems to be a problem
+  // with the Javascript Ninja code. So we're just overriding all events now.
+  if (!event || !event.isPropagationStopped) {
+    var old = event || window.event;
+
+    event = {};
+    // Clone the old object so that we can modify the values event = {};
+    // IE8 Doesn't like when you mess with native event properties
+    // Firefox returns false for event.hasOwnProperty('type') and other props
+    //  which makes copying more difficult.
+    // TODO: Probably best to create a whitelist of event props
+    for (var key in old) {
+      // Safari 6.0.3 warns you if you try to copy deprecated layerX/Y
+      if (key !== 'layerX' && key !== 'layerY') {
+        event[key] = old[key];
+      }
+    }
+
+    // The event occurred on this element
+    if (!event.target) {
+      event.target = event.srcElement || document;
+    }
+
+    // Handle which other element the event is related to
+    event.relatedTarget = event.fromElement === event.target ?
+      event.toElement :
+      event.fromElement;
+
+    // Stop the default browser action
+    event.preventDefault = function () {
+      if (old.preventDefault) {
+        old.preventDefault();
+      }
+      event.returnValue = false;
+      event.isDefaultPrevented = returnTrue;
+    };
+
+    event.isDefaultPrevented = returnFalse;
+
+    // Stop the event from bubbling
+    event.stopPropagation = function () {
+      if (old.stopPropagation) {
+        old.stopPropagation();
+      }
+      event.cancelBubble = true;
+      event.isPropagationStopped = returnTrue;
+    };
+
+    event.isPropagationStopped = returnFalse;
+
+    // Stop the event from bubbling and executing other handlers
+    event.stopImmediatePropagation = function () {
+      if (old.stopImmediatePropagation) {
+        old.stopImmediatePropagation();
+      }
+      event.isImmediatePropagationStopped = returnTrue;
+      event.stopPropagation();
+    };
+
+    event.isImmediatePropagationStopped = returnFalse;
+
+    // Handle mouse position
+    if (event.clientX != null) {
+      var doc = document.documentElement, body = document.body;
+
+      event.pageX = event.clientX +
+        (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
+        (doc && doc.clientLeft || body && body.clientLeft || 0);
+      event.pageY = event.clientY +
+        (doc && doc.scrollTop || body && body.scrollTop || 0) -
+        (doc && doc.clientTop || body && body.clientTop || 0);
+    }
+
+    // Handle key presses
+    event.which = event.charCode || event.keyCode;
+
+    // Fix button for mouse clicks:
+    // 0 == left; 1 == middle; 2 == right
+    if (event.button != null) {
+      event.button = (event.button & 1 ? 0 :
+        (event.button & 4 ? 1 :
+          (event.button & 2 ? 2 : 0)));
+    }
+  }
+
+  // Returns fixed-up instance
+  return event;
+};
+
+/**
+ * Trigger an event for an element
+ * @param  {Element|Object} elem  Element to trigger an event on
+ * @param  {String} event Type of event to trigger
+ */
+vjs.trigger = function(elem, event) {
+  // Fetches element data and a reference to the parent (for bubbling).
+  // Don't want to add a data object to cache for every parent,
+  // so checking hasData first.
+  var elemData = (vjs.hasData(elem)) ? vjs.getData(elem) : {};
+  var parent = elem.parentNode || elem.ownerDocument;
+      // type = event.type || event,
+      // handler;
+
+  // If an event name was passed as a string, creates an event out of it
+  if (typeof event === 'string') {
+    event = { type:event, target:elem };
+  }
+  // Normalizes the event properties.
+  event = vjs.fixEvent(event);
+
+  // If the passed element has a dispatcher, executes the established handlers.
+  if (elemData.dispatcher) {
+    elemData.dispatcher.call(elem, event);
+  }
+
+  // Unless explicitly stopped or the event does not bubble (e.g. media events)
+    // recursively calls this function to bubble the event up the DOM.
+    if (parent && !event.isPropagationStopped() && event.bubbles !== false) {
+    vjs.trigger(parent, event);
+
+  // If at the top of the DOM, triggers the default action unless disabled.
+  } else if (!parent && !event.isDefaultPrevented()) {
+    var targetData = vjs.getData(event.target);
+
+    // Checks if the target has a default action for this event.
+    if (event.target[event.type]) {
+      // Temporarily disables event dispatching on the target as we have already executed the handler.
+      targetData.disabled = true;
+      // Executes the default action.
+      if (typeof event.target[event.type] === 'function') {
+        event.target[event.type]();
+      }
+      // Re-enables event dispatching.
+      targetData.disabled = false;
+    }
+  }
+
+  // Inform the triggerer if the default was prevented by returning false
+  return !event.isDefaultPrevented();
+  /* Original version of js ninja events wasn't complete.
+   * We've since updated to the latest version, but keeping this around
+   * for now just in case.
+   */
+  // // Added in attion to book. Book code was broke.
+  // event = typeof event === 'object' ?
+  //   event[vjs.expando] ?
+  //     event :
+  //     new vjs.Event(type, event) :
+  //   new vjs.Event(type);
+
+  // event.type = type;
+  // if (handler) {
+  //   handler.call(elem, event);
+  // }
+
+  // // Clean up the event in case it is being reused
+  // event.result = undefined;
+  // event.target = elem;
+};
+
+/**
+ * Trigger a listener only once for an event
+ * @param  {Element|Object}   elem Element or object to
+ * @param  {[type]}   type [description]
+ * @param  {Function} fn   [description]
+ * @return {[type]}
+ */
+vjs.one = function(elem, type, fn) {
+  var func = function(){
+    vjs.off(elem, type, func);
+    fn.apply(this, arguments);
+  };
+  func.guid = fn.guid = fn.guid || vjs.guid++;
+  vjs.on(elem, type, func);
+};

src/js/exports.js

@@ -0,0 +1,142 @@
+/**
+ * @fileoverview Exports for Video.js.
+ * Exports are publically available variables.
+ * All other variables (including function names) will probably
+ * be renamed by closure compiler.
+ */
+
+/**
+ * vjs (internal only) = videojs = _V_ (external only)
+ *
+ * vjs is the same as the goog var in Closure Library. It holds all variables
+ * used in Video.js development. Closure compiler will rename all variables,
+ * including class prototype functions, except those specifcally
+ * exported (eports.js). Don't assume any function you can use in Video.js
+ * development will be available on window.videojs for use with other js.
+ *
+ * For example, vjs.trim is an internal function and will be renamed by compiler
+ * to something like 'a.b', or actually more likely 'a' removing it from
+ * a parent object.
+ *
+ * videojs is a var that helps bridge bewteen internal and external development.
+ * Avoid using it over vjs when developing the Video.js core.
+ *
+ * _V_ is only external. It's just cute and short(er). Like jQuery === $.
+ * Also because it's nice having a different var for internal (vjs) vs.
+ * external (_V_) because it makes it clearer what context we're in.
+ */
+goog.exportSymbol('videojs', vjs);
+goog.exportSymbol('_V_', vjs);
+
+goog.exportSymbol('videojs.options', vjs.options);
+goog.exportSymbol('videojs.players', vjs.players);
+
+// Allow external components to use global cache
+goog.exportSymbol('videojs.cache', vjs.cache);
+
+// goog.exportSymbol('videojs.CoreObject', vjs.CoreObject);
+// goog.exportProperty(vjs.CoreObject, 'create', vjs.CoreObject.create);
+
+goog.exportSymbol('videojs.Component', vjs.Component);
+goog.exportProperty(vjs.Component.prototype, 'player', vjs.Component.prototype.player);
+goog.exportProperty(vjs.Component.prototype, 'dispose', vjs.Component.prototype.dispose);
+goog.exportProperty(vjs.Component.prototype, 'createEl', vjs.Component.prototype.createEl);
+goog.exportProperty(vjs.Component.prototype, 'el', vjs.Component.prototype.el);
+goog.exportProperty(vjs.Component.prototype, 'addChild', vjs.Component.prototype.addChild);
+goog.exportProperty(vjs.Component.prototype, 'children', vjs.Component.prototype.children);
+goog.exportProperty(vjs.Component.prototype, 'on', vjs.Component.prototype.on);
+goog.exportProperty(vjs.Component.prototype, 'off', vjs.Component.prototype.off);
+goog.exportProperty(vjs.Component.prototype, 'one', vjs.Component.prototype.one);
+goog.exportProperty(vjs.Component.prototype, 'trigger', vjs.Component.prototype.trigger);
+goog.exportProperty(vjs.Component.prototype, 'triggerReady', vjs.Component.prototype.triggerReady);
+goog.exportProperty(vjs.Component.prototype, 'show', vjs.Component.prototype.show);
+goog.exportProperty(vjs.Component.prototype, 'hide', vjs.Component.prototype.hide);
+goog.exportProperty(vjs.Component.prototype, 'width', vjs.Component.prototype.width);
+goog.exportProperty(vjs.Component.prototype, 'height', vjs.Component.prototype.height);
+goog.exportProperty(vjs.Component.prototype, 'dimensions', vjs.Component.prototype.dimensions);
+goog.exportProperty(vjs.Component.prototype, 'ready', vjs.Component.prototype.ready);
+goog.exportProperty(vjs.Component.prototype, 'addClass', vjs.Component.prototype.addClass);
+goog.exportProperty(vjs.Component.prototype, 'removeClass', vjs.Component.prototype.removeClass);
+
+goog.exportSymbol('videojs.Player', vjs.Player);
+goog.exportProperty(vjs.Player.prototype, 'dispose', vjs.Player.prototype.dispose);
+goog.exportProperty(vjs.Player.prototype, 'requestFullScreen', vjs.Player.prototype.requestFullScreen);
+goog.exportProperty(vjs.Player.prototype, 'cancelFullScreen', vjs.Player.prototype.cancelFullScreen);
+goog.exportProperty(vjs.Player.prototype, 'bufferedPercent', vjs.Player.prototype.bufferedPercent);
+goog.exportProperty(vjs.Player.prototype, 'usingNativeControls', vjs.Player.prototype.usingNativeControls);
+
+goog.exportSymbol('videojs.MediaLoader', vjs.MediaLoader);
+goog.exportSymbol('videojs.TextTrackDisplay', vjs.TextTrackDisplay);
+
+goog.exportSymbol('videojs.ControlBar', vjs.ControlBar);
+goog.exportSymbol('videojs.Button', vjs.Button);
+goog.exportSymbol('videojs.PlayToggle', vjs.PlayToggle);
+goog.exportSymbol('videojs.FullscreenToggle', vjs.FullscreenToggle);
+goog.exportSymbol('videojs.BigPlayButton', vjs.BigPlayButton);
+goog.exportSymbol('videojs.LoadingSpinner', vjs.LoadingSpinner);
+goog.exportSymbol('videojs.CurrentTimeDisplay', vjs.CurrentTimeDisplay);
+goog.exportSymbol('videojs.DurationDisplay', vjs.DurationDisplay);
+goog.exportSymbol('videojs.TimeDivider', vjs.TimeDivider);
+goog.exportSymbol('videojs.RemainingTimeDisplay', vjs.RemainingTimeDisplay);
+goog.exportSymbol('videojs.Slider', vjs.Slider);
+goog.exportSymbol('videojs.ProgressControl', vjs.ProgressControl);
+goog.exportSymbol('videojs.SeekBar', vjs.SeekBar);
+goog.exportSymbol('videojs.LoadProgressBar', vjs.LoadProgressBar);
+goog.exportSymbol('videojs.PlayProgressBar', vjs.PlayProgressBar);
+goog.exportSymbol('videojs.SeekHandle', vjs.SeekHandle);
+goog.exportSymbol('videojs.VolumeControl', vjs.VolumeControl);
+goog.exportSymbol('videojs.VolumeBar', vjs.VolumeBar);
+goog.exportSymbol('videojs.VolumeLevel', vjs.VolumeLevel);
+goog.exportSymbol('videojs.VolumeMenuButton', vjs.VolumeMenuButton);
+goog.exportSymbol('videojs.VolumeHandle', vjs.VolumeHandle);
+goog.exportSymbol('videojs.MuteToggle', vjs.MuteToggle);
+goog.exportSymbol('videojs.PosterImage', vjs.PosterImage);
+goog.exportSymbol('videojs.Menu', vjs.Menu);
+goog.exportSymbol('videojs.MenuItem', vjs.MenuItem);
+goog.exportSymbol('videojs.MenuButton', vjs.MenuButton);
+goog.exportProperty(vjs.MenuButton.prototype, 'createItems', vjs.MenuButton.prototype.createItems);
+goog.exportProperty(vjs.TextTrackButton.prototype, 'createItems', vjs.TextTrackButton.prototype.createItems);
+goog.exportProperty(vjs.ChaptersButton.prototype, 'createItems', vjs.ChaptersButton.prototype.createItems);
+
+goog.exportSymbol('videojs.SubtitlesButton', vjs.SubtitlesButton);
+goog.exportSymbol('videojs.CaptionsButton', vjs.CaptionsButton);
+goog.exportSymbol('videojs.ChaptersButton', vjs.ChaptersButton);
+
+goog.exportSymbol('videojs.MediaTechController', vjs.MediaTechController);
+goog.exportProperty(vjs.MediaTechController.prototype, 'features', vjs.MediaTechController.prototype.features);
+goog.exportProperty(vjs.MediaTechController.prototype.features, 'volumeControl', vjs.MediaTechController.prototype.features.volumeControl);
+goog.exportProperty(vjs.MediaTechController.prototype.features, 'fullscreenResize', vjs.MediaTechController.prototype.features.fullscreenResize);
+goog.exportProperty(vjs.MediaTechController.prototype.features, 'progressEvents', vjs.MediaTechController.prototype.features.progressEvents);
+goog.exportProperty(vjs.MediaTechController.prototype.features, 'timeupdateEvents', vjs.MediaTechController.prototype.features.timeupdateEvents);
+
+goog.exportSymbol('videojs.Html5', vjs.Html5);
+goog.exportProperty(vjs.Html5, 'Events', vjs.Html5.Events);
+goog.exportProperty(vjs.Html5, 'isSupported', vjs.Html5.isSupported);
+goog.exportProperty(vjs.Html5, 'canPlaySource', vjs.Html5.canPlaySource);
+
+// Export non-standard HTML5 video API methods.
+// Standard method names already protected by default externs.
+goog.exportProperty(vjs.Html5.prototype, 'setCurrentTime', vjs.Html5.prototype.setCurrentTime);
+goog.exportProperty(vjs.Html5.prototype, 'setVolume', vjs.Html5.prototype.setVolume);
+goog.exportProperty(vjs.Html5.prototype, 'setMuted', vjs.Html5.prototype.setMuted);
+goog.exportProperty(vjs.Html5.prototype, 'setPreload', vjs.Html5.prototype.setPreload);
+goog.exportProperty(vjs.Html5.prototype, 'setAutoplay', vjs.Html5.prototype.setAutoplay);
+goog.exportProperty(vjs.Html5.prototype, 'setLoop', vjs.Html5.prototype.setLoop);
+
+goog.exportSymbol('videojs.Flash', vjs.Flash);
+goog.exportProperty(vjs.Flash, 'isSupported', vjs.Flash.isSupported);
+goog.exportProperty(vjs.Flash, 'canPlaySource', vjs.Flash.canPlaySource);
+goog.exportProperty(vjs.Flash, 'onReady', vjs.Flash['onReady']);
+
+goog.exportSymbol('videojs.TextTrack', vjs.TextTrack);
+goog.exportProperty(vjs.TextTrack.prototype, 'label', vjs.TextTrack.prototype.label);
+
+goog.exportSymbol('videojs.CaptionsTrack', vjs.CaptionsTrack);
+goog.exportSymbol('videojs.SubtitlesTrack', vjs.SubtitlesTrack);
+goog.exportSymbol('videojs.ChaptersTrack', vjs.ChaptersTrack);
+
+goog.exportSymbol('videojs.autoSetup', vjs.autoSetup);
+
+goog.exportSymbol('videojs.plugin', vjs.plugin);
+
+goog.exportSymbol('videojs.createTimeRange', vjs.createTimeRange);

src/js/json.js

@@ -0,0 +1,69 @@
+/**
+ * @fileoverview Add JSON support
+ * @suppress {undefinedVars}
+ * (Compiler doesn't like JSON not being declared)
+ */
+
+/**
+ * Javascript JSON implementation
+ * (Parse Method Only)
+ * https://github.com/douglascrockford/JSON-js/blob/master/json2.js
+ * Only using for parse method when parsing data-setup attribute JSON.
+ * @type {Object}
+ * @suppress {undefinedVars}
+ */
+vjs.JSON;
+
+/**
+ * @suppress {undefinedVars}
+ */
+if (typeof window.JSON !== 'undefined' && window.JSON.parse === 'function') {
+  vjs.JSON = window.JSON;
+
+} else {
+  vjs.JSON = {};
+
+  var cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g;
+
+  vjs.JSON.parse = function (text, reviver) {
+      var j;
+
+      function walk(holder, key) {
+          var k, v, value = holder[key];
+          if (value && typeof value === 'object') {
+              for (k in value) {
+                  if (Object.prototype.hasOwnProperty.call(value, k)) {
+                      v = walk(value, k);
+                      if (v !== undefined) {
+                          value[k] = v;
+                      } else {
+                          delete value[k];
+                      }
+                  }
+              }
+          }
+          return reviver.call(holder, key, value);
+      }
+      text = String(text);
+      cx.lastIndex = 0;
+      if (cx.test(text)) {
+          text = text.replace(cx, function (a) {
+              return '\\u' +
+                  ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
+          });
+      }
+
+      if (/^[\],:{}\s]*$/
+              .test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, '@')
+                  .replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']')
+                  .replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {
+
+          j = eval('(' + text + ')');
+
+          return typeof reviver === 'function' ?
+              walk({'': j}, '') : j;
+      }
+
+      throw new SyntaxError('JSON.parse(): invalid or malformed JSON data');
+  };
+}

src/js/lib.js

@@ -0,0 +1,657 @@
+var hasOwnProp = Object.prototype.hasOwnProperty;
+
+/**
+ * Creates an element and applies properties.
+ * @param  {String=} tagName    Name of tag to be created.
+ * @param  {Object=} properties Element properties to be applied.
+ * @return {Element}
+ */
+vjs.createEl = function(tagName, properties){
+  var el, propName;
+
+  el = document.createElement(tagName || 'div');
+
+  for (propName in properties){
+    if (hasOwnProp.call(properties, propName)) {
+      //el[propName] = properties[propName];
+      // Not remembering why we were checking for dash
+      // but using setAttribute means you have to use getAttribute
+
+      // The check for dash checks for the aria-* attributes, like aria-label, aria-valuemin.
+      // The additional check for "role" is because the default method for adding attributes does not
+      // add the attribute "role". My guess is because it's not a valid attribute in some namespaces, although
+      // browsers handle the attribute just fine. The W3C allows for aria-* attributes to be used in pre-HTML5 docs.
+      // http://www.w3.org/TR/wai-aria-primer/#ariahtml. Using setAttribute gets around this problem.
+
+       if (propName.indexOf('aria-') !== -1 || propName=='role') {
+         el.setAttribute(propName, properties[propName]);
+       } else {
+         el[propName] = properties[propName];
+       }
+    }
+  }
+  return el;
+};
+
+/**
+ * Uppercase the first letter of a string
+ * @param  {String} string String to be uppercased
+ * @return {String}
+ */
+vjs.capitalize = function(string){
+  return string.charAt(0).toUpperCase() + string.slice(1);
+};
+
+/**
+ * Object functions container
+ * @type {Object}
+ */
+vjs.obj = {};
+
+/**
+ * Object.create shim for prototypal inheritance.
+ * https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/create
+ * @param  {Object}   obj Object to use as prototype
+ */
+ vjs.obj.create = Object.create || function(obj){
+  //Create a new function called 'F' which is just an empty object.
+  function F() {}
+
+  //the prototype of the 'F' function should point to the
+  //parameter of the anonymous function.
+  F.prototype = obj;
+
+  //create a new constructor function based off of the 'F' function.
+  return new F();
+};
+
+/**
+ * Loop through each property in an object and call a function
+ * whose arguments are (key,value)
+ * @param  {Object}   obj Object of properties
+ * @param  {Function} fn  Function to be called on each property.
+ * @this {*}
+ */
+vjs.obj.each = function(obj, fn, context){
+  for (var key in obj) {
+    if (hasOwnProp.call(obj, key)) {
+      fn.call(context || this, key, obj[key]);
+    }
+  }
+};
+
+/**
+ * Merge two objects together and return the original.
+ * @param  {Object} obj1
+ * @param  {Object} obj2
+ * @return {Object}
+ */
+vjs.obj.merge = function(obj1, obj2){
+  if (!obj2) { return obj1; }
+  for (var key in obj2){
+    if (hasOwnProp.call(obj2, key)) {
+      obj1[key] = obj2[key];
+    }
+  }
+  return obj1;
+};
+
+/**
+ * Merge two objects, and merge any properties that are objects
+ * instead of just overwriting one. Uses to merge options hashes
+ * where deeper default settings are important.
+ * @param  {Object} obj1 Object to override
+ * @param  {Object} obj2 Overriding object
+ * @return {Object}      New object. Obj1 and Obj2 will be untouched.
+ */
+vjs.obj.deepMerge = function(obj1, obj2){
+  var key, val1, val2;
+
+  // make a copy of obj1 so we're not ovewriting original values.
+  // like prototype.options_ and all sub options objects
+  obj1 = vjs.obj.copy(obj1);
+
+  for (key in obj2){
+    if (hasOwnProp.call(obj2, key)) {
+      val1 = obj1[key];
+      val2 = obj2[key];
+
+      // Check if both properties are pure objects and do a deep merge if so
+      if (vjs.obj.isPlain(val1) && vjs.obj.isPlain(val2)) {
+        obj1[key] = vjs.obj.deepMerge(val1, val2);
+      } else {
+        obj1[key] = obj2[key];
+      }
+    }
+  }
+  return obj1;
+};
+
+/**
+ * Make a copy of the supplied object
+ * @param  {Object} obj Object to copy
+ * @return {Object}     Copy of object
+ */
+vjs.obj.copy = function(obj){
+  return vjs.obj.merge({}, obj);
+};
+
+/**
+ * Check if an object is plain, and not a dom node or any object sub-instance
+ * @param  {Object} obj Object to check
+ * @return {Boolean}     True if plain, false otherwise
+ */
+vjs.obj.isPlain = function(obj){
+  return !!obj
+    && typeof obj === 'object'
+    && obj.toString() === '[object Object]'
+    && obj.constructor === Object;
+};
+
+/**
+ * Bind (a.k.a proxy or Context). A simple method for changing the context of a function
+   It also stores a unique id on the function so it can be easily removed from events
+ * @param  {*}   context The object to bind as scope
+ * @param  {Function} fn      The function to be bound to a scope
+ * @param  {Number=}   uid     An optional unique ID for the function to be set
+ * @return {Function}
+ */
+vjs.bind = function(context, fn, uid) {
+  // Make sure the function has a unique ID
+  if (!fn.guid) { fn.guid = vjs.guid++; }
+
+  // Create the new function that changes the context
+  var ret = function() {
+    return fn.apply(context, arguments);
+  };
+
+  // Allow for the ability to individualize this function
+  // Needed in the case where multiple objects might share the same prototype
+  // IF both items add an event listener with the same function, then you try to remove just one
+  // it will remove both because they both have the same guid.
+  // when using this, you need to use the bind method when you remove the listener as well.
+  // currently used in text tracks
+  ret.guid = (uid) ? uid + '_' + fn.guid : fn.guid;
+
+  return ret;
+};
+
+/**
+ * Element Data Store. Allows for binding data to an element without putting it directly on the element.
+ * Ex. Event listneres are stored here.
+ * (also from jsninja.com, slightly modified and updated for closure compiler)
+ * @type {Object}
+ */
+vjs.cache = {};
+
+/**
+ * Unique ID for an element or function
+ * @type {Number}
+ */
+vjs.guid = 1;
+
+/**
+ * Unique attribute name to store an element's guid in
+ * @type {String}
+ * @constant
+ */
+vjs.expando = 'vdata' + (new Date()).getTime();
+
+/**
+ * Returns the cache object where data for an element is stored
+ * @param  {Element} el Element to store data for.
+ * @return {Object}
+ */
+vjs.getData = function(el){
+  var id = el[vjs.expando];
+  if (!id) {
+    id = el[vjs.expando] = vjs.guid++;
+    vjs.cache[id] = {};
+  }
+  return vjs.cache[id];
+};
+
+/**
+ * Returns the cache object where data for an element is stored
+ * @param  {Element} el Element to store data for.
+ * @return {Object}
+ */
+vjs.hasData = function(el){
+  var id = el[vjs.expando];
+  return !(!id || vjs.isEmpty(vjs.cache[id]));
+};
+
+/**
+ * Delete data for the element from the cache and the guid attr from getElementById
+ * @param  {Element} el Remove data for an element
+ */
+vjs.removeData = function(el){
+  var id = el[vjs.expando];
+  if (!id) { return; }
+  // Remove all stored data
+  // Changed to = null
+  // http://coding.smashingmagazine.com/2012/11/05/writing-fast-memory-efficient-javascript/
+  // vjs.cache[id] = null;
+  delete vjs.cache[id];
+
+  // Remove the expando property from the DOM node
+  try {
+    delete el[vjs.expando];
+  } catch(e) {
+    if (el.removeAttribute) {
+      el.removeAttribute(vjs.expando);
+    } else {
+      // IE doesn't appear to support removeAttribute on the document element
+      el[vjs.expando] = null;
+    }
+  }
+};
+
+vjs.isEmpty = function(obj) {
+  for (var prop in obj) {
+    // Inlude null properties as empty.
+    if (obj[prop] !== null) {
+      return false;
+    }
+  }
+  return true;
+};
+
+/**
+ * Add a CSS class name to an element
+ * @param {Element} element    Element to add class name to
+ * @param {String} classToAdd Classname to add
+ */
+vjs.addClass = function(element, classToAdd){
+  if ((' '+element.className+' ').indexOf(' '+classToAdd+' ') == -1) {
+    element.className = element.className === '' ? classToAdd : element.className + ' ' + classToAdd;
+  }
+};
+
+/**
+ * Remove a CSS class name from an element
+ * @param {Element} element    Element to remove from class name
+ * @param {String} classToAdd Classname to remove
+ */
+vjs.removeClass = function(element, classToRemove){
+  var classNames, i;
+
+  if (element.className.indexOf(classToRemove) == -1) { return; }
+
+  classNames = element.className.split(' ');
+
+  // no arr.indexOf in ie8, and we don't want to add a big shim
+  for (i = classNames.length - 1; i >= 0; i--) {
+    if (classNames[i] === classToRemove) {
+      classNames.splice(i,1);
+    }
+  }
+
+  element.className = classNames.join(' ');
+};
+
+/**
+ * Element for testing browser HTML5 video capabilities
+ * @type {Element}
+ * @constant
+ */
+vjs.TEST_VID = vjs.createEl('video');
+
+/**
+ * Useragent for browser testing.
+ * @type {String}
+ * @constant
+ */
+vjs.USER_AGENT = navigator.userAgent;
+
+/**
+ * Device is an iPhone
+ * @type {Boolean}
+ * @constant
+ */
+vjs.IS_IPHONE = (/iPhone/i).test(vjs.USER_AGENT);
+vjs.IS_IPAD = (/iPad/i).test(vjs.USER_AGENT);
+vjs.IS_IPOD = (/iPod/i).test(vjs.USER_AGENT);
+vjs.IS_IOS = vjs.IS_IPHONE || vjs.IS_IPAD || vjs.IS_IPOD;
+
+vjs.IOS_VERSION = (function(){
+  var match = vjs.USER_AGENT.match(/OS (\d+)_/i);
+  if (match && match[1]) { return match[1]; }
+})();
+
+vjs.IS_ANDROID = (/Android/i).test(vjs.USER_AGENT);
+vjs.ANDROID_VERSION = (function() {
+  // This matches Android Major.Minor.Patch versions
+  // ANDROID_VERSION is Major.Minor as a Number, if Minor isn't available, then only Major is returned
+  var match = vjs.USER_AGENT.match(/Android (\d+)(?:\.(\d+))?(?:\.(\d+))*/i),
+    major,
+    minor;
+
+  if (!match) {
+    return null;
+  }
+
+  major = match[1] && parseFloat(match[1]);
+  minor = match[2] && parseFloat(match[2]);
+
+  if (major && minor) {
+    return parseFloat(match[1] + '.' + match[2]);
+  } else if (major) {
+    return major;
+  } else {
+    return null;
+  }
+})();
+// Old Android is defined as Version older than 2.3, and requiring a webkit version of the android browser
+vjs.IS_OLD_ANDROID = vjs.IS_ANDROID && (/webkit/i).test(vjs.USER_AGENT) && vjs.ANDROID_VERSION < 2.3;
+
+vjs.IS_FIREFOX = (/Firefox/i).test(vjs.USER_AGENT);
+vjs.IS_CHROME = (/Chrome/i).test(vjs.USER_AGENT);
+
+vjs.TOUCH_ENABLED = ('ontouchstart' in window);
+
+/**
+ * Get an element's attribute values, as defined on the HTML tag
+ * Attributs are not the same as properties. They're defined on the tag
+ * or with setAttribute (which shouldn't be used with HTML)
+ * This will return true or false for boolean attributes.
+ * @param  {Element} tag Element from which to get tag attributes
+ * @return {Object}
+ */
+vjs.getAttributeValues = function(tag){
+  var obj, knownBooleans, attrs, attrName, attrVal;
+
+  obj = {};
+
+  // known boolean attributes
+  // we can check for matching boolean properties, but older browsers
+  // won't know about HTML5 boolean attributes that we still read from
+  knownBooleans = ','+'autoplay,controls,loop,muted,default'+',';
+
+  if (tag && tag.attributes && tag.attributes.length > 0) {
+    attrs = tag.attributes;
+
+    for (var i = attrs.length - 1; i >= 0; i--) {
+      attrName = attrs[i].name;
+      attrVal = attrs[i].value;
+
+      // check for known booleans
+      // the matching element property will return a value for typeof
+      if (typeof tag[attrName] === 'boolean' || knownBooleans.indexOf(','+attrName+',') !== -1) {
+        // the value of an included boolean attribute is typically an empty
+        // string ('') which would equal false if we just check for a false value.
+        // we also don't want support bad code like autoplay='false'
+        attrVal = (attrVal !== null) ? true : false;
+      }
+
+      obj[attrName] = attrVal;
+    }
+  }
+
+  return obj;
+};
+
+/**
+ * Get the computed style value for an element
+ * From http://robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/
+ * @param  {Element} el        Element to get style value for
+ * @param  {String} strCssRule Style name
+ * @return {String}            Style value
+ */
+vjs.getComputedDimension = function(el, strCssRule){
+  var strValue = '';
+  if(document.defaultView && document.defaultView.getComputedStyle){
+    strValue = document.defaultView.getComputedStyle(el, '').getPropertyValue(strCssRule);
+
+  } else if(el.currentStyle){
+    // IE8 Width/Height support
+    strValue = el['client'+strCssRule.substr(0,1).toUpperCase() + strCssRule.substr(1)] + 'px';
+  }
+  return strValue;
+};
+
+/**
+ * Insert an element as the first child node of another
+ * @param  {Element} child   Element to insert
+ * @param  {[type]} parent Element to insert child into
+ */
+vjs.insertFirst = function(child, parent){
+  if (parent.firstChild) {
+    parent.insertBefore(child, parent.firstChild);
+  } else {
+    parent.appendChild(child);
+  }
+};
+
+/**
+ * Object to hold browser support information
+ * @type {Object}
+ */
+vjs.support = {};
+
+/**
+ * Shorthand for document.getElementById()
+ * Also allows for CSS (jQuery) ID syntax. But nothing other than IDs.
+ * @param  {String} id  Element ID
+ * @return {Element}    Element with supplied ID
+ */
+vjs.el = function(id){
+  if (id.indexOf('#') === 0) {
+    id = id.slice(1);
+  }
+
+  return document.getElementById(id);
+};
+
+/**
+ * Format seconds as a time string, H:MM:SS or M:SS
+ * Supplying a guide (in seconds) will force a number of leading zeros
+ * to cover the length of the guide
+ * @param  {Number} seconds Number of seconds to be turned into a string
+ * @param  {Number} guide   Number (in seconds) to model the string after
+ * @return {String}         Time formatted as H:MM:SS or M:SS
+ */
+vjs.formatTime = function(seconds, guide) {
+  // Default to using seconds as guide
+  guide = guide || seconds;
+  var s = Math.floor(seconds % 60),
+      m = Math.floor(seconds / 60 % 60),
+      h = Math.floor(seconds / 3600),
+      gm = Math.floor(guide / 60 % 60),
+      gh = Math.floor(guide / 3600);
+
+  // handle invalid times
+  if (isNaN(seconds) || seconds === Infinity) {
+    // '-' is false for all relational operators (e.g. <, >=) so this setting
+    // will add the minimum number of fields specified by the guide
+    h = m = s = '-';
+  }
+
+  // Check if we need to show hours
+  h = (h > 0 || gh > 0) ? h + ':' : '';
+
+  // If hours are showing, we may need to add a leading zero.
+  // Always show at least one digit of minutes.
+  m = (((h || gm >= 10) && m < 10) ? '0' + m : m) + ':';
+
+  // Check if leading zero is need for seconds
+  s = (s < 10) ? '0' + s : s;
+
+  return h + m + s;
+};
+
+// Attempt to block the ability to select text while dragging controls
+vjs.blockTextSelection = function(){
+  document.body.focus();
+  document.onselectstart = function () { return false; };
+};
+// Turn off text selection blocking
+vjs.unblockTextSelection = function(){ document.onselectstart = function () { return true; }; };
+
+/**
+ * Trim whitespace from the ends of a string.
+ * @param  {String} string String to trim
+ * @return {String}        Trimmed string
+ */
+vjs.trim = function(str){
+  return (str+'').replace(/^\s+|\s+$/g, '');
+};
+
+/**
+ * Should round off a number to a decimal place
+ * @param  {Number} num Number to round
+ * @param  {Number} dec Number of decimal places to round to
+ * @return {Number}     Rounded number
+ */
+vjs.round = function(num, dec) {
+  if (!dec) { dec = 0; }
+  return Math.round(num*Math.pow(10,dec))/Math.pow(10,dec);
+};
+
+/**
+ * Should create a fake TimeRange object
+ * Mimics an HTML5 time range instance, which has functions that
+ * return the start and end times for a range
+ * TimeRanges are returned by the buffered() method
+ * @param  {Number} start Start time in seconds
+ * @param  {Number} end   End time in seconds
+ * @return {Object}       Fake TimeRange object
+ */
+vjs.createTimeRange = function(start, end){
+  return {
+    length: 1,
+    start: function() { return start; },
+    end: function() { return end; }
+  };
+};
+
+/**
+ * Simple http request for retrieving external files (e.g. text tracks)
+ * @param  {String} url           URL of resource
+ * @param  {Function=} onSuccess  Success callback
+ * @param  {Function=} onError    Error callback
+ */
+vjs.get = function(url, onSuccess, onError){
+  var local, request;
+
+  if (typeof XMLHttpRequest === 'undefined') {
+    window.XMLHttpRequest = function () {
+      try { return new window.ActiveXObject('Msxml2.XMLHTTP.6.0'); } catch (e) {}
+      try { return new window.ActiveXObject('Msxml2.XMLHTTP.3.0'); } catch (f) {}
+      try { return new window.ActiveXObject('Msxml2.XMLHTTP'); } catch (g) {}
+      throw new Error('This browser does not support XMLHttpRequest.');
+    };
+  }
+
+  request = new XMLHttpRequest();
+  try {
+    request.open('GET', url);
+  } catch(e) {
+    onError(e);
+  }
+
+  local = (url.indexOf('file:') === 0 || (window.location.href.indexOf('file:') === 0 && url.indexOf('http') === -1));
+
+  request.onreadystatechange = function() {
+    if (request.readyState === 4) {
+      if (request.status === 200 || local && request.status === 0) {
+        onSuccess(request.responseText);
+      } else {
+        if (onError) {
+          onError();
+        }
+      }
+    }
+  };
+
+  try {
+    request.send();
+  } catch(e) {
+    if (onError) {
+      onError(e);
+    }
+  }
+};
+
+/* Local Storage
+================================================================================ */
+vjs.setLocalStorage = function(key, value){
+  try {
+    // IE was throwing errors referencing the var anywhere without this
+    var localStorage = window.localStorage || false;
+    if (!localStorage) { return; }
+    localStorage[key] = value;
+  } catch(e) {
+    if (e.code == 22 || e.code == 1014) { // Webkit == 22 / Firefox == 1014
+      vjs.log('LocalStorage Full (VideoJS)', e);
+    } else {
+      if (e.code == 18) {
+        vjs.log('LocalStorage not allowed (VideoJS)', e);
+      } else {
+        vjs.log('LocalStorage Error (VideoJS)', e);
+      }
+    }
+  }
+};
+
+/**
+ * Get abosolute version of relative URL. Used to tell flash correct URL.
+ * http://stackoverflow.com/questions/470832/getting-an-absolute-url-from-a-relative-one-ie6-issue
+ * @param  {String} url URL to make absolute
+ * @return {String}     Absolute URL
+ */
+vjs.getAbsoluteURL = function(url){
+
+  // Check if absolute URL
+  if (!url.match(/^https?:\/\//)) {
+    // Convert to absolute URL. Flash hosted off-site needs an absolute URL.
+    url = vjs.createEl('div', {
+      innerHTML: '<a href="'+url+'">x</a>'
+    }).firstChild.href;
+  }
+
+  return url;
+};
+
+// usage: log('inside coolFunc',this,arguments);
+// http://paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
+vjs.log = function(){
+  vjs.log.history = vjs.log.history || [];   // store logs to an array for reference
+  vjs.log.history.push(arguments);
+  if(window.console){
+    window.console.log(Array.prototype.slice.call(arguments));
+  }
+};
+
+// Offset Left
+// getBoundingClientRect technique from John Resig http://ejohn.org/blog/getboundingclientrect-is-awesome/
+vjs.findPosition = function(el) {
+    var box, docEl, body, clientLeft, scrollLeft, left, clientTop, scrollTop, top;
+
+    if (el.getBoundingClientRect && el.parentNode) {
+      box = el.getBoundingClientRect();
+    }
+
+    if (!box) {
+      return {
+        left: 0,
+        top: 0
+      };
+    }
+
+    docEl = document.documentElement;
+    body = document.body;
+
+    clientLeft = docEl.clientLeft || body.clientLeft || 0;
+    scrollLeft = window.pageXOffset || body.scrollLeft;
+    left = box.left + scrollLeft - clientLeft;
+
+    clientTop = docEl.clientTop || body.clientTop || 0;
+    scrollTop = window.pageYOffset || body.scrollTop;
+    top = box.top + scrollTop - clientTop;
+
+    return {
+      left: left,
+      top: top
+    };
+};

src/js/loading-spinner.js

@@ -0,0 +1,40 @@
+/* Loading Spinner
+================================================================================ */
+/**
+ * Loading spinner for waiting events
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.LoadingSpinner = vjs.Component.extend({
+  /** @constructor */
+  init: function(player, options){
+    vjs.Component.call(this, player, options);
+
+    player.on('canplay', vjs.bind(this, this.hide));
+    player.on('canplaythrough', vjs.bind(this, this.hide));
+    player.on('playing', vjs.bind(this, this.hide));
+    player.on('seeked', vjs.bind(this, this.hide));
+
+    player.on('seeking', vjs.bind(this, this.show));
+
+    // in some browsers seeking does not trigger the 'playing' event,
+    // so we also need to trap 'seeked' if we are going to set a
+    // 'seeking' event
+    player.on('seeked', vjs.bind(this, this.hide));
+
+    player.on('error', vjs.bind(this, this.show));
+
+    // Not showing spinner on stalled any more. Browsers may stall and then not trigger any events that would remove the spinner.
+    // Checked in Chrome 16 and Safari 5.1.2. http://help.videojs.com/discussions/problems/883-why-is-the-download-progress-showing
+    // player.on('stalled', vjs.bind(this, this.show));
+
+    player.on('waiting', vjs.bind(this, this.show));
+  }
+});
+
+vjs.LoadingSpinner.prototype.createEl = function(){
+  return vjs.Component.prototype.createEl.call(this, 'div', {
+    className: 'vjs-loading-spinner'
+  });
+};

src/js/media/flash.externs.js

@@ -0,0 +1,27 @@
+/**
+ * @fileoverview Externs for video-js.swf. Externs are functions
+ * that the compiler shouldn't obfuscate.
+ */
+
+/**
+ * @param {string} name
+ */
+HTMLObjectElement.prototype.vjs_getProperty = function(name) {};
+
+/**
+ * @param {string} name
+ * @param {string|number} value
+ */
+HTMLObjectElement.prototype.vjs_setProperty = function(name, value) {};
+
+/**
+ * Control methods
+ */
+HTMLObjectElement.prototype.vjs_play = function() {};
+HTMLObjectElement.prototype.vjs_pause = function() {};
+HTMLObjectElement.prototype.vjs_load = function() {};
+
+/**
+ * @param {string} src
+ */
+HTMLObjectElement.prototype.vjs_src = function(src) {};

src/js/media/flash.js

@@ -0,0 +1,529 @@
+/**
+ * @fileoverview VideoJS-SWF - Custom Flash Player with HTML5-ish API
+ * https://github.com/zencoder/video-js-swf
+ * Not using setupTriggers. Using global onEvent func to distribute events
+ */
+
+/**
+ * HTML5 Media Controller - Wrapper for HTML5 Media API
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @param {Function=} ready
+ * @constructor
+ */
+vjs.Flash = vjs.MediaTechController.extend({
+  /** @constructor */
+  init: function(player, options, ready){
+    vjs.MediaTechController.call(this, player, options, ready);
+
+    var source = options['source'],
+
+        // Which element to embed in
+        parentEl = options['parentEl'],
+
+        // Create a temporary element to be replaced by swf object
+        placeHolder = this.el_ = vjs.createEl('div', { id: player.id() + '_temp_flash' }),
+
+        // Generate ID for swf object
+        objId = player.id()+'_flash_api',
+
+        // Store player options in local var for optimization
+        // TODO: switch to using player methods instead of options
+        // e.g. player.autoplay();
+        playerOptions = player.options_,
+
+        // Merge default flashvars with ones passed in to init
+        flashVars = vjs.obj.merge({
+
+          // SWF Callback Functions
+          'readyFunction': 'videojs.Flash.onReady',
+          'eventProxyFunction': 'videojs.Flash.onEvent',
+          'errorEventProxyFunction': 'videojs.Flash.onError',
+
+          // Player Settings
+          'autoplay': playerOptions.autoplay,
+          'preload': playerOptions.preload,
+          'loop': playerOptions.loop,
+          'muted': playerOptions.muted
+
+        }, options['flashVars']),
+
+        // Merge default parames with ones passed in
+        params = vjs.obj.merge({
+          'wmode': 'opaque', // Opaque is needed to overlay controls, but can affect playback performance
+          'bgcolor': '#000000' // Using bgcolor prevents a white flash when the object is loading
+        }, options['params']),
+
+        // Merge default attributes with ones passed in
+        attributes = vjs.obj.merge({
+          'id': objId,
+          'name': objId, // Both ID and Name needed or swf to identifty itself
+          'class': 'vjs-tech'
+        }, options['attributes'])
+    ;
+
+    // If source was supplied pass as a flash var.
+    if (source) {
+      if (source.type && vjs.Flash.isStreamingType(source.type)) {
+        var parts = vjs.Flash.streamToParts(source.src);
+        flashVars['rtmpConnection'] = encodeURIComponent(parts.connection);
+        flashVars['rtmpStream'] = encodeURIComponent(parts.stream);
+      }
+      else {
+        flashVars['src'] = encodeURIComponent(vjs.getAbsoluteURL(source.src));
+      }
+    }
+
+    // Add placeholder to player div
+    vjs.insertFirst(placeHolder, parentEl);
+
+    // Having issues with Flash reloading on certain page actions (hide/resize/fullscreen) in certain browsers
+    // This allows resetting the playhead when we catch the reload
+    if (options['startTime']) {
+      this.ready(function(){
+        this.load();
+        this.play();
+        this.currentTime(options['startTime']);
+      });
+    }
+
+    // Flash iFrame Mode
+    // In web browsers there are multiple instances where changing the parent element or visibility of a plugin causes the plugin to reload.
+    // - Firefox just about always. https://bugzilla.mozilla.org/show_bug.cgi?id=90268 (might be fixed by version 13)
+    // - Webkit when hiding the plugin
+    // - Webkit and Firefox when using requestFullScreen on a parent element
+    // Loading the flash plugin into a dynamically generated iFrame gets around most of these issues.
+    // Issues that remain include hiding the element and requestFullScreen in Firefox specifically
+
+    // There's on particularly annoying issue with this method which is that Firefox throws a security error on an offsite Flash object loaded into a dynamically created iFrame.
+    // Even though the iframe was inserted into a page on the web, Firefox + Flash considers it a local app trying to access an internet file.
+    // I tried mulitple ways of setting the iframe src attribute but couldn't find a src that worked well. Tried a real/fake source, in/out of domain.
+    // Also tried a method from stackoverflow that caused a security error in all browsers. http://stackoverflow.com/questions/2486901/how-to-set-document-domain-for-a-dynamically-generated-iframe
+    // In the end the solution I found to work was setting the iframe window.location.href right before doing a document.write of the Flash object.
+    // The only downside of this it seems to trigger another http request to the original page (no matter what's put in the href). Not sure why that is.
+
+    // NOTE (2012-01-29): Cannot get Firefox to load the remote hosted SWF into a dynamically created iFrame
+    // Firefox 9 throws a security error, unleess you call location.href right before doc.write.
+    //    Not sure why that even works, but it causes the browser to look like it's continuously trying to load the page.
+    // Firefox 3.6 keeps calling the iframe onload function anytime I write to it, causing an endless loop.
+
+    if (options['iFrameMode'] === true && !vjs.IS_FIREFOX) {
+
+      // Create iFrame with vjs-tech class so it's 100% width/height
+      var iFrm = vjs.createEl('iframe', {
+        'id': objId + '_iframe',
+        'name': objId + '_iframe',
+        'className': 'vjs-tech',
+        'scrolling': 'no',
+        'marginWidth': 0,
+        'marginHeight': 0,
+        'frameBorder': 0
+      });
+
+      // Update ready function names in flash vars for iframe window
+      flashVars['readyFunction'] = 'ready';
+      flashVars['eventProxyFunction'] = 'events';
+      flashVars['errorEventProxyFunction'] = 'errors';
+
+      // Tried multiple methods to get this to work in all browsers
+
+      // Tried embedding the flash object in the page first, and then adding a place holder to the iframe, then replacing the placeholder with the page object.
+      // The goal here was to try to load the swf URL in the parent page first and hope that got around the firefox security error
+      // var newObj = vjs.Flash.embed(options['swf'], placeHolder, flashVars, params, attributes);
+      // (in onload)
+      //  var temp = vjs.createEl('a', { id:'asdf', innerHTML: 'asdf' } );
+      //  iDoc.body.appendChild(temp);
+
+      // Tried embedding the flash object through javascript in the iframe source.
+      // This works in webkit but still triggers the firefox security error
+      // iFrm.src = 'javascript: document.write('"+vjs.Flash.getEmbedCode(options['swf'], flashVars, params, attributes)+"');";
+
+      // Tried an actual local iframe just to make sure that works, but it kills the easiness of the CDN version if you require the user to host an iframe
+      // We should add an option to host the iframe locally though, because it could help a lot of issues.
+      // iFrm.src = "iframe.html";
+
+      // Wait until iFrame has loaded to write into it.
+      vjs.on(iFrm, 'load', vjs.bind(this, function(){
+
+        var iDoc,
+            iWin = iFrm.contentWindow;
+
+        // The one working method I found was to use the iframe's document.write() to create the swf object
+        // This got around the security issue in all browsers except firefox.
+        // I did find a hack where if I call the iframe's window.location.href='', it would get around the security error
+        // However, the main page would look like it was loading indefinitely (URL bar loading spinner would never stop)
+        // Plus Firefox 3.6 didn't work no matter what I tried.
+        // if (vjs.USER_AGENT.match('Firefox')) {
+        //   iWin.location.href = '';
+        // }
+
+        // Get the iFrame's document depending on what the browser supports
+        iDoc = iFrm.contentDocument ? iFrm.contentDocument : iFrm.contentWindow.document;
+
+        // Tried ensuring both document domains were the same, but they already were, so that wasn't the issue.
+        // Even tried adding /. that was mentioned in a browser security writeup
+        // document.domain = document.domain+'/.';
+        // iDoc.domain = document.domain+'/.';
+
+        // Tried adding the object to the iframe doc's innerHTML. Security error in all browsers.
+        // iDoc.body.innerHTML = swfObjectHTML;
+
+        // Tried appending the object to the iframe doc's body. Security error in all browsers.
+        // iDoc.body.appendChild(swfObject);
+
+        // Using document.write actually got around the security error that browsers were throwing.
+        // Again, it's a dynamically generated (same domain) iframe, loading an external Flash swf.
+        // Not sure why that's a security issue, but apparently it is.
+        iDoc.write(vjs.Flash.getEmbedCode(options['swf'], flashVars, params, attributes));
+
+        // Setting variables on the window needs to come after the doc write because otherwise they can get reset in some browsers
+        // So far no issues with swf ready event being called before it's set on the window.
+        iWin['player'] = this.player_;
+
+        // Create swf ready function for iFrame window
+        iWin['ready'] = vjs.bind(this.player_, function(currSwf){
+          var el = iDoc.getElementById(currSwf),
+              player = this,
+              tech = player.tech;
+
+          // Update reference to playback technology element
+          tech.el_ = el;
+
+          // Make sure swf is actually ready. Sometimes the API isn't actually yet.
+          vjs.Flash.checkReady(tech);
+        });
+
+        // Create event listener for all swf events
+        iWin['events'] = vjs.bind(this.player_, function(swfID, eventName){
+          var player = this;
+          if (player && player.techName === 'flash') {
+            player.trigger(eventName);
+          }
+        });
+
+        // Create error listener for all swf errors
+        iWin['errors'] = vjs.bind(this.player_, function(swfID, eventName){
+          vjs.log('Flash Error', eventName);
+        });
+
+      }));
+
+      // Replace placeholder with iFrame (it will load now)
+      placeHolder.parentNode.replaceChild(iFrm, placeHolder);
+
+    // If not using iFrame mode, embed as normal object
+    } else {
+      vjs.Flash.embed(options['swf'], placeHolder, flashVars, params, attributes);
+    }
+  }
+});
+
+vjs.Flash.prototype.dispose = function(){
+  vjs.MediaTechController.prototype.dispose.call(this);
+};
+
+vjs.Flash.prototype.play = function(){
+  this.el_.vjs_play();
+};
+
+vjs.Flash.prototype.pause = function(){
+  this.el_.vjs_pause();
+};
+
+vjs.Flash.prototype.src = function(src){
+  if (vjs.Flash.isStreamingSrc(src)) {
+    src = vjs.Flash.streamToParts(src);
+    this.setRtmpConnection(src.connection);
+    this.setRtmpStream(src.stream);
+  }
+  else {
+    // Make sure source URL is abosolute.
+    src = vjs.getAbsoluteURL(src);
+    this.el_.vjs_src(src);
+  }
+
+  // Currently the SWF doesn't autoplay if you load a source later.
+  // e.g. Load player w/ no source, wait 2s, set src.
+  if (this.player_.autoplay()) {
+    var tech = this;
+    setTimeout(function(){ tech.play(); }, 0);
+  }
+};
+
+vjs.Flash.prototype.currentSrc = function(){
+  var src = this.el_.vjs_getProperty('currentSrc');
+  // no src, check and see if RTMP
+  if (src == null) {
+    var connection = this.rtmpConnection(),
+        stream = this.rtmpStream();
+
+    if (connection && stream) {
+      src = vjs.Flash.streamFromParts(connection, stream);
+    }
+  }
+  return src;
+};
+
+vjs.Flash.prototype.load = function(){
+  this.el_.vjs_load();
+};
+
+vjs.Flash.prototype.poster = function(){
+  this.el_.vjs_getProperty('poster');
+};
+
+vjs.Flash.prototype.buffered = function(){
+  return vjs.createTimeRange(0, this.el_.vjs_getProperty('buffered'));
+};
+
+vjs.Flash.prototype.supportsFullScreen = function(){
+  return false; // Flash does not allow fullscreen through javascript
+};
+
+vjs.Flash.prototype.enterFullScreen = function(){
+  return false;
+};
+
+
+// Create setters and getters for attributes
+var api = vjs.Flash.prototype,
+    readWrite = 'rtmpConnection,rtmpStream,preload,currentTime,defaultPlaybackRate,playbackRate,autoplay,loop,mediaGroup,controller,controls,volume,muted,defaultMuted'.split(','),
+    readOnly = 'error,currentSrc,networkState,readyState,seeking,initialTime,duration,startOffsetTime,paused,played,seekable,ended,videoTracks,audioTracks,videoWidth,videoHeight,textTracks'.split(',');
+    // Overridden: buffered
+
+/**
+ * @this {*}
+ */
+var createSetter = function(attr){
+  var attrUpper = attr.charAt(0).toUpperCase() + attr.slice(1);
+  api['set'+attrUpper] = function(val){ return this.el_.vjs_setProperty(attr, val); };
+};
+
+/**
+ * @this {*}
+ */
+var createGetter = function(attr){
+  api[attr] = function(){ return this.el_.vjs_getProperty(attr); };
+};
+
+(function(){
+  var i;
+  // Create getter and setters for all read/write attributes
+  for (i = 0; i < readWrite.length; i++) {
+    createGetter(readWrite[i]);
+    createSetter(readWrite[i]);
+  }
+
+  // Create getters for read-only attributes
+  for (i = 0; i < readOnly.length; i++) {
+    createGetter(readOnly[i]);
+  }
+})();
+
+/* Flash Support Testing -------------------------------------------------------- */
+
+vjs.Flash.isSupported = function(){
+  return vjs.Flash.version()[0] >= 10;
+  // return swfobject.hasFlashPlayerVersion('10');
+};
+
+vjs.Flash.canPlaySource = function(srcObj){
+  if (srcObj.type in vjs.Flash.formats || srcObj.type in vjs.Flash.streamingFormats) { return 'maybe'; }
+};
+
+vjs.Flash.formats = {
+  'video/flv': 'FLV',
+  'video/x-flv': 'FLV',
+  'video/mp4': 'MP4',
+  'video/m4v': 'MP4'
+};
+
+vjs.Flash.streamingFormats = {
+  'rtmp/mp4': 'MP4',
+  'rtmp/flv': 'FLV'
+};
+
+vjs.Flash['onReady'] = function(currSwf){
+  var el = vjs.el(currSwf);
+
+  // Get player from box
+  // On firefox reloads, el might already have a player
+  var player = el['player'] || el.parentNode['player'],
+      tech = player.tech;
+
+  // Reference player on tech element
+  el['player'] = player;
+
+  // Update reference to playback technology element
+  tech.el_ = el;
+
+  vjs.Flash.checkReady(tech);
+};
+
+// The SWF isn't alwasy ready when it says it is. Sometimes the API functions still need to be added to the object.
+// If it's not ready, we set a timeout to check again shortly.
+vjs.Flash.checkReady = function(tech){
+
+  // Check if API property exists
+  if (tech.el().vjs_getProperty) {
+
+    // If so, tell tech it's ready
+    tech.triggerReady();
+
+  // Otherwise wait longer.
+  } else {
+
+    setTimeout(function(){
+      vjs.Flash.checkReady(tech);
+    }, 50);
+
+  }
+};
+
+// Trigger events from the swf on the player
+vjs.Flash['onEvent'] = function(swfID, eventName){
+  var player = vjs.el(swfID)['player'];
+  player.trigger(eventName);
+};
+
+// Log errors from the swf
+vjs.Flash['onError'] = function(swfID, err){
+  var player = vjs.el(swfID)['player'];
+  player.trigger('error');
+  vjs.log('Flash Error', err, swfID);
+};
+
+// Flash Version Check
+vjs.Flash.version = function(){
+  var version = '0,0,0';
+
+  // IE
+  try {
+    version = new window.ActiveXObject('ShockwaveFlash.ShockwaveFlash').GetVariable('$version').replace(/\D+/g, ',').match(/^,?(.+),?$/)[1];
+
+  // other browsers
+  } catch(e) {
+    try {
+      if (navigator.mimeTypes['application/x-shockwave-flash'].enabledPlugin){
+        version = (navigator.plugins['Shockwave Flash 2.0'] || navigator.plugins['Shockwave Flash']).description.replace(/\D+/g, ',').match(/^,?(.+),?$/)[1];
+      }
+    } catch(err) {}
+  }
+  return version.split(',');
+};
+
+// Flash embedding method. Only used in non-iframe mode
+vjs.Flash.embed = function(swf, placeHolder, flashVars, params, attributes){
+  var code = vjs.Flash.getEmbedCode(swf, flashVars, params, attributes),
+
+      // Get element by embedding code and retrieving created element
+      obj = vjs.createEl('div', { innerHTML: code }).childNodes[0],
+
+      par = placeHolder.parentNode
+  ;
+
+  placeHolder.parentNode.replaceChild(obj, placeHolder);
+
+  // IE6 seems to have an issue where it won't initialize the swf object after injecting it.
+  // This is a dumb fix
+  var newObj = par.childNodes[0];
+  setTimeout(function(){
+    newObj.style.display = 'block';
+  }, 1000);
+
+  return obj;
+
+};
+
+vjs.Flash.getEmbedCode = function(swf, flashVars, params, attributes){
+
+  var objTag = '<object type="application/x-shockwave-flash"',
+      flashVarsString = '',
+      paramsString = '',
+      attrsString = '';
+
+  // Convert flash vars to string
+  if (flashVars) {
+    vjs.obj.each(flashVars, function(key, val){
+      flashVarsString += (key + '=' + val + '&amp;');
+    });
+  }
+
+  // Add swf, flashVars, and other default params
+  params = vjs.obj.merge({
+    'movie': swf,
+    'flashvars': flashVarsString,
+    'allowScriptAccess': 'always', // Required to talk to swf
+    'allowNetworking': 'all' // All should be default, but having security issues.
+  }, params);
+
+  // Create param tags string
+  vjs.obj.each(params, function(key, val){
+    paramsString += '<param name="'+key+'" value="'+val+'" />';
+  });
+
+  attributes = vjs.obj.merge({
+    // Add swf to attributes (need both for IE and Others to work)
+    'data': swf,
+
+    // Default to 100% width/height
+    'width': '100%',
+    'height': '100%'
+
+  }, attributes);
+
+  // Create Attributes string
+  vjs.obj.each(attributes, function(key, val){
+    attrsString += (key + '="' + val + '" ');
+  });
+
+  return objTag + attrsString + '>' + paramsString + '</object>';
+};
+
+vjs.Flash.streamFromParts = function(connection, stream) {
+  return connection + '&' + stream;
+};
+
+vjs.Flash.streamToParts = function(src) {
+  var parts = {
+    connection: '',
+    stream: ''
+  };
+
+  if (! src) {
+    return parts;
+  }
+
+  // Look for the normal URL separator we expect, '&'.
+  // If found, we split the URL into two pieces around the
+  // first '&'.
+  var connEnd = src.indexOf('&');
+  var streamBegin;
+  if (connEnd !== -1) {
+    streamBegin = connEnd + 1;
+  }
+  else {
+    // If there's not a '&', we use the last '/' as the delimiter.
+    connEnd = streamBegin = src.lastIndexOf('/') + 1;
+    if (connEnd === 0) {
+      // really, there's not a '/'?
+      connEnd = streamBegin = src.length;
+    }
+  }
+  parts.connection = src.substring(0, connEnd);
+  parts.stream = src.substring(streamBegin, src.length);
+
+  return parts;
+};
+
+vjs.Flash.isStreamingType = function(srcType) {
+  return srcType in vjs.Flash.streamingFormats;
+};
+
+// RTMP has four variations, any string starting
+// with one of these protocols should be valid
+vjs.Flash.RTMP_RE = /^rtmp[set]?:\/\//i;
+
+vjs.Flash.isStreamingSrc = function(src) {
+  return vjs.Flash.RTMP_RE.test(src);
+};

src/js/media/html5.js

@@ -0,0 +1,269 @@
+/**
+ * @fileoverview HTML5 Media Controller - Wrapper for HTML5 Media API
+ */
+
+/**
+ * HTML5 Media Controller - Wrapper for HTML5 Media API
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @param {Function=} ready
+ * @constructor
+ */
+vjs.Html5 = vjs.MediaTechController.extend({
+  /** @constructor */
+  init: function(player, options, ready){
+    // volume cannot be changed from 1 on iOS
+    this.features['volumeControl'] = vjs.Html5.canControlVolume();
+
+    // In iOS, if you move a video element in the DOM, it breaks video playback.
+    this.features['movingMediaElementInDOM'] = !vjs.IS_IOS;
+
+    // HTML video is able to automatically resize when going to fullscreen
+    this.features['fullscreenResize'] = true;
+
+    vjs.MediaTechController.call(this, player, options, ready);
+
+    var source = options['source'];
+
+    // If the element source is already set, we may have missed the loadstart event, and want to trigger it.
+    // We don't want to set the source again and interrupt playback.
+    if (source && this.el_.currentSrc == source.src) {
+      player.trigger('loadstart');
+
+    // Otherwise set the source if one was provided.
+    } else if (source) {
+      this.el_.src = source.src;
+    }
+
+    // Determine if native controls should be used
+    // Our goal should be to get the custom controls on mobile solid everywhere
+    // so we can remove this all together. Right now this will block custom
+    // controls on touch enabled laptops like the Chrome Pixel
+    if (vjs.TOUCH_ENABLED && player.options()['nativeControlsForTouch'] !== false) {
+      this.useNativeControls();
+    }
+
+    // Chrome and Safari both have issues with autoplay.
+    // In Safari (5.1.1), when we move the video element into the container div, autoplay doesn't work.
+    // In Chrome (15), if you have autoplay + a poster + no controls, the video gets hidden (but audio plays)
+    // This fixes both issues. Need to wait for API, so it updates displays correctly
+    player.ready(function(){
+      if (this.tag && this.options_['autoplay'] && this.paused()) {
+        delete this.tag['poster']; // Chrome Fix. Fixed in Chrome v16.
+        this.play();
+      }
+    });
+
+    this.setupTriggers();
+    this.triggerReady();
+  }
+});
+
+vjs.Html5.prototype.dispose = function(){
+  vjs.MediaTechController.prototype.dispose.call(this);
+};
+
+vjs.Html5.prototype.createEl = function(){
+  var player = this.player_,
+      // If possible, reuse original tag for HTML5 playback technology element
+      el = player.tag,
+      newEl;
+
+  // Check if this browser supports moving the element into the box.
+  // On the iPhone video will break if you move the element,
+  // So we have to create a brand new element.
+  if (!el || this.features['movingMediaElementInDOM'] === false) {
+
+    // If the original tag is still there, remove it.
+    if (el) {
+      el['player'] = null;
+      player.tag = null;
+      player.el().removeChild(el);
+      el = el.cloneNode(false);
+    } else {
+      el = vjs.createEl('video', {
+        id:player.id() + '_html5_api',
+        className:'vjs-tech'
+      });
+    }
+    // associate the player with the new tag
+    el['player'] = player;
+
+    vjs.insertFirst(el, player.el());
+  }
+
+  // Update specific tag settings, in case they were overridden
+  var attrs = ['autoplay','preload','loop','muted'];
+  for (var i = attrs.length - 1; i >= 0; i--) {
+    var attr = attrs[i];
+    if (player.options_[attr] !== null) {
+      el[attr] = player.options_[attr];
+    }
+  }
+
+  return el;
+  // jenniisawesome = true;
+};
+
+// Make video events trigger player events
+// May seem verbose here, but makes other APIs possible.
+vjs.Html5.prototype.setupTriggers = function(){
+  for (var i = vjs.Html5.Events.length - 1; i >= 0; i--) {
+    vjs.on(this.el_, vjs.Html5.Events[i], vjs.bind(this.player_, this.eventHandler));
+  }
+};
+// Triggers removed using this.off when disposed
+
+vjs.Html5.prototype.eventHandler = function(e){
+  this.trigger(e);
+
+  // No need for media events to bubble up.
+  e.stopPropagation();
+};
+
+vjs.Html5.prototype.useNativeControls = function(){
+  var tech, player, controlsOn, controlsOff, cleanUp;
+
+  tech = this;
+  player = this.player();
+
+  // If the player controls are enabled turn on the native controls
+  tech.setControls(player.controls());
+
+  // Update the native controls when player controls state is updated
+  controlsOn = function(){
+    tech.setControls(true);
+  };
+  controlsOff = function(){
+    tech.setControls(false);
+  };
+  player.on('controlsenabled', controlsOn);
+  player.on('controlsdisabled', controlsOff);
+
+  // Clean up when not using native controls anymore
+  cleanUp = function(){
+    player.off('controlsenabled', controlsOn);
+    player.off('controlsdisabled', controlsOff);
+  };
+  tech.on('dispose', cleanUp);
+  player.on('usingcustomcontrols', cleanUp);
+
+  // Update the state of the player to using native controls
+  player.usingNativeControls(true);
+};
+
+
+vjs.Html5.prototype.play = function(){ this.el_.play(); };
+vjs.Html5.prototype.pause = function(){ this.el_.pause(); };
+vjs.Html5.prototype.paused = function(){ return this.el_.paused; };
+
+vjs.Html5.prototype.currentTime = function(){ return this.el_.currentTime; };
+vjs.Html5.prototype.setCurrentTime = function(seconds){
+  try {
+    this.el_.currentTime = seconds;
+  } catch(e) {
+    vjs.log(e, 'Video is not ready. (Video.js)');
+    // this.warning(VideoJS.warnings.videoNotReady);
+  }
+};
+
+vjs.Html5.prototype.duration = function(){ return this.el_.duration || 0; };
+vjs.Html5.prototype.buffered = function(){ return this.el_.buffered; };
+
+vjs.Html5.prototype.volume = function(){ return this.el_.volume; };
+vjs.Html5.prototype.setVolume = function(percentAsDecimal){ this.el_.volume = percentAsDecimal; };
+vjs.Html5.prototype.muted = function(){ return this.el_.muted; };
+vjs.Html5.prototype.setMuted = function(muted){ this.el_.muted = muted; };
+
+vjs.Html5.prototype.width = function(){ return this.el_.offsetWidth; };
+vjs.Html5.prototype.height = function(){ return this.el_.offsetHeight; };
+
+vjs.Html5.prototype.supportsFullScreen = function(){
+  if (typeof this.el_.webkitEnterFullScreen == 'function') {
+
+    // Seems to be broken in Chromium/Chrome && Safari in Leopard
+    if (/Android/.test(vjs.USER_AGENT) || !/Chrome|Mac OS X 10.5/.test(vjs.USER_AGENT)) {
+      return true;
+    }
+  }
+  return false;
+};
+
+vjs.Html5.prototype.enterFullScreen = function(){
+  var video = this.el_;
+  if (video.paused && video.networkState <= video.HAVE_METADATA) {
+    // attempt to prime the video element for programmatic access
+    // this isn't necessary on the desktop but shouldn't hurt
+    this.el_.play();
+
+    // playing and pausing synchronously during the transition to fullscreen
+    // can get iOS ~6.1 devices into a play/pause loop
+    setTimeout(function(){
+      video.pause();
+      video.webkitEnterFullScreen();
+    }, 0);
+  } else {
+    video.webkitEnterFullScreen();
+  }
+};
+vjs.Html5.prototype.exitFullScreen = function(){
+  this.el_.webkitExitFullScreen();
+};
+vjs.Html5.prototype.src = function(src){ this.el_.src = src; };
+vjs.Html5.prototype.load = function(){ this.el_.load(); };
+vjs.Html5.prototype.currentSrc = function(){ return this.el_.currentSrc; };
+
+vjs.Html5.prototype.preload = function(){ return this.el_.preload; };
+vjs.Html5.prototype.setPreload = function(val){ this.el_.preload = val; };
+
+vjs.Html5.prototype.autoplay = function(){ return this.el_.autoplay; };
+vjs.Html5.prototype.setAutoplay = function(val){ this.el_.autoplay = val; };
+
+vjs.Html5.prototype.controls = function(){ return this.el_.controls; }
+vjs.Html5.prototype.setControls = function(val){ this.el_.controls = !!val; }
+
+vjs.Html5.prototype.loop = function(){ return this.el_.loop; };
+vjs.Html5.prototype.setLoop = function(val){ this.el_.loop = val; };
+
+vjs.Html5.prototype.error = function(){ return this.el_.error; };
+vjs.Html5.prototype.seeking = function(){ return this.el_.seeking; };
+vjs.Html5.prototype.ended = function(){ return this.el_.ended; };
+vjs.Html5.prototype.defaultMuted = function(){ return this.el_.defaultMuted; };
+
+/* HTML5 Support Testing ---------------------------------------------------- */
+
+vjs.Html5.isSupported = function(){
+  return !!vjs.TEST_VID.canPlayType;
+};
+
+vjs.Html5.canPlaySource = function(srcObj){
+  // IE9 on Windows 7 without MediaPlayer throws an error here
+  // https://github.com/videojs/video.js/issues/519
+  try {
+    return !!vjs.TEST_VID.canPlayType(srcObj.type);
+  } catch(e) {
+    return '';
+  }
+  // TODO: Check Type
+  // If no Type, check ext
+  // Check Media Type
+};
+
+vjs.Html5.canControlVolume = function(){
+  var volume =  vjs.TEST_VID.volume;
+  vjs.TEST_VID.volume = (volume / 2) + 0.1;
+  return volume !== vjs.TEST_VID.volume;
+};
+
+// List of all HTML5 events (various uses).
+vjs.Html5.Events = 'loadstart,suspend,abort,error,emptied,stalled,loadedmetadata,loadeddata,canplay,canplaythrough,playing,waiting,seeking,seeked,ended,durationchange,timeupdate,progress,play,pause,ratechange,volumechange'.split(',');
+
+
+// HTML5 Feature detection and Device Fixes --------------------------------- //
+
+  // Override Android 2.2 and less canPlayType method which is broken
+if (vjs.IS_OLD_ANDROID) {
+  document.createElement('video').constructor.prototype.canPlayType = function(type){
+    return (type && type.toLowerCase().indexOf('video/mp4') != -1) ? 'maybe' : '';
+  };
+}

src/js/media/loader.js

@@ -0,0 +1,30 @@
+/**
+ * @constructor
+ */
+vjs.MediaLoader = vjs.Component.extend({
+  /** @constructor */
+  init: function(player, options, ready){
+    vjs.Component.call(this, player, options, ready);
+
+    // If there are no sources when the player is initialized,
+    // load the first supported playback technology.
+    if (!player.options_['sources'] || player.options_['sources'].length === 0) {
+      for (var i=0,j=player.options_['techOrder']; i<j.length; i++) {
+        var techName = vjs.capitalize(j[i]),
+            tech = window['videojs'][techName];
+
+        // Check if the browser supports this technology
+        if (tech && tech.isSupported()) {
+          player.loadTech(techName);
+          break;
+        }
+      }
+    } else {
+      // // Loop through playback technologies (HTML5, Flash) and check for support.
+      // // Then load the best source.
+      // // A few assumptions here:
+      // //   All playback technologies respect preload false.
+      player.src(player.options_['sources']);
+    }
+  }
+});

src/js/media/media.js

@@ -0,0 +1,186 @@
+/**
+ * @fileoverview Media Technology Controller - Base class for media playback
+ * technology controllers like Flash and HTML5
+ */
+
+/**
+ * Base class for media (HTML5 Video, Flash) controllers
+ * @param {vjs.Player|Object} player  Central player instance
+ * @param {Object=} options Options object
+ * @constructor
+ */
+vjs.MediaTechController = vjs.Component.extend({
+  /** @constructor */
+  init: function(player, options, ready){
+    vjs.Component.call(this, player, options, ready);
+
+    this.initControlsListeners();
+  }
+});
+
+/**
+ * Set up click and touch listeners for the playback element
+ * On desktops, a click on the video itself will toggle playback,
+ * on a mobile device a click on the video toggles controls.
+ * (toggling controls is done by toggling the user state between active and
+ * inactive)
+ *
+ * A tap can signal that a user has become active, or has become inactive
+ * e.g. a quick tap on an iPhone movie should reveal the controls. Another
+ * quick tap should hide them again (signaling the user is in an inactive
+ * viewing state)
+ *
+ * In addition to this, we still want the user to be considered inactive after
+ * a few seconds of inactivity.
+ *
+ * Note: the only part of iOS interaction we can't mimic with this setup
+ * is a touch and hold on the video element counting as activity in order to
+ * keep the controls showing, but that shouldn't be an issue. A touch and hold on
+ * any controls will still keep the user active
+ */
+vjs.MediaTechController.prototype.initControlsListeners = function(){
+  var player, tech, activateControls, deactivateControls;
+
+  tech = this;
+  player = this.player();
+
+  var activateControls = function(){
+    if (player.controls() && !player.usingNativeControls()) {
+      tech.addControlsListeners();
+    }
+  };
+
+  deactivateControls = vjs.bind(tech, tech.removeControlsListeners);
+
+  // Set up event listeners once the tech is ready and has an element to apply
+  // listeners to
+  this.ready(activateControls);
+  player.on('controlsenabled', activateControls);
+  player.on('controlsdisabled', deactivateControls);
+};
+
+vjs.MediaTechController.prototype.addControlsListeners = function(){
+  var preventBubble, userWasActive;
+
+  // Some browsers (Chrome & IE) don't trigger a click on a flash swf, but do
+  // trigger mousedown/up.
+  // http://stackoverflow.com/questions/1444562/javascript-onclick-event-over-flash-object
+  // Any touch events are set to block the mousedown event from happening
+  this.on('mousedown', this.onClick);
+
+  // We need to block touch events on the video element from bubbling up,
+  // otherwise they'll signal activity prematurely. The specific use case is
+  // when the video is playing and the controls have faded out. In this case
+  // only a tap (fast touch) should toggle the user active state and turn the
+  // controls back on. A touch and move or touch and hold should not trigger
+  // the controls (per iOS as an example at least)
+  //
+  // We always want to stop propagation on touchstart because touchstart
+  // at the player level starts the touchInProgress interval. We can still
+  // report activity on the other events, but won't let them bubble for
+  // consistency. We don't want to bubble a touchend without a touchstart.
+  this.on('touchstart', function(event) {
+    // Stop the mouse events from also happening
+    event.preventDefault();
+    event.stopPropagation();
+    // Record if the user was active now so we don't have to keep polling it
+    userWasActive = this.player_.userActive();
+  });
+
+  preventBubble = function(event){
+    event.stopPropagation();
+    if (userWasActive) {
+      this.player_.reportUserActivity();
+    }
+  };
+
+  // Treat all touch events the same for consistency
+  this.on('touchmove', preventBubble);
+  this.on('touchleave', preventBubble);
+  this.on('touchcancel', preventBubble);
+  this.on('touchend', preventBubble);
+
+  // Turn on component tap events
+  this.emitTapEvents();
+
+  // The tap listener needs to come after the touchend listener because the tap
+  // listener cancels out any reportedUserActivity when setting userActive(false)
+  this.on('tap', this.onTap);
+};
+
+/**
+ * Remove the listeners used for click and tap controls. This is needed for
+ * toggling to controls disabled, where a tap/touch should do nothing.
+ */
+vjs.MediaTechController.prototype.removeControlsListeners = function(){
+  // We don't want to just use `this.off()` because there might be other needed
+  // listeners added by techs that extend this.
+  this.off('tap');
+  this.off('touchstart');
+  this.off('touchmove');
+  this.off('touchleave');
+  this.off('touchcancel');
+  this.off('touchend');
+  this.off('click');
+  this.off('mousedown');
+};
+
+/**
+ * Handle a click on the media element. By default will play/pause the media.
+ */
+vjs.MediaTechController.prototype.onClick = function(event){
+  // We're using mousedown to detect clicks thanks to Flash, but mousedown
+  // will also be triggered with right-clicks, so we need to prevent that
+  if (event.button !== 0) return;
+
+  // When controls are disabled a click should not toggle playback because
+  // the click is considered a control
+  if (this.player().controls()) {
+    if (this.player().paused()) {
+      this.player().play();
+    } else {
+      this.player().pause();
+    }
+  }
+};
+
+/**
+ * Handle a tap on the media element. By default it will toggle the user
+ * activity state, which hides and shows the controls.
+ */
+
+vjs.MediaTechController.prototype.onTap = function(){
+  this.player().userActive(!this.player().userActive());
+};
+
+vjs.MediaTechController.prototype.features = {
+  'volumeControl': true,
+
+  // Resizing plugins using request fullscreen reloads the plugin
+  'fullscreenResize': false,
+
+  // Optional events that we can manually mimic with timers
+  // currently not triggered by video-js-swf
+  'progressEvents': false,
+  'timeupdateEvents': false
+};
+
+vjs.media = {};
+
+/**
+ * List of default API methods for any MediaTechController
+ * @type {String}
+ */
+vjs.media.ApiMethods = 'play,pause,paused,currentTime,setCurrentTime,duration,buffered,volume,setVolume,muted,setMuted,width,height,supportsFullScreen,enterFullScreen,src,load,currentSrc,preload,setPreload,autoplay,setAutoplay,loop,setLoop,error,networkState,readyState,seeking,initialTime,startOffsetTime,played,seekable,ended,videoTracks,audioTracks,videoWidth,videoHeight,textTracks,defaultPlaybackRate,playbackRate,mediaGroup,controller,controls,defaultMuted'.split(',');
+// Create placeholder methods for each that warn when a method isn't supported by the current playback technology
+
+function createMethod(methodName){
+  return function(){
+    throw new Error('The "'+methodName+'" method is not available on the playback technology\'s API');
+  };
+}
+
+for (var i = vjs.media.ApiMethods.length - 1; i >= 0; i--) {
+  var methodName = vjs.media.ApiMethods[i];
+  vjs.MediaTechController.prototype[vjs.media.ApiMethods[i]] = createMethod(methodName);
+}

src/js/menu.js

@@ -0,0 +1,208 @@
+/* Menu
+================================================================================ */
+/**
+ * The base for text track and settings menu buttons.
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.Menu = vjs.Component.extend();
+
+/**
+ * Add a menu item to the menu
+ * @param {Object|String} component Component or component type to add
+ */
+vjs.Menu.prototype.addItem = function(component){
+  this.addChild(component);
+  component.on('click', vjs.bind(this, function(){
+    this.unlockShowing();
+  }));
+};
+
+/** @inheritDoc */
+vjs.Menu.prototype.createEl = function(){
+  var contentElType = this.options().contentElType || 'ul';
+  this.contentEl_ = vjs.createEl(contentElType, {
+    className: 'vjs-menu-content'
+  });
+  var el = vjs.Component.prototype.createEl.call(this, 'div', {
+    append: this.contentEl_,
+    className: 'vjs-menu'
+  });
+  el.appendChild(this.contentEl_);
+
+  // Prevent clicks from bubbling up. Needed for Menu Buttons,
+  // where a click on the parent is significant
+  vjs.on(el, 'click', function(event){
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  });
+
+  return el;
+};
+
+/**
+ * Menu item
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.MenuItem = vjs.Button.extend({
+  /** @constructor */
+  init: function(player, options){
+    vjs.Button.call(this, player, options);
+    this.selected(options['selected']);
+  }
+});
+
+/** @inheritDoc */
+vjs.MenuItem.prototype.createEl = function(type, props){
+  return vjs.Button.prototype.createEl.call(this, 'li', vjs.obj.merge({
+    className: 'vjs-menu-item',
+    innerHTML: this.options_['label']
+  }, props));
+};
+
+/** @inheritDoc */
+vjs.MenuItem.prototype.onClick = function(){
+  this.selected(true);
+};
+
+/**
+ * Set this menu item as selected or not
+ * @param  {Boolean} selected
+ */
+vjs.MenuItem.prototype.selected = function(selected){
+  if (selected) {
+    this.addClass('vjs-selected');
+    this.el_.setAttribute('aria-selected',true);
+  } else {
+    this.removeClass('vjs-selected');
+    this.el_.setAttribute('aria-selected',false);
+  }
+};
+
+
+/**
+ * A button class with a popup menu
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.MenuButton = vjs.Button.extend({
+  /** @constructor */
+  init: function(player, options){
+    vjs.Button.call(this, player, options);
+
+    this.menu = this.createMenu();
+
+    // Add list to element
+    this.addChild(this.menu);
+
+    // Automatically hide empty menu buttons
+    if (this.items && this.items.length === 0) {
+      this.hide();
+    }
+
+    this.on('keyup', this.onKeyPress);
+    this.el_.setAttribute('aria-haspopup', true);
+    this.el_.setAttribute('role', 'button');
+  }
+});
+
+/**
+ * Track the state of the menu button
+ * @type {Boolean}
+ */
+vjs.MenuButton.prototype.buttonPressed_ = false;
+
+vjs.MenuButton.prototype.createMenu = function(){
+  var menu = new vjs.Menu(this.player_);
+
+  // Add a title list item to the top
+  if (this.options().title) {
+    menu.el().appendChild(vjs.createEl('li', {
+      className: 'vjs-menu-title',
+      innerHTML: vjs.capitalize(this.kind_),
+      tabindex: -1
+    }));
+  }
+
+  this.items = this['createItems']();
+
+  if (this.items) {
+    // Add menu items to the menu
+    for (var i = 0; i < this.items.length; i++) {
+      menu.addItem(this.items[i]);
+    }
+  }
+
+  return menu;
+};
+
+/**
+ * Create the list of menu items. Specific to each subclass.
+ */
+vjs.MenuButton.prototype.createItems = function(){};
+
+/** @inheritDoc */
+vjs.MenuButton.prototype.buildCSSClass = function(){
+  return this.className + ' vjs-menu-button ' + vjs.Button.prototype.buildCSSClass.call(this);
+};
+
+// Focus - Add keyboard functionality to element
+// This function is not needed anymore. Instead, the keyboard functionality is handled by
+// treating the button as triggering a submenu. When the button is pressed, the submenu
+// appears. Pressing the button again makes the submenu disappear.
+vjs.MenuButton.prototype.onFocus = function(){};
+// Can't turn off list display that we turned on with focus, because list would go away.
+vjs.MenuButton.prototype.onBlur = function(){};
+
+vjs.MenuButton.prototype.onClick = function(){
+  // When you click the button it adds focus, which will show the menu indefinitely.
+  // So we'll remove focus when the mouse leaves the button.
+  // Focus is needed for tab navigation.
+  this.one('mouseout', vjs.bind(this, function(){
+    this.menu.unlockShowing();
+    this.el_.blur();
+  }));
+  if (this.buttonPressed_){
+    this.unpressButton();
+  } else {
+    this.pressButton();
+  }
+};
+
+vjs.MenuButton.prototype.onKeyPress = function(event){
+  event.preventDefault();
+
+  // Check for space bar (32) or enter (13) keys
+  if (event.which == 32 || event.which == 13) {
+    if (this.buttonPressed_){
+      this.unpressButton();
+    } else {
+      this.pressButton();
+    }
+  // Check for escape (27) key
+  } else if (event.which == 27){
+    if (this.buttonPressed_){
+      this.unpressButton();
+    }
+  }
+};
+
+vjs.MenuButton.prototype.pressButton = function(){
+  this.buttonPressed_ = true;
+  this.menu.lockShowing();
+  this.el_.setAttribute('aria-pressed', true);
+  if (this.items && this.items.length > 0) {
+    this.items[0].el().focus(); // set the focus to the title of the submenu
+  }
+};
+
+vjs.MenuButton.prototype.unpressButton = function(){
+  this.buttonPressed_ = false;
+  this.menu.unlockShowing();
+  this.el_.setAttribute('aria-pressed', false);
+};
+

src/js/plugins.js

@@ -0,0 +1,3 @@
+vjs.plugin = function(name, init){
+  vjs.Player.prototype[name] = init;
+};

src/js/poster.js

@@ -0,0 +1,47 @@
+/* Poster Image
+================================================================================ */
+/**
+ * Poster image. Shows before the video plays.
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.PosterImage = vjs.Button.extend({
+  /** @constructor */
+  init: function(player, options){
+    vjs.Button.call(this, player, options);
+
+    if (!player.poster() || !player.controls()) {
+      this.hide();
+    }
+
+    player.on('play', vjs.bind(this, this.hide));
+  }
+});
+
+vjs.PosterImage.prototype.createEl = function(){
+  var el = vjs.createEl('div', {
+        className: 'vjs-poster',
+
+        // Don't want poster to be tabbable.
+        tabIndex: -1
+      }),
+      poster = this.player_.poster();
+
+  if (poster) {
+    if ('backgroundSize' in el.style) {
+      el.style.backgroundImage = 'url("' + poster + '")';
+    } else {
+      el.appendChild(vjs.createEl('img', { src: poster }));
+    }
+  }
+
+  return el;
+};
+
+vjs.PosterImage.prototype.onClick = function(){
+  // Only accept clicks when controls are enabled
+  if (this.player().controls()) {
+    this.player_.play();
+  }
+};

src/js/setup.js

@@ -0,0 +1,62 @@
+/**
+ * @fileoverview Functions for automatically setting up a player
+ * based on the data-setup attribute of the video tag
+ */
+
+// Automatically set up any tags that have a data-setup attribute
+vjs.autoSetup = function(){
+  var options, vid, player,
+      vids = document.getElementsByTagName('video');
+
+  // Check if any media elements exist
+  if (vids && vids.length > 0) {
+
+    for (var i=0,j=vids.length; i<j; i++) {
+      vid = vids[i];
+
+      // Check if element exists, has getAttribute func.
+      // IE seems to consider typeof el.getAttribute == 'object' instead of 'function' like expected, at least when loading the player immediately.
+      if (vid && vid.getAttribute) {
+
+        // Make sure this player hasn't already been set up.
+        if (vid['player'] === undefined) {
+          options = vid.getAttribute('data-setup');
+
+          // Check if data-setup attr exists.
+          // We only auto-setup if they've added the data-setup attr.
+          if (options !== null) {
+
+            // Parse options JSON
+            // If empty string, make it a parsable json object.
+            options = vjs.JSON.parse(options || '{}');
+
+            // Create new video.js instance.
+            player = videojs(vid, options);
+          }
+        }
+
+      // If getAttribute isn't defined, we need to wait for the DOM.
+      } else {
+        vjs.autoSetupTimeout(1);
+        break;
+      }
+    }
+
+  // No videos were found, so keep looping unless page is finisehd loading.
+  } else if (!vjs.windowLoaded) {
+    vjs.autoSetupTimeout(1);
+  }
+};
+
+// Pause to let the DOM keep processing
+vjs.autoSetupTimeout = function(wait){
+  setTimeout(vjs.autoSetup, wait);
+};
+
+vjs.one(window, 'load', function(){
+  vjs.windowLoaded = true;
+});
+
+// Run Auto-load players
+// You have to wait at least once in case this script is loaded after your video in the DOM (weird behavior only with minified version)
+vjs.autoSetupTimeout(1);

src/js/slider.js

@@ -0,0 +1,229 @@
+/* Slider
+================================================================================ */
+/**
+ * Parent for seek bar and volume slider
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.Slider = vjs.Component.extend({
+  /** @constructor */
+  init: function(player, options){
+    vjs.Component.call(this, player, options);
+
+    // Set property names to bar and handle to match with the child Slider class is looking for
+    this.bar = this.getChild(this.options_['barName']);
+    this.handle = this.getChild(this.options_['handleName']);
+
+    player.on(this.playerEvent, vjs.bind(this, this.update));
+
+    this.on('mousedown', this.onMouseDown);
+    this.on('touchstart', this.onMouseDown);
+    this.on('focus', this.onFocus);
+    this.on('blur', this.onBlur);
+    this.on('click', this.onClick);
+
+    this.player_.on('controlsvisible', vjs.bind(this, this.update));
+
+    // This is actually to fix the volume handle position. http://twitter.com/#!/gerritvanaaken/status/159046254519787520
+    // this.player_.one('timeupdate', vjs.bind(this, this.update));
+
+    player.ready(vjs.bind(this, this.update));
+
+    this.boundEvents = {};
+  }
+});
+
+vjs.Slider.prototype.createEl = function(type, props) {
+  props = props || {};
+  // Add the slider element class to all sub classes
+  props.className = props.className + ' vjs-slider';
+  props = vjs.obj.merge({
+    role: 'slider',
+    'aria-valuenow': 0,
+    'aria-valuemin': 0,
+    'aria-valuemax': 100,
+    tabIndex: 0
+  }, props);
+
+  return vjs.Component.prototype.createEl.call(this, type, props);
+};
+
+vjs.Slider.prototype.onMouseDown = function(event){
+  event.preventDefault();
+  vjs.blockTextSelection();
+
+  this.boundEvents.move = vjs.bind(this, this.onMouseMove);
+  this.boundEvents.end = vjs.bind(this, this.onMouseUp);
+
+  vjs.on(document, 'mousemove', this.boundEvents.move);
+  vjs.on(document, 'mouseup', this.boundEvents.end);
+  vjs.on(document, 'touchmove', this.boundEvents.move);
+  vjs.on(document, 'touchend', this.boundEvents.end);
+
+  this.onMouseMove(event);
+};
+
+vjs.Slider.prototype.onMouseUp = function() {
+  vjs.unblockTextSelection();
+  vjs.off(document, 'mousemove', this.boundEvents.move, false);
+  vjs.off(document, 'mouseup', this.boundEvents.end, false);
+  vjs.off(document, 'touchmove', this.boundEvents.move, false);
+  vjs.off(document, 'touchend', this.boundEvents.end, false);
+
+  this.update();
+};
+
+vjs.Slider.prototype.update = function(){
+  // In VolumeBar init we have a setTimeout for update that pops and update to the end of the
+  // execution stack. The player is destroyed before then update will cause an error
+  if (!this.el_) return;
+
+  // If scrubbing, we could use a cached value to make the handle keep up with the user's mouse.
+  // On HTML5 browsers scrubbing is really smooth, but some flash players are slow, so we might want to utilize this later.
+  // var progress =  (this.player_.scrubbing) ? this.player_.getCache().currentTime / this.player_.duration() : this.player_.currentTime() / this.player_.duration();
+
+  var barProgress,
+      progress = this.getPercent(),
+      handle = this.handle,
+      bar = this.bar;
+
+  // Protect against no duration and other division issues
+  if (isNaN(progress)) { progress = 0; }
+
+  barProgress = progress;
+
+  // If there is a handle, we need to account for the handle in our calculation for progress bar
+  // so that it doesn't fall short of or extend past the handle.
+  if (handle) {
+
+    var box = this.el_,
+        boxWidth = box.offsetWidth,
+
+        handleWidth = handle.el().offsetWidth,
+
+        // The width of the handle in percent of the containing box
+        // In IE, widths may not be ready yet causing NaN
+        handlePercent = (handleWidth) ? handleWidth / boxWidth : 0,
+
+        // Get the adjusted size of the box, considering that the handle's center never touches the left or right side.
+        // There is a margin of half the handle's width on both sides.
+        boxAdjustedPercent = 1 - handlePercent,
+
+        // Adjust the progress that we'll use to set widths to the new adjusted box width
+        adjustedProgress = progress * boxAdjustedPercent;
+
+    // The bar does reach the left side, so we need to account for this in the bar's width
+    barProgress = adjustedProgress + (handlePercent / 2);
+
+    // Move the handle from the left based on the adjected progress
+    handle.el().style.left = vjs.round(adjustedProgress * 100, 2) + '%';
+  }
+
+  // Set the new bar width
+  bar.el().style.width = vjs.round(barProgress * 100, 2) + '%';
+};
+
+vjs.Slider.prototype.calculateDistance = function(event){
+  var el, box, boxX, boxY, boxW, boxH, handle, pageX, pageY;
+
+  el = this.el_;
+  box = vjs.findPosition(el);
+  boxW = boxH = el.offsetWidth;
+  handle = this.handle;
+
+  if (this.options_.vertical) {
+    boxY = box.top;
+
+    if (event.changedTouches) {
+      pageY = event.changedTouches[0].pageY;
+    } else {
+      pageY = event.pageY;
+    }
+
+    if (handle) {
+      var handleH = handle.el().offsetHeight;
+      // Adjusted X and Width, so handle doesn't go outside the bar
+      boxY = boxY + (handleH / 2);
+      boxH = boxH - handleH;
+    }
+
+    // Percent that the click is through the adjusted area
+    return Math.max(0, Math.min(1, ((boxY - pageY) + boxH) / boxH));
+
+  } else {
+    boxX = box.left;
+
+    if (event.changedTouches) {
+      pageX = event.changedTouches[0].pageX;
+    } else {
+      pageX = event.pageX;
+    }
+
+    if (handle) {
+      var handleW = handle.el().offsetWidth;
+
+      // Adjusted X and Width, so handle doesn't go outside the bar
+      boxX = boxX + (handleW / 2);
+      boxW = boxW - handleW;
+    }
+
+    // Percent that the click is through the adjusted area
+    return Math.max(0, Math.min(1, (pageX - boxX) / boxW));
+  }
+};
+
+vjs.Slider.prototype.onFocus = function(){
+  vjs.on(document, 'keyup', vjs.bind(this, this.onKeyPress));
+};
+
+vjs.Slider.prototype.onKeyPress = function(event){
+  if (event.which == 37) { // Left Arrow
+    event.preventDefault();
+    this.stepBack();
+  } else if (event.which == 39) { // Right Arrow
+    event.preventDefault();
+    this.stepForward();
+  }
+};
+
+vjs.Slider.prototype.onBlur = function(){
+  vjs.off(document, 'keyup', vjs.bind(this, this.onKeyPress));
+};
+
+/**
+ * Listener for click events on slider, used to prevent clicks
+ *   from bubbling up to parent elements like button menus.
+ * @param  {Object} event Event object
+ */
+vjs.Slider.prototype.onClick = function(event){
+  event.stopImmediatePropagation();
+  event.preventDefault();
+};
+
+/**
+ * SeekBar Behavior includes play progress bar, and seek handle
+ * Needed so it can determine seek position based on handle position/size
+ * @param {vjs.Player|Object} player
+ * @param {Object=} options
+ * @constructor
+ */
+vjs.SliderHandle = vjs.Component.extend();
+
+/**
+ * Default value of the slider
+ * @type {Number}
+ */
+vjs.SliderHandle.prototype.defaultValue = 0;
+
+/** @inheritDoc */
+vjs.SliderHandle.prototype.createEl = function(type, props) {
+  props = props || {};
+  // Add the slider element class to all sub classes
+  props.className = props.className + ' vjs-slider-handle';
+  props = vjs.obj.merge({
+    innerHTML: '<span class="vjs-control-text">'+this.defaultValue+'</span>'
+  }, props);
+
+  return vjs.Component.prototype.createEl.call(this, 'div', props);
+};

test/index.html

@@ -0,0 +1,84 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Video.js Test Suite</title>
+
+  <!--[if IE]>
+    <script src="https://getfirebug.com/releases/lite/1.4/firebug-lite.js"></script>
+  <!--<![endif]-->
+
+  <!-- QUnit -->
+  <link rel="stylesheet" href="../test/qunit/qunit/qunit.css" />
+  <script src="../test/qunit/qunit/qunit.js"></script>
+
+  <!-- Video.js CSS -->
+  <link rel="stylesheet" href="../build/files/video-js.css" type="text/css">
+
+  <script type="text/javascript">
+    (function(){
+
+      // ADD NEW TEST FILES HERE
+      window.tests = [
+        'test/unit/test-helpers.js',
+        'test/unit/core-object.js',
+        'test/unit/lib.js',
+        'test/unit/events.js',
+        'test/unit/component.js',
+        'test/unit/mediafaker.js',
+        'test/unit/player.js',
+        'test/unit/core.js',
+        'test/unit/media.html5.js',
+        'test/unit/controls.js',
+        'test/unit/plugins.js',
+        'test/unit/flash.js'
+      ];
+
+      var projectRoot = '../';
+      var scripts = [];
+
+      window.loadScripts = function(scripts) {
+        for (var i = 0; i < scripts.length; i++) {
+          document.write("<script src='" + projectRoot + scripts[i] + "'><\/script>" );
+        }
+      }
+
+      // Choose either the raw source and tests
+      // Or the compiled source + tests.
+      // Use ?comiled to use the compiled tests
+      if (QUnit.urlParams.min || QUnit.urlParams.compiled) {
+        window.compiled = true;
+      } else {
+        // Bunyip/Yeti starts tests after it's done loading which can
+        // lead to a double Qunit.start error which reads as
+        // "Uncaught Error: pushFailure() assertion outside test"
+        if (window.$yetify) {
+          QUnit.config.autostart = false;
+        }
+
+        loadScripts(['build/source-loader.js']);
+      }
+
+    })()
+  </script>
+
+</head>
+<body>
+  <div>
+    <h1 id="qunit-header">Video.js Test Suite</h1>
+    <h2 id="qunit-banner"></h2>
+    <h2 id="qunit-userAgent"></h2>
+    <ol id="qunit-tests"></ol>
+    <div id="qunit-fixture"></div>
+  </div>
+
+  <script>
+    // Loading tests before the end to give IE time to load vjs before tests
+    if (!window.compiled) {
+      loadScripts(window.tests);
+    } else {
+      var compiledTests = "build/files/test.minified.video.js";
+      loadScripts([compiledTests]);
+    }
+  </script>
+</body>
+</html>

test/minified-api.html

@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Video.js Test Suite</title>
+
+  <!-- QUnit -->
+  <link rel="stylesheet" href="../test/qunit/qunit/qunit.css" />
+  <script src="../test/qunit/qunit/qunit.js"></script>
+
+  <!-- Video.js CSS -->
+  <link rel="stylesheet" href="../build/files/video-js.css" type="text/css">
+
+  <!-- LIB COMPILED WITH NOT COMPILED TESTS
+    Check publicly available APIs against compiled lib
+  -->
+  <script type="text/javascript">
+    (function(){
+
+      // ADD NEW TEST FILES HERE
+      var tests = [
+        'test/unit/test-helpers.js',
+        'test/unit/api.js'
+      ];
+      var projectRoot = '../';
+      var scripts = [];
+
+      scripts = scripts.concat(['build/files/minified.video.js'], tests);
+
+      for (var i = 0; i < scripts.length; i++) {
+        document.write( "<script src='" + projectRoot + scripts[i] + "'><\/script>" );
+      }
+
+    })()
+  </script>
+
+</head>
+<body>
+  <div>
+    <h1 id="qunit-header">Video.js Test Suite</h1>
+    <h2 id="qunit-banner"></h2>
+    <h2 id="qunit-userAgent"></h2>
+    <ol id="qunit-tests"></ol>
+    <div id="qunit-fixture"></div>
+  </div>
+</body>
+</html>