Version 3.0 BETA

2011-09-30 17:28:43 -07:00
@@ -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
@@ -0,0 +1,153 @@
+VideoJS - [HTML5 Video Player](http://videojs.com)
+==================================================
+Version 3.0 BETA
+
+---
+BETA NOTES  
+Version 3 is almost a complete rewrite of the previous versions of VideoJS. New features includes:
+
+  - HTML/CSS Controls and API now work for both the HTML5 and Flash versions.
+  - Custom Super-lightweight Flash Fallback
+  - Embed Code is much simpler.
+    - No more "vjs-box" div required, just use the video tag.
+    - No more embedding of Flash fallback within the video tag HTML.
+
+---
+
+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. For browsers that don't support HTML5, it will fallback to a Flash player.
+
+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 the VideoJS Javascript and CSS files in the head of your page.
+Change the file urls to point to the files on your server.
+
+    <script src="video.js"></script>
+    <link href="video-js.css" rel="stylesheet">
+
+
+### Step 2: Add an HTML5 video tag to your page.
+Use the video tag as normal, with a few extra pieces for VideoJS:
+
+  1. The 'data-setup' Atrribute tells VideoJS to automatically set up the video when the page is ready, and read any options (in JSON format) from the attribute.
+  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 VideoJS 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.
+
+    <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' />
+    </video>
+
+
+### Step 3: Nada!
+That's all it take to get started. See the docs for more advanced uses.
+
+
+Coming Next
+-----------
+- Stable Release
+
+Changelog
+---------
+3.0b
+
+- Complete rewrite in progress
+
+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
@@ -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]
-
-
@@ -1,102 +1,22 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <meta charset="utf-8" />
-  <title>HTML5 Video Player</title>
+  <title>VideoJS | HTML5 Video Player</title>

-  <!-- Include the VideoJS Library -->
-  <script src="video.js" type="text/javascript" charset="utf-8"></script>
+  <link href="video-js.css" rel="stylesheet" type="text/css">

-  <script type="text/javascript">
-    // Must come after the video.js library
+  <!-- video.js must be in the <head> for older IEs to work. -->
+  <script src="video.js"></script>

-    // 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 -->
+  <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'>
+  </video>

 </body>
 </html>
@@ -0,0 +1,36 @@
+#! /bin/csh
+# Combines Source Files. In terminal, sh combine_sources.sh
+# It will put a new video.js file under dist/
+
+cat ../src/_begin.js > ../dist/video.js
+
+cat ../src/core.js >> ../dist/video.js
+cat ../src/api.js >> ../dist/video.js
+
+cat ../src/lib.js >> ../dist/video.js
+cat ../src/log.js >> ../dist/video.js
+
+cat ../src/ecma.js >> ../dist/video.js
+cat ../src/json.js >> ../dist/video.js
+cat ../src/events.js >> ../dist/video.js
+cat ../src/tracks.js >> ../dist/video.js
+
+cat ../src/tech/html5.js >> ../dist/video.js
+cat ../src/tech/flowplayer.js >> ../dist/video.js
+
+# h5swf temporarily requires swfobject
+cat ../src/tech/h5swf.js >> ../dist/video.js
+cat ../flash/swfobject.js >> ../dist/video.js
+
+cat ../src/behaviors/behaviors.js >> ../dist/video.js
+cat ../src/behaviors/seekBar.js >> ../dist/video.js
+cat ../src/behaviors/texttrackdisplays.js >> ../dist/video.js
+cat ../src/behaviors/volume.js >> ../dist/video.js
+
+cat ../src/controls/bar.js >> ../dist/video.js
+cat ../src/controls/bigPlay.js >> ../dist/video.js
+cat ../src/controls/subtitlesBox.js >> ../dist/video.js
+
+cat ../src/autoload.js >> ../dist/video.js
+
+cat ../src/_end.js >> ../dist/video.js
@@ -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
@@ -0,0 +1,6 @@
+body { font-size: 11px; font-family: 'Helvetica Neue', helvetica, arial; }
+td, th { text-align: left; vertical-align: top; }
+td.info-col { width: 240px; }
+td.data {  text-align: right; }
+span.na { color: red; }
+span.undefined { color: #999; }
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>HTML5 Video Player</title>
+
+  <link rel="stylesheet" href="../design/video-js.css" type="text/css">
+  <!--[if lt IE 9]>
+    <script>
+      document.createElement("video"); // HTML5 Shiv. Must be in <head>.
+    </script>
+  <![endif]-->
+
+  <!--[if IE]>
+    <script src="https://getfirebug.com/firebug-lite.js" type="text/javascript" charset="utf-8"></script>
+  <![endif]-->
+
+  <script src="../src/core.js" type="text/javascript" charset="utf-8"></script>
+  <script src="../src/lib.js" type="text/javascript" charset="utf-8"></script>
+  <script src="../src/ecma.js" type="text/javascript" charset="utf-8"></script>
+  <script src="../src/json.js" type="text/javascript" charset="utf-8"></script>
+
+  <script src="../src/api.js" type="text/javascript" charset="utf-8"></script>
+  <script src="../src/events.js" type="text/javascript" charset="utf-8"></script>
+
+  <script src="../src/tracks.js" type="text/javascript" charset="utf-8"></script>
+
+  <script src="../src/behaviors/behaviors.js" type="text/javascript" charset="utf-8"></script>
+  <script src="../src/behaviors/seekBar.js" type="text/javascript" charset="utf-8"></script>
+  <script src="../src/behaviors/volume.js" type="text/javascript" charset="utf-8"></script>
+  <script src="../src/behaviors/texttrackdisplays.js" type="text/javascript" charset="utf-8"></script>
+
+  <script src="../src/controls/bigPlay.js" type="text/javascript" charset="utf-8"></script>
+  <script src="../src/controls/bar.js" type="text/javascript" charset="utf-8"></script>
+  <script src="../src/controls/subtitlesBox.js" type="text/javascript" charset="utf-8"></script>
+
+  <script src="../src/tech/html5.js" type="text/javascript" charset="utf-8"></script>
+  <script src="../src/tech/flowplayer.js" type="text/javascript" charset="utf-8"></script>
+
+  <script src="../src/autoload.js" type="text/javascript" charset="utf-8"></script>
+
+  <script src="../src/log.js" type="text/javascript" charset="utf-8"></script>
+
+
+  <script src="../src/tech/h5swf.js" type="text/javascript" charset="utf-8"></script>
+
+
+	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
+	<script type="text/javascript" src="../flash/swfobject.js"></script>
+
+
+	<link rel="stylesheet" href="compare.css" type="text/css">
+	<script type="text/javascript" src="compare.js"></script>
+</head>
+<body>
+
+  <table border="0" cellspacing="5" cellpadding="5">
+    <tr><th colspan="2">HTML5</th><th colspan="2">H5Swf</th><th colspan="2">Flowplayer</th></tr>
+    <tr>
+      <td colspan="2">
+        <video id="vid1" class="video-js vjs-default-skin" preload="auto" width="480" height="198">
+          <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'>
+        </video>
+      </td>
+      <td colspan="2">
+        <video id="vid2" class="video-js vjs-default-skin" preload="auto" width="480" height="198">
+          <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'>
+        </video>
+      </td>
+      <td colspan="2">
+        <video id="vid3" class="video-js vjs-default-skin" preload="auto" width="480" height="198">
+          <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'>
+        </video>
+      </td>
+    </tr>
+    <tr>
+      <td class="info-col">
+        <table id="html5_props" border="0" cellspacing="0" cellpadding="0"></table>
+      </td>
+      <td class="info-col">
+        <div id="html5_events"></div>
+      </td>
+      <td class="info-col">
+        <table id="h5swf_props" border="0" cellspacing="0" cellpadding="0"></table>
+      </td>
+      <td class="info-col">
+        <div id="h5swf_events"></div>
+      </td>
+      <td class="info-col">
+        <table id="flowplayer_props" border="0" cellspacing="0" cellpadding="0"></table>
+      </td>
+      <td class="info-col">
+        <div id="flowplayer_events"></div>
+      </td>
+    </tr>
+  </table>
+
+</body>
+</html>
@@ -0,0 +1,55 @@
+$(function(){  
+  var tech, i,
+      techList = ["html5","h5swf","flowplayer"],
+      props = "error,currentSrc,networkState,buffered,readyState,seeking,initialTime,duration,startOffsetTime,paused,played,seekable,ended,videoWidth,videoHeight,textTracks,preload,currentTime,playbackRate,autoplay,loop,controls,volume,muted,defaultMuted".split(","),
+      methods = "play,pause,src,load,canPlayType,addTextTrack",
+      notUsed = "mediaGroup,controller,videoTracks,audioTracks,defaultPlaybackRate";
+      
+
+  for (i=0; i < techList.length; i++) {
+    tech = techList[i];
+
+    var player = _V_("vid"+(i+1), { "techOrder":[tech] });
+
+    _V_.each(_V_.html5Events, function(evt){
+      player.addEvent(evt, _V_.proxy(tech, function(evt){
+        var eventsId = "#"+this+"_events",
+            type = evt.type,
+            prev = $(eventsId+" div").first();
+
+        if (prev && prev.html() && prev.html().indexOf(type + " ") === 0) {
+          var countSpan = prev.children(".count");
+          countSpan.html(parseInt(countSpan.html() || 1) + 1);
+        } else {
+          $("#"+this+"_events").prepend("<div>" + evt.type + " <span class='count'></span></div>");
+        }
+      }));
+    });
+
+    var propTable = $("#"+tech+"_props");
+    _V_.each(props, function(prop){
+      propTable.append("<tr><th>"+prop+"</th><td id='"+tech+prop+"' class='data'></td></tr>")
+    });
+
+    setInterval(_V_.proxy(player, function(){
+      _V_.each(props, _V_.proxy(this, function(prop){
+        var result = ""
+        try {
+          result = this[prop]();
+          if (result === false) result = "false";
+          if (result === true) result = "true";
+          if (result === "") result = "''";
+          if (result === null) result = "<span class='undefined'>null</span>";
+          if (result === undefined) result = "<span class='undefined'>undefined</span>";
+          if (typeof result.start == "function") {
+            result = (result.length > 0) ? "s:"+result.start(0)+" e:"+result.end(0) : "-";
+          }
+        } catch(e) {
+          result = "<span class='na'>N/A</span>";
+        }
+        $("#"+this.currentTechName+prop).html(result);
+      }));
+    }), 500);
+
+  };
+});
@@ -0,0 +1,8 @@
+Tracking/Polling CurrentTime Manually
+-------------------------------------
+- Necessary for most flash players and browsers that don't trigger timeupdate events. 
+- In VJS 1-2, we always tracked time because timeupdate was rare.
+- Now most browsers support it well. There is a delay bug in the current Chrome.
+    http://code.google.com/p/chromium/issues/detail?id=92251
+  Andrew from Chrome told me it would be fix in an upcoming release.
+Going to rely on browsers timeupdates when available now.
@@ -0,0 +1,13 @@
+1
+00:00:00,000 --> 00:00:07,200
+[Background Music Playing]
+
+2
+00:00:16,000 --> 00:00:17,200
+Welcome to this week's episode
+
+3
+00:00:17,400 --> 00:00:19,000
+of explore California
+
+
@@ -0,0 +1,190 @@
+/* DEFAULT SKIN (override in another file)
+================================================================================
+Using all CSS to draw the controls. Images could be used if desired.
+Instead of editing this file, I recommend creating your own skin CSS file to be included after this file,
+so you can upgrade to newer versions easier. */
+
+.vjs-original-skin .vjs-controls {
+  position: absolute; margin: 0; opacity: 0.85; color: #fff;
+  display: block; /* Start hidden */
+  left: 0; right: 0; /* 100% width of video-js-box */ 
+  width: 100%;
+  bottom: 0px; /* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */
+  height: 35px; /* Including any margin you want above or below control items */
+  padding: 0; /* Controls are absolutely position, so no padding necessary */
+  -webkit-transition: opacity 0.5s linear;
+  -moz-transition: opacity 0.5s linear;
+  -o-transition: opacity 0.5s linear;
+  -ms-transition: opacity 0.5s linear;
+  transition: opacity 0.5s linear;
+}
+
+.vjs-original-skin .vjs-control {
+  position: absolute; /* Use top, bottom, left, and right to specifically position the control. */
+  text-align: center; margin: 0; padding: 0;
+  height: 25px; /* Default height of individual controls */
+  top: 5px; /* Top margin to put space between video and controls when controls are below */
+
+  /* CSS Background Gradients 
+     Using to give the aqua-ish look. */
+  /* Default */ background-color: #0B151A;
+  /* Webkit  */ background: #1F3744 -webkit-gradient(linear, left top, left bottom, from(#0B151A), to(#1F3744)) left 12px;
+  /* Firefox */ background: #1F3744 -moz-linear-gradient(top,  #0B151A,  #1F3744) left 12px;
+
+  /* CSS Curved Corners */
+  -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
+
+  /* CSS Shadows */
+  -webkit-box-shadow: 1px 1px 2px #000; -moz-box-shadow: 1px 1px 2px #000; box-shadow: 1px 1px 2px #000;
+}
+
+/* Placement of Control Items 
+   - Left side of pogress bar, use left & width
+   - Rigth side of progress bar, use right & width
+   - Expand with the video (like progress bar) use left & right
+   (using div.x to make more specific than vjs-control style)
+*/
+.vjs-original-skin div.vjs-play-control       { left: 5px;   width: 25px;  }
+.vjs-original-skin div.vjs-progress-control   { left: 35px;  right: 165px; } /* Using left & right so it expands with the width of the video */
+.vjs-original-skin div.vjs-time-control       { width: 75px; right: 90px;  } /* Time control and progress bar are combined to look like one */
+.vjs-original-skin div.vjs-volume-control     { width: 50px; right: 35px;  }
+.vjs-original-skin div.vjs-fullscreen-control { width: 25px; right: 5px;   }
+
+/* Removing curved corners on progress control and time control to join them. */
+.vjs-original-skin div.vjs-progress-control {
+  -webkit-border-top-right-radius: 0; -moz-border-radius-topright: 0; border-top-right-radius: 0;
+  -webkit-border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0; border-bottom-right-radius: 0;
+}
+.vjs-original-skin div.vjs-time-control {
+  -webkit-border-top-left-radius: 0; -moz-border-radius-topleft: 0; border-top-left-radius: 0;
+  -webkit-border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0; border-bottom-left-radius: 0;
+}
+
+/* Play/Pause
+-------------------------------------------------------------------------------- */
+.vjs-original-skin .vjs-play-control { cursor: pointer !important; }
+/* Play Icon */
+.vjs-original-skin .vjs-play-control span { display: block; font-size: 0; line-height: 0; }
+.vjs-original-skin.vjs-paused .vjs-play-control span {
+  width: 0; height: 0; margin: 8px 0 0 8px;
+  /* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */
+  border-left: 10px solid #fff; /* Width & Color of play icon */
+  /* Height of play icon is total top & bottom border widths. Color is transparent. */
+  border-top: 5px solid rgba(0,0,0,0); border-bottom: 5px solid rgba(0,0,0,0);
+}
+.vjs-original-skin.vjs-playing .vjs-play-control span {
+  width: 3px; height: 10px; margin: 8px auto 0;
+  /* Drawing the pause bars with borders */
+  border-top: 0px; border-left: 3px solid #fff; border-bottom: 0px; border-right: 3px solid #fff;
+}
+
+/* Progress
+-------------------------------------------------------------------------------- */
+.vjs-original-skin .vjs-progress-holder { /* Box containing play and load progresses */
+  position: relative; padding: 0; overflow:hidden; cursor: pointer !important;
+  height: 9px; border: 1px solid #777;
+  margin: 7px 1px 0 5px; /* Placement within the progress control item */
+  -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
+}
+.vjs-original-skin .vjs-progress-holder div { /* Progress Bars */
+  position: absolute; display: block; width: 0; height: 9px; margin: 0; padding: 0;
+  left: 0; top: 0; /*Needed for IE6*/
+  -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
+}
+.vjs-original-skin .vjs-play-progress {
+  /* CSS Gradient */
+  /* Default */ background: #fff;
+  /* Webkit  */ background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#777));
+  /* Firefox */ background: -moz-linear-gradient(top,  #fff,  #777);
+}
+.vjs-original-skin .vjs-load-progress {
+  opacity: 0.8;
+  /* CSS Gradient */
+  /* Default */ background-color: #555;
+  /* Webkit  */ background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#aaa));
+  /* Firefox */ background: -moz-linear-gradient(top,  #555,  #aaa);
+}
+
+/* Time Display
+-------------------------------------------------------------------------------- */
+.vjs-original-skin .vjs-time-control { font-size: 10px; line-height: 1; font-weight: normal; font-family: Helvetica, Arial, sans-serif; }
+.vjs-original-skin .vjs-time-control span { line-height: 25px; /* Centering vertically */ }
+
+/* Volume
+-------------------------------------------------------------------------------- */
+.vjs-original-skin .vjs-volume-control { cursor: pointer !important; }
+.vjs-original-skin .vjs-volume-control div { display: block; margin: 0 5px 0 5px; padding: 4px 0 0 0; }
+/* Drawing the volume icon using 6 span elements */
+.vjs-original-skin .vjs-volume-control div span { /* Individual volume bars */
+  float: left; padding: 0; font-size: 0; line-height: 0;
+  margin: 0 2px 0 0; /* Space between */
+  width: 5px; height: 0px; /* Total height is height + bottom border */
+  border-bottom: 18px solid #555; /* Default (off) color and height of visible portion */
+}
+.vjs-original-skin .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). */
+.vjs-original-skin .vjs-volume-control div span.vjs-vc-1 { border-bottom-width: 2px; height: 16px; }
+.vjs-original-skin .vjs-volume-control div span.vjs-vc-2 { border-bottom-width: 4px; height: 14px; }
+.vjs-original-skin .vjs-volume-control div span.vjs-vc-3 { border-bottom-width: 7px; height: 11px; }
+.vjs-original-skin .vjs-volume-control div span.vjs-vc-4 { border-bottom-width: 10px; height: 8px; }
+.vjs-original-skin .vjs-volume-control div span.vjs-vc-5 { border-bottom-width: 14px; height: 4px; }
+.vjs-original-skin .vjs-volume-control div span.vjs-vc-6 { margin-right: 0; }
+
+/* Fullscreen
+-------------------------------------------------------------------------------- */
+.vjs-original-skin .vjs-fullscreen-control { cursor: pointer !important; }
+.vjs-original-skin .vjs-fullscreen-control div {
+  padding: 0; text-align: left; vertical-align: top; cursor: pointer !important; 
+  margin: 5px 0 0 5px; /* Placement within the fullscreen control item */
+  width: 20px; height: 20px;
+}
+/* Drawing the fullscreen icon using 4 span elements */
+.vjs-original-skin .vjs-fullscreen-control div span { float: left; margin: 0; padding: 0; font-size: 0; line-height: 0; width: 0; text-align: left; vertical-align: top; }
+.vjs-original-skin .vjs-fullscreen-control div span.vjs-fc-1 { /* Top-left triangle */
+  margin-right: 3px; /* Space between top-left and top-right */
+  margin-bottom: 3px; /* Space between top-left and bottom-left */
+  border-top: 6px solid #fff; /* Height and color */
+  border-right: 6px solid rgba(0,0,0,0);  /* Width */
+}
+.vjs-original-skin .vjs-fullscreen-control div span.vjs-fc-2 { border-top: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); }
+.vjs-original-skin .vjs-fullscreen-control div span.vjs-fc-3 { clear: both; margin: 0 3px 0 0; border-bottom: 6px solid #fff; border-right: 6px solid rgba(0,0,0,0); }
+.vjs-original-skin .vjs-fullscreen-control div span.vjs-fc-4 { border-bottom: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); }
+/* Icon when video is in fullscreen mode */
+.vjs-original-skin.vjs-fullscreen .vjs-fullscreen-control div span.vjs-fc-1 { border: none; border-bottom: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); }
+.vjs-original-skin.vjs-fullscreen .vjs-fullscreen-control div span.vjs-fc-2 { border: none; border-bottom: 6px solid #fff; border-right: 6px solid rgba(0,0,0,0); }
+.vjs-original-skin.vjs-fullscreen .vjs-fullscreen-control div span.vjs-fc-3 { border: none; border-top: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); }
+.vjs-original-skin.vjs-fullscreen .vjs-fullscreen-control div span.vjs-fc-4 { border: none; border-top: 6px solid #fff; border-right: 6px solid rgba(0,0,0,0); }
+
+
+
+
+
+/* Big Play Button (at start)
+---------------------------------------------------------*/
+.vjs-original-skin .vjs-big-play-button {
+  display: block; /* Start hidden */ z-index: 2;
+  position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; margin: -43px 0 0 -43px; text-align: center; vertical-align: center; cursor: pointer !important;
+  border: 3px solid #fff; opacity: 0.9;
+  -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;
+  
+  /* CSS Background Gradients */
+  /* Default */ background-color: #0B151A;
+  /* Webkit  */ background: #1F3744 -webkit-gradient(linear, left top, left bottom, from(#0B151A), to(#1F3744)) left 40px;
+  /* Firefox */ background: #1F3744 -moz-linear-gradient(top,  #0B151A,  #1F3744) left 40px;
+
+  /* CSS Shadows */
+  -webkit-box-shadow: 4px 4px 8px #000; -moz-box-shadow: 4px 4px 8px #000; box-shadow: 4px 4px 8px #000;
+}
+
+.vjs-original-skin 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;
+}
+
+.vjs-original-skin div.vjs-big-play-button span {
+  display: block; font-size: 0; line-height: 0;
+  width: 0; height: 0; margin: 20px 0 0 23px;
+  /* 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);
+}
@@ -0,0 +1,307 @@
+/* 
+VideoJS Default Styles (http://videojs.com)
+Version 3.0
+
+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: 10px;
+}
+
+/* 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%; }
+
+/* Fullscreen Styles */
+body.vjs-full-window { 
+  padding: 0; margin: 0;
+  height: 100%; overflow-y: auto; /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
+}
+.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;
+  _position: absolute; /* IE6 Full-window (underscore hack) */
+}
+
+/* Subtiles Style */
+.video-js .vjs-subtitles { color: #fff; font-size: 20px; text-align: center; position: absolute; bottom: 40px; left: 0; right: 0; }
+
+/* DEFAULT SKIN (override in another file)
+================================================================================
+Instead of editing this file, I recommend creating your own skin CSS file to be included after this file,
+so you can upgrade to newer versions easier. You can remove all these styles by removing the 'vjs-default-skin' class from the tag. */
+
+/* The default control bar. Created by bar.js */
+.vjs-default-skin .vjs-controls {
+  position: absolute;
+  bottom: 0; /* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */
+  left: 0; right: 0; /* 100% width of div */
+  opacity: 0.85; display: block; /* Start hidden */
+  margin: 0; padding: 0; /* Controls are absolutely position, so no padding necessary */
+  height: 2.6em; /* Including any margin you want above or below control items */
+  color: #fff; border-top: 1px solid #404040;
+
+  /* CSS Gradient */
+  /* Can use the Ultimate CSS Gradient Generator: http://www.colorzilla.com/gradient-editor/ */
+  background: #242424; /* Old browsers */
+  background: -moz-linear-gradient(top, #242424 50%, #1f1f1f 50%, #171717 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#242424), color-stop(50%,#1f1f1f), color-stop(100%,#171717)); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* Opera11.10+ */
+  background: -ms-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* IE10+ */
+  /* Filter was causing a lot of weird issues in IE. Elements would stop showing up, or other styles would break. */
+  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#242424', endColorstr='#171717',GradientType=0 );*/ /* IE6-9 */
+  background: linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* W3C */
+
+  /* Fade-in using CSS Transitions */
+  -webkit-transition: opacity 0.3s linear;
+  -moz-transition: opacity 0.3s linear;
+  -o-transition: opacity 0.3s linear;
+  -ms-transition: opacity 0.3s linear;
+  transition: opacity 0.3s linear;
+}
+
+/* General styles for individual controls. */
+.vjs-default-skin .vjs-control {
+  position: relative; float: left;
+  text-align: center; margin: 0; padding: 0;
+  height: 2.6em; width: 2.6em;
+}
+
+.vjs-default-skin .vjs-control:focus {
+  outline: 0;
+}
+
+/* Hide control text visually, but have it available for screenreaders: h5bp.com/v */
+.vjs-default-skin .vjs-control-text { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
+
+
+/* Play/Pause
+-------------------------------------------------------------------------------- */
+.vjs-default-skin .vjs-play-control { width: 5em; cursor: pointer !important; }
+/* Play Icon */
+.vjs-default-skin.vjs-paused .vjs-play-control div { width: 15px; height: 17px; background: url('video-js.png'); margin: 0.5em auto 0; }
+.vjs-default-skin.vjs-playing .vjs-play-control div { width: 15px; height: 17px; background: url('video-js.png') -25px 0; margin: 0.5em auto 0; }
+
+/* Rewind
+-------------------------------------------------------------------------------- */
+.vjs-default-skin .vjs-rewind-control { width: 5em; cursor: pointer !important; }
+.vjs-default-skin .vjs-rewind-control div { width: 19px; height: 16px; background: url('video-js.png'); margin: 0.5em auto 0; }
+
+/* Volume/Mute
+-------------------------------------------------------------------------------- */
+.vjs-default-skin .vjs-mute-control { width: 3.8em; cursor: pointer !important; float: right; }
+.vjs-default-skin .vjs-mute-control div { width: 22px; height: 16px; background: url('video-js.png') -75px -25px; margin: 0.5em auto 0; }
+.vjs-default-skin .vjs-mute-control.vjs-vol-0 div { background: url('video-js.png') 0 -25px; }
+.vjs-default-skin .vjs-mute-control.vjs-vol-1 div { background: url('video-js.png') -25px -25px; }
+.vjs-default-skin .vjs-mute-control.vjs-vol-2 div { background: url('video-js.png') -50px -25px; }
+
+
+.vjs-default-skin .vjs-volume-control { width: 5em; float: right; }
+.vjs-default-skin .vjs-volume-bar { 
+  position: relative; width: 5em; height: 0.6em; margin: 1em auto 0; background: #666; cursor: pointer !important; 
+
+  -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;
+
+  background: #333;
+  background: -moz-linear-gradient(top, #333 0%, #666 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#666));
+  background: -webkit-linear-gradient(top, #333 0%,#666 100%);
+  background: -o-linear-gradient(top, #333 0%,#666 100%);
+  background: -ms-linear-gradient(top, #333 0%,#666 100%);
+  background: linear-gradient(top, #333 0%,#666 100%);
+}
+.vjs-default-skin .vjs-volume-level { 
+  position: absolute; top: 0; left: 0; height: 0.6em; background: #fff; 
+
+  -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;
+
+  background: #ffffff;
+  background: -moz-linear-gradient(top, #ffffff 0%, #cccccc 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#cccccc));
+  background: -webkit-linear-gradient(top, #ffffff 0%,#cccccc 100%);
+  background: -o-linear-gradient(top, #ffffff 0%,#cccccc 100%);
+  background: -ms-linear-gradient(top, #ffffff 0%,#cccccc 100%);
+  background: linear-gradient(top, #ffffff 0%,#cccccc 100%);
+}
+.vjs-default-skin .vjs-volume-handle { 
+  position: absolute; top: -0.2em; width: 0.8em; height: 0.8em; background: #ccc; left: 0;
+  border: 1px solid #fff;
+  -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em;
+}
+
+/* Progress
+-------------------------------------------------------------------------------- */
+.vjs-default-skin div.vjs-progress-control {
+  position: absolute;
+  left: 4.8em; right: 4.8em; /* Leave room for time displays. */
+  height: 1.0em; width: auto;
+  top: -1.3em; /* Set above the rest of the controls. And leave room for 2px of borders (progress bottom and controls top). */
+  border-bottom: 1px solid #1F1F1F;
+  border-top: 1px solid #222;
+
+  /* CSS Gradient */
+  background: #333;
+  background: -moz-linear-gradient(top, #333 0%, #222 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222), color-stop(100%,#333));
+  background: -webkit-linear-gradient(top, #222 0%,#333 100%);
+  background: -o-linear-gradient(top, #333 0%,#222 100%);
+  background: -ms-linear-gradient(top, #333 0%,#222 100%);
+  background: linear-gradient(top, #333 0%,#222 100%);
+
+  /* 1px top shadow */
+/*  -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15);*/
+}
+
+/* Box containing play and load progresses. Also acts as seek scrubber. */
+.vjs-default-skin .vjs-progress-holder {
+  position: relative; cursor: pointer !important; /*overflow: hidden;*/
+  padding: 0; margin: 0; /* Placement within the progress control item */
+  height: 1.0em;
+  -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em;
+
+  /* CSS Gradient */
+  background: #111;
+  background: -moz-linear-gradient(top, #111 0%, #262626 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#111), color-stop(100%,#262626));
+  background: -webkit-linear-gradient(top, #111 0%,#262626 100%);
+  background: -o-linear-gradient(top, #111 0%,#262626 100%);
+  background: -ms-linear-gradient(top, #111 0%,#262626 100%);
+  background: linear-gradient(top, #111 0%,#262626 100%);
+}
+.vjs-default-skin .vjs-progress-holder .vjs-play-progress,
+.vjs-default-skin .vjs-progress-holder .vjs-load-progress { /* Progress Bars */
+  position: absolute; display: block; height: 1.0em; margin: 0; padding: 0;
+  left: 0; top: 0; /*Needed for IE6*/
+  -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em;
+
+  /*width: 0;*/
+}
+
+.vjs-default-skin .vjs-play-progress {
+  /* CSS Gradient. */ 
+  background: #fff; /* Old browsers */
+  background: -moz-linear-gradient(top, #fff 0%, #d6d6d6 50%, #fff 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(50%,#d6d6d6), color-stop(100%,#fff));
+  background: -webkit-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
+  background: -o-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
+  background: -ms-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
+  background: linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
+  
+  background: #efefef;
+  background: -moz-linear-gradient(top, #efefef 0%, #f5f5f5 50%, #dbdbdb 50%, #f1f1f1 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(50%,#f5f5f5), color-stop(50%,#dbdbdb), color-stop(100%,#f1f1f1));
+  background: -webkit-linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
+  background: -o-linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
+  background: -ms-linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#f1f1f1',GradientType=0 );
+  background: linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
+}
+.vjs-default-skin .vjs-load-progress {
+  opacity: 0.8;
+
+  /* CSS Gradient */
+  background: #666;
+  background: -moz-linear-gradient(top, #666 0%, #333 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666), color-stop(100%,#333));
+  background: -webkit-linear-gradient(top, #666 0%,#333 100%);
+  background: -o-linear-gradient(top, #666 0%,#333 100%);
+  background: -ms-linear-gradient(top, #666 0%,#333 100%);
+  background: linear-gradient(top, #666 0%,#333 100%);
+}
+
+.vjs-default-skin div.vjs-seek-handle {
+  position: absolute; 
+  width: 16px; height: 16px; /* Match img pixles */
+  margin-top: -0.3em;
+  left: 0; top: 0; /*Needed for IE6*/
+
+  background: url('video-js.png') 0px -50px;
+  /* CSS Curved Corners. Needed to make shadows curved. */
+  -moz-border-radius: 0.8em; -webkit-border-radius: 0.8em; border-radius: 0.8em;
+  /* CSS Shadows */
+  -webkit-box-shadow: 0px 2px 4px 0px #000; -moz-box-shadow: 0px 2px 4px 0px #000; box-shadow: 0px 2px 4px 0px #000;
+}
+/* Time Display
+-------------------------------------------------------------------------------- */
+.vjs-default-skin .vjs-time-controls {
+  position: absolute;
+  right: 0;
+  height: 1.0em; width: 4.8em;
+  top: -1.3em;
+  border-bottom: 1px solid #1F1F1F;
+  border-top: 1px solid #222;
+  background-color: #333;
+
+  font-size: 1em; line-height: 1.0em; font-weight: normal; font-family: Helvetica, Arial, sans-serif;
+  
+  background: #333;
+  background: -moz-linear-gradient(top, #222 0%, #333 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222), color-stop(100%,#333));
+  background: -webkit-linear-gradient(top, #222 0%,#333 100%);
+  background: -o-linear-gradient(top, #333 0%,#222 100%);
+  background: -ms-linear-gradient(top, #333 0%,#222 100%);
+  background: linear-gradient(top, #333 0%,#222 100%);
+
+  /* 1px top shadow */
+/*  -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15);*/
+}
+
+.vjs-default-skin .vjs-current-time { left: 0; }
+
+.vjs-default-skin .vjs-duration { right: 0; display: none; }
+.vjs-default-skin .vjs-remaining-time { right: 0; }
+
+.vjs-time-divider { display:none; }
+
+.vjs-default-skin .vjs-time-control { font-size: 1em; line-height: 1; font-weight: normal; font-family: Helvetica, Arial, sans-serif; }
+.vjs-default-skin .vjs-time-control span { line-height: 25px; /* Centering vertically */ }
+
+/* Fullscreen
+-------------------------------------------------------------------------------- */
+.vjs-secondary-controls { float: right; }
+
+.vjs-default-skin .vjs-fullscreen-control { width: 3.8em; cursor: pointer !important; float: right; }
+.vjs-default-skin .vjs-fullscreen-control div { width: 16px; height: 16px; background: url('video-js.png') -50px 0; margin: 0.5em auto 0; }
+
+.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control div { background: url('video-js.png') -75px 0; }
+
+
+/* Big Play Button (at start)
+---------------------------------------------------------*/
+.vjs-default-skin .vjs-big-play-button {
+  display: block; /* Start hidden */ z-index: 2;
+  position: absolute; top: 50%; left: 50%; width: 8.0em; height: 8.0em; margin: -43px 0 0 -43px; text-align: center; vertical-align: center; cursor: pointer !important;
+  border: 0.3em solid #fff; opacity: 0.95;
+  -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px;
+
+  background: #454545;
+  background: -moz-linear-gradient(top, #454545 0%, #232323 50%, #161616 50%, #3f3f3f 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#454545), color-stop(50%,#232323), color-stop(50%,#161616), color-stop(100%,#3f3f3f));
+  background: -webkit-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
+  background: -o-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
+  background: -ms-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#454545', endColorstr='#3f3f3f',GradientType=0 );
+  background: linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
+
+  /* CSS Shadows */
+  -webkit-box-shadow: 4px 4px 8px #000; -moz-box-shadow: 4px 4px 8px #000; box-shadow: 4px 4px 8px #000;
+}
+
+.vjs-default-skin 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;
+}
+
+.vjs-default-skin div.vjs-big-play-button span {
+  position: absolute; top: 50%; left: 50%;
+  display: block; width: 35px; height: 42px;
+  margin: -20px 0 0 -15px; /* Using negative margin to center image. */
+  background: url('video-js.png') -100px 0;
+}
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>HTML5 Video Player</title>
+
+  <link href="design/video-js.css" rel="stylesheet" type="text/css">
+
+  <!--[if IE]>
+    <script src="https://getfirebug.com/releases/lite/1.3/firebug-lite.js"></script>
+  <!--<![endif]-->
+
+  <!-- <script src="dist/video.js"></script> -->
+
+  <script src="src/core.js"></script>
+  <script src="src/lib.js"></script>
+  <script src="src/ecma.js"></script>
+  <script src="src/json.js"></script>
+
+  <script src="src/log.js"></script>
+
+  <script src="src/api.js"></script>
+  <script src="src/events.js"></script>
+
+  <script src="src/tracks.js"></script>
+
+  <script src="src/behaviors/behaviors.js"></script>
+  <script src="src/behaviors/seekBar.js"></script>
+  <script src="src/behaviors/volume.js"></script>
+  <script src="src/behaviors/texttrackdisplays.js"></script>
+
+  <script src="src/controls/bigPlay.js"></script>
+  <script src="src/controls/bar.js"></script>
+  <script src="src/controls/subtitlesBox.js"></script>
+
+  <script src="src/tech/html5.js"></script>
+  <script src="src/tech/flowplayer.js"></script>
+
+  <script src="src/tech/h5swf.js"></script>
+
+  <script src="src/autoload.js"></script>
+  
+  <script type="text/javascript" src="flash/swfobject.js"></script>
+
+</head>
+<body>
+  <video id="vid1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264" data-setup='{"example_option":true}' poster="http://video-js.zencoder.com/oceans-clip.png">
+    <!-- <source src="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv" type='video/flv'> -->
+    <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://stg.video.howcookingworks.com/video/posts/e110d95f6770c62e8d3ba52ff221e7f7907683ac266939/e110d95f6770c62e8d3ba52ff221e7f7907683ac266939_high.webm" type='video/webm'> -->
+    <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"'>
+    <!-- <track kind="subtitles" src="http://videojs.com/subtitles/demo-subtitles.srt" srclang="en-US" label="English"></track> -->
+    <!-- <track kind="subtitles" src="demo-subtitles.srt" srclang="en-US" label="English"></track> -->
+  </video>
+
+  <script>
+    // vid = document.getElementById("vid2");
+  </script>
+
+</body>
+</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>
@@ -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
-
-
@@ -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>
@@ -1,24 +1,4 @@
-/*
-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){
+;(function(window, undefined){
  var document = window.document;

@@ -2,47 +2,57 @@
 ================================================================================ */
 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);
+  apiCall: function(method, arg){
+    if (this.isReady) {
+      if (this.api[method]) {
+        return this.api[method].call(this, arg);
+      } else {
+        throw new Error("The '"+method+"' method is not available on the playback technology's API");
      }
+    } else {
+      throw new Error("The playback technology API is not ready yet. Use player.ready(myFunction).");
    }
  },

-  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); },
+  /* Listener types: play, pause, timeupdate, bufferedupdate, ended, volumechange, error */
+  addEvent: function(type, fn){
+    return _V_.addEvent(this.box, type, _V_.proxy(this, fn));
+  },
+  removeEvent: function(type, fn){
+    return _V_.removeEvent(this.box, type, fn);
+  },
+  triggerEvent: function(type, e){
+    return _V_.triggerEvent(this.box, type, e);
+  },
+
+  play: function(){
+    this.apiCall("play"); return this;
+  },
+  pause: function(){
+    this.apiCall("pause"); return this;
+  },
+  paused: function(){
+    return this.apiCall("paused");
+  },

  currentTime: function(seconds){
    if (seconds !== undefined) {
      this.values.currentTime = seconds; // Cache the last set value for smoother scrubbing.
-      this.api.setCurrentTime.call(this, seconds);
+      this.apiCall("setCurrentTime", seconds);
+      if (this.manualTimeUpdates) { this.triggerEvent("timeupdate"); }
      return this;
    }
-    return this.api.currentTime.apply(this);
+    return this.apiCall("currentTime");
+  },
+  duration: function(){
+    return this.apiCall("duration");
+  },
+  remainingTime: function(){
+    return this.duration() - this.currentTime();
  },

-  duration: function(){ return this.api.duration.apply(this); },
-
  buffered: function(){
-    var buffered = this.api.buffered.apply(this),
+    var buffered = this.apiCall("buffered"),
        start = 0, end = this.values.bufferEnd = this.values.bufferEnd || 0,
        timeRange;

@@ -52,110 +62,233 @@ VideoJS.fn.extend({
      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; }
-    };
+    return _V_.createTimeRange(start, end);
  },
+
  // Calculates amount of buffer is full
-  bufferedPercent: function(){ return (this.duration()) ? this.buffered().end(0) / this.duration() : 0; },
+  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.apiCall("setVolume", vol);
      this.setLocalStorage("volume", vol);
      return this;
    }
    // if (this.values.volume) { return this.values.volume; }
-    return this.api.volume.call(this);
+    return this.apiCall("volume");
+  },
+  muted: function(muted){
+    if (muted !== undefined) {
+      this.apiCall("setMuted", muted);
+      return this;
+    }
+    return this.apiCall("muted");
  },

  width: function(width, skipListeners){
    if (width !== undefined) {
-      this.element.width = width; // Not using style so it can be overridden on fullscreen.
+      this.box.width = width;
      this.box.style.width = width+"px";
-      if (!skipListeners) { this.triggerListeners("resize"); }
+      if (!skipListeners) { this.triggerEvent("resize"); }
      return this;
    }
-    return parseInt(this.element.getAttribute("width"));
-    // return this.element.offsetWidth;
+    return parseInt(this.box.getAttribute("width"));
  },
  height: function(height){
    if (height !== undefined) {
-      this.element.height = height;
+      this.box.height = height;
      this.box.style.height = height+"px";
-      this.triggerListeners("resize");
+      this.triggerEvent("resize");
      return this;
    }
-    return parseInt(this.element.getAttribute("height"));
-    // return this.element.offsetHeight;
+    return parseInt(this.box.getAttribute("height"));
  },
  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); },
+  supportsFullScreen: function(){ return this.apiCall("supportsFullScreen"); },

  // Turn on fullscreen (or window) mode
  enterFullScreen: function(){
-    if (this.supportsFullScreen()) {
-      this.api.enterFullScreen.call(this);
+    if (false && this.supportsFullScreen()) {
+      this.api("enterFullScreen");
    } else {
      this.enterFullWindow();
    }
-    this.triggerListeners("enterFullScreen");
+    this.triggerEvent("enterFullScreen");
    return this;
  },

  exitFullScreen: function(){
-    if (!this.supportsFullScreen()) {
+    if (true || !this.supportsFullScreen()) {
      this.exitFullWindow();
    }
-    this.triggerListeners("exitFullScreen");
+    this.triggerEvent("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));
+    _V_.addEvent(document, "keydown", _V_.proxy(this, this.fullscreenOnEscKey));
+
    // Add listener for a window resize
-    _V_.addListener(window, "resize", this.fullscreenOnWindowResize.rEvtContext(this));
+    _V_.addEvent(window, "resize", _V_.proxy(this, this.fullscreenOnWindowResize));
+
    // Hide any scroll bars
    document.documentElement.style.overflow = 'hidden';
+
    // Apply fullscreen styles
+    _V_.addClass(document.body, "vjs-full-window");
    _V_.addClass(this.box, "vjs-fullscreen");
-    // Resize the box, controller, and poster
-    this.positionAll();
-    this.triggerListeners("enterFullWindow");
+
+    this.triggerEvent("enterFullWindow");
  },

  exitFullWindow: function(){
    this.videoIsFullScreen = false;
-    document.removeEventListener("keydown", this.fullscreenOnEscKey, false);
-    window.removeEventListener("resize", this.fullscreenOnWindowResize, false);
+    _V_.removeEvent(document, "keydown", this.fullscreenOnEscKey);
+    _V_.removeEvent(window, "resize", this.fullscreenOnWindowResize);
+
    // Unhide scroll bars.
    document.documentElement.style.overflow = this.docOrigOverflow;
+
    // Remove fullscreen styles
+    _V_.removeClass(document.body, "vjs-full-window");
    _V_.removeClass(this.box, "vjs-fullscreen");
+
    // Resize the box, controller, and poster to original sizes
    this.positionAll();
-    this.triggerListeners("exitFullWindow");
+    this.triggerEvent("exitFullWindow");
  },

-  src: function(src){
-    this.api.src.call(this, src);
+  // src is a pretty powerful function
+  // If you pass it an array of source objects, it will find the best source to play and use that object.src
+  //   If the new source requires a new playback technology, it will switch to that.
+  // If you pass it an object, it will set the source to object.src
+  // If you pass it anything else (url string) it will set the video source to that
+  src: function(source){
+    // Case: Array of source objects to choose from and pick the best to play
+    if (source instanceof Array) {
+      techLoop: // Named loop for breaking both loops
+      // Loop through each playback technology in the options order
+      for (var i=0,j=this.options.techOrder;i<j.length;i++) {
+        var techName = j[i],
+            tech = _V_.tech[techName];
+
+        // Check if the browser supports this technology
+        if (tech.supported()) {
+
+          // Loop through each source object
+          for (var a=0,b=this.options.sources;a<b.length;a++) {
+            var source = b[a];
+
+            // Check if source can be played with this technology
+            if (tech.canPlaySource.call(this, source)) {
+
+              // If this technology is already loaded, set source
+              if (techName == this.currentTechName) {
+                this.src(source); // Passing the source object
+
+              // Otherwise load this technology with chosen source
+              } else {
+                this.loadTech(techName, source);
+              }
+
+              break techLoop; // Break both loops
+            }
+          }
+        }
+      }
+
+    // Case: Source object { src: "", type: "" ... }
+    } else if (source instanceof Object) {
+      this.src(source.src);
+
+    // Case: URL String (http://myvideo...)
+    } else {
+      this.apiCall("src", source);
+      this.load();
+    }
    return this;
-  }
-});
+  },
+
+  // Begin loading the src data
+  load: function(){
+    this.apiCall("load");
+    return this;
+  },
+  currentSrc: function(){
+    return this.apiCall("currentSrc");
+  },
+
+  textTrackValue: function(kind, value){
+    if (value !== undefined) {
+      this.values[kind] = value;
+      this.triggerEvent(kind+"update");
+      return this;
+    }
+    return this.values[kind];
+  },
+
+  // Attributes/Options
+  preload: function(value){
+    if (value !== undefined) {
+      this.apiCall("setPreload", value);
+      this.options.preload = value;
+      return this;
+    }
+    return this.apiCall("preload", value);
+  },
+  autoplay: function(value){
+    if (value !== undefined) {
+      this.apiCall("setAutoplay", value);
+      this.options.autoplay = value;
+      return this;
+    }
+    return this.apiCall("autoplay", value);
+  },
+  loop: function(value){
+    if (value !== undefined) {
+      this.apiCall("setLoop", value);
+      this.options.loop = value;
+      return this;
+    }
+    return this.apiCall("loop", value);
+  },
+
+  controls: function(){ return this.options.controls; },
+  textTracks: function(){ return this.options.tracks; },
+
+  error: function(){ return this.apiCall("error"); },
+  networkState: function(){ return this.apiCall("networkState"); },
+  readyState: function(){ return this.apiCall("readyState"); },
+  seeking: function(){ return this.apiCall("seeking"); },
+  initialTime: function(){ return this.apiCall("initialTime"); },
+  startOffsetTime: function(){ return this.apiCall("startOffsetTime"); },
+  played: function(){ return this.apiCall("played"); },
+  seekable: function(){ return this.apiCall("seekable"); },
+  ended: function(){ return this.apiCall("ended"); },
+  videoTracks: function(){ return this.apiCall("videoTracks"); },
+  audioTracks: function(){ return this.apiCall("audioTracks"); },
+  videoWidth: function(){ return this.apiCall("videoWidth"); },
+  videoHeight: function(){ return this.apiCall("videoHeight"); },
+  defaultPlaybackRate: function(){ return this.apiCall("defaultPlaybackRate"); },
+  playbackRate: function(){ return this.apiCall("playbackRate"); },
+  mediaGroup: function(){ return this.apiCall("mediaGroup"); },
+  controller: function(){ return this.apiCall("controller"); },
+  controls: function(){ return this.apiCall("controls"); },
+  defaultMuted: function(){ return this.apiCall("defaultMuted"); }
+});
@@ -0,0 +1,37 @@
+_V_.loadPlayers = function(){
+  var vids = document.getElementsByTagName("video"),
+      options, vid;
+  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) {
+        // Check if this video has already been set up by video.js.
+        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 = JSON.parse(options || "{}");
+            // Create new video.js instance.
+            VideoJS.players[vid.id] = new VideoJS(vid, options);
+          }
+        }
+
+      // If getAttribute isn't defined, we need to wait for the DOM.
+      } else {
+        _V_.loadPlayerTimeout(1);
+        break;
+      }
+    }
+  } else {
+    _V_.loadPlayerTimeout(1);
+  }
+};
+_V_.loadPlayerTimeout = function(wait){
+  setTimeout(_V_.loadPlayers, wait);
+};
+_V_.loadPlayerTimeout(1); // Let vjs javascript finish executing
@@ -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;
-      });
-    }
-  }
-);
-
@@ -0,0 +1,310 @@
+/* Box Behaviors - The primary container element
+================================================================================ */
+VideoJS.fn.newBehavior("box", 
+  function(element){
+    _V_.addClass(element, "vjs-paused");
+    this.addEvent("play", this.boxOnVideoPlay);
+    this.addEvent("pause", this.boxOnVideoPause);
+  },
+  function(){},
+  {
+    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");
+    }
+  }
+);
+
+/* Playback Technology Element Behaviors
+================================================================================ */
+VideoJS.fn.newBehavior("tech", 
+  function(element){
+    _V_.addEvent(element, "click", _V_.proxy(this, this.onPlayToggleClick));
+  },
+  function(element){
+    _V_.removeEvent(element, "click", this.onPlayToggleClick);
+  },
+  {}
+);
+
+/* Control Bar Behaviors
+================================================================================ */
+VideoJS.fn.newBehavior("controlBar",
+  function(element){
+    if (!this.bels.controlBars) {
+      this.bels.controlBars = [];
+      // this.addEvent("mouseover", this.showControlBars);
+      // this.addEvent("mouseout", this.hideControlBars);
+    }
+    this.bels.controlBars.push(element);
+  },
+  function(element){},
+  {
+    showControlBars: function(){
+      this.each(this.bels.controlBars, function(bar){
+        bar.style.opacity = 1;
+        // bar.style.display = "block";
+      });
+    },
+    hideControlBars: function(){
+      this.each(this.bels.controlBars, function(bar){
+        bar.style.opacity = 0;
+        // bar.style.display = "none";
+      });
+    }
+  }
+);
+
+/* PlayToggle, PlayButton, PauseButton Behaviors
+================================================================================ */
+// Play Toggle
+VideoJS.fn.newBehavior("playToggle", function(element){
+    if (!this.bels.playToggles) {
+      this.bels.playToggles = [];
+      this.addEvent("play", this.playTogglesOnPlay);
+      this.addEvent("pause", this.playTogglesOnPause);
+    }
+    this.bels.playToggles.push(element);
+    _V_.addEvent(element, "click", _V_.proxy(this, this.onPlayToggleClick));
+    _V_.addEvent(element, "focus", _V_.proxy(this, this.onPlayToggleFocus));
+    _V_.addEvent(element, "blur", _V_.proxy(this, this.onPlayToggleBlur));
+  },
+  function(){},
+  {
+    onPlayToggleClick: function(event){
+      if (this.paused()) {
+        this.play();
+      } else {
+        this.pause();
+      }
+    },
+    playTogglesOnPlay: function(event){
+      this.each(this.bels.playToggles, function(toggle){
+        _V_.removeClass(toggle, "vjs-paused");
+        _V_.addClass(toggle, "vjs-playing");
+      });
+    },
+    playTogglesOnPause: function(event){
+      this.each(this.bels.playToggles, function(toggle){
+        _V_.removeClass(toggle, "vjs-playing");
+        _V_.addClass(toggle, "vjs-paused");
+      });
+    },
+    onPlayToggleFocus: function(event){
+      _V_.addEvent(document, "keyup", _V_.proxy(this, this.onPlayToggleKey));
+    },
+    onPlayToggleKey: function(event){
+      if (event.which == 32 || event.which == 13) {
+        event.preventDefault();
+        this.onPlayToggleClick();
+      }
+    },
+    onPlayToggleBlur: function(event){
+       _V_.removeEvent(document, "keyup", _V_.proxy(this, this.onPlayToggleKey));
+    }
+  }
+);
+// Play
+VideoJS.fn.newBehavior("playButton", function(element){
+    _V_.addEvent(element, "click", _V_.proxy(this, this.onPlayButtonClick));
+  },
+  function(){},
+  {
+    onPlayButtonClick: function(event){ this.play(); }
+  }
+);
+// Pause
+VideoJS.fn.newBehavior("pauseButton", function(element){
+    _V_.addEvent(element, "click", _V_.proxy(this, this.onPauseButtonClick));
+  },
+  function(){},
+  {
+    onPauseButtonClick: function(event){ this.pause(); }
+  }
+);
+
+/* Current Time Display Behaviors
+================================================================================ */
+VideoJS.fn.newBehavior("currentTimeDisplay", function(element){
+    if (!this.bels.currentTimeDisplays) {
+      this.bels.currentTimeDisplays = [];
+      this.addEvent("timeupdate", this.updateCurrentTimeDisplays);
+    }
+    this.bels.currentTimeDisplays.push(element);
+  },
+  function(){},
+  {
+    // 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.bels.currentTimeDisplays, function(dis){
+        dis.innerHTML = _V_.formatTime(time, this.duration());
+      });
+    }
+  }
+);
+
+/* Duration Display Behaviors
+================================================================================ */
+VideoJS.fn.newBehavior("durationDisplay", function(element){
+    if (!this.bels.durationDisplays) {
+      this.bels.durationDisplays = [];
+      this.addEvent("timeupdate", this.updateDurationDisplays);
+    }
+    this.bels.durationDisplays.push(element);
+  },
+  function(){},
+  {
+    updateDurationDisplays: function(){
+      this.each(this.bels.durationDisplays, function(dis){
+        if (this.duration()) { dis.innerHTML = _V_.formatTime(this.duration()); }
+      });
+    }
+  }
+);
+
+/* Duration Display Behaviors
+================================================================================ */
+VideoJS.fn.newBehavior("remainingTimeDisplay", function(element){
+    if (!this.bels.remainingTimeDisplays) {
+      this.bels.remainingTimeDisplays = [];
+      this.addEvent("timeupdate", this.updateRemainingTimeDisplays);
+    }
+    this.bels.remainingTimeDisplays.push(element);
+  },
+  function(){},
+  {
+    updateRemainingTimeDisplays: function(){
+      this.each(this.bels.remainingTimeDisplays, function(dis){
+        if (this.duration()) { dis.innerHTML = "-"+_V_.formatTime(this.remainingTime()); }
+      });
+    }
+  }
+);
+
+/* Time Left (remaining) Display Behaviors
+================================================================================ */
+VideoJS.fn.newBehavior("timeLeftDisplay", function(element){
+    if (!this.bels.timeLeftDisplays) {
+      this.bels.timeLeftDisplays = [];
+      this.addEvent("timeupdate", this.updateTimeLeftDisplays);
+    }
+    this.bels.timeLeftDisplays.push(element);
+  },
+  function(){
+    this.removeEvent("timeupdate", this.updateTimeLeftDisplays);
+    delete this.bels.timeLeftDisplays;
+  },
+  {
+    updateTimeLeftDisplays: function(){
+      // Allows for smooth scrubbing, when player can't keep up.
+      var time = (this.scrubbing) ? this.values.currentTime : this.currentTime();
+      this.each(this.bels.timeLeftDisplays, function(dis){
+        dis.innerHTML = "-" + _V_.formatTime(this.duration() - time);
+      });
+    }
+  }
+);
+
+/* Volume Scrubber Behaviors
+================================================================================ */
+VideoJS.fn.newBehavior("volumeScrubber", function(element){
+    // Binding with element as 'this' so the progress holder element can be retrieved in IE.
+    // IE doesn't support the currentTarget event attr.
+    var player = this;
+    _V_.addEvent(element, "mousedown", _V_.proxy(element, function(e){
+      player.onVolumeScrubberMouseDown(e, this);
+    }));
+  },
+  function(){},
+  {
+    // 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_.addEvent(document, "mousemove", _V_.proxy(this, this.onVolumeScrubberMouseMove));
+      _V_.addEvent(document, "mouseup", _V_.proxy(this, this.onVolumeScrubberMouseUp));
+    },
+    onVolumeScrubberMouseMove: function(event){
+      this.setVolumeWithScrubber(event);
+    },
+    onVolumeScrubberMouseUp: function(event){
+      this.setVolumeWithScrubber(event);
+      _V_.unblockTextSelection();
+      _V_.removeEvent(document, "mousemove", this.onVolumeScrubberMouseMove, false);
+      _V_.removeEvent(document, "mouseup", this.onVolumeScrubberMouseUp, false);
+    },
+    setVolumeWithScrubber: function(event){
+      var newVol = _V_.getRelativePosition(event.pageX, this.currentScrubber);
+      this.volume(newVol);
+    }
+  }
+);
+
+/* Volume Display Behaviors
+================================================================================ */
+VideoJS.fn.newBehavior("volumeDisplay", function(element){
+    if (!this.bels.volumeDisplays) {
+      this.bels.volumeDisplays = [];
+      this.addEvent("volumechange", this.updateVolumeDisplays);
+    }
+    this.bels.volumeDisplays.push(element);
+    this.updateVolumeDisplay(element); // Set the display to the initial volume
+  },
+  function(){},
+  {
+    // Update the volume control display
+    // Unique to these default controls. Uses borders to create the look of bars.
+    updateVolumeDisplays: function(){
+      if (!this.bels.volumeDisplays) { return; }
+      this.each(this.bels.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");
+        }
+      });
+    }
+  }
+);
+
+/* Fullscreen Toggle Behaviors
+================================================================================ */
+VideoJS.fn.newBehavior("fullscreenToggle", function(element){
+    _V_.addEvent(element, "click", _V_.proxy(this, this.onFullscreenToggleClick));
+  },
+  function(){},
+  {
+    // 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();
+      }
+    }
+  }
+);
@@ -0,0 +1,213 @@
+/* Seek Bar Behaviors (Current Time Scrubber)
+================================================================================ */
+VideoJS.fn.newBehavior("seekBar",
+  function(element){
+    if (!this.bels.seekBars) {
+      this.bels.seekBars = [];
+      this.addEvent("timeupdate", this.updateSeekBars);
+    }
+    this.bels.seekBars.push(element);
+
+    // Get and store related child objects (progress bar & handle)
+    var data = _V_.getData(element);
+    this.each(element.childNodes, function(c){
+      if (c.className) {
+        if (c.className.indexOf("seek-handle") != -1) {
+          data.seekHandle = c;
+        } else if (c.className.indexOf("play-progress") != -1) {
+          data.playProgress = c;
+        }
+      }
+    });
+
+    // Binding with element as 'this' so the progress holder element can be retrieved in IE.
+    // IE doesn't support the currentTarget event attr.
+    var player = this;
+    _V_.addEvent(element, "mousedown", _V_.proxy(element, function(event){
+      player.onSeekBarMouseDown(event, this);
+    }));
+    _V_.addEvent(element, "focus", _V_.proxy(this, this.onSeekBarFocus));
+    _V_.addEvent(element, "blur", _V_.proxy(this, this.onSeekBarBlur));
+  },
+  function(){},
+  {
+    // Adjust the play position when the user drags on the progress bar
+    onSeekBarMouseDown: function(event, currentTarget){
+      event.preventDefault();
+      _V_.blockTextSelection();
+
+      this.currSeekBar = currentTarget;
+      this.currHandle = _V_.getData(currentTarget).seekHandle || false;
+
+      this.scrubbing = true;
+
+      this.videoWasPlaying = !this.paused();
+      this.pause();
+
+      this.setCurrentTimeWithScrubber(event);
+      _V_.addEvent(document, "mousemove", _V_.proxy(this, this.onSeekBarMouseMove));
+      _V_.addEvent(document, "mouseup", _V_.proxy(this, this.onSeekBarMouseUp));
+    },
+    onSeekBarMouseMove: function(event){ // Removeable
+      this.setCurrentTimeWithScrubber(event);
+    },
+    onSeekBarMouseUp: function(event){ // Removeable
+      _V_.unblockTextSelection();
+      _V_.removeEvent(document, "mousemove", this.onSeekBarMouseMove, false);
+      _V_.removeEvent(document, "mouseup", this.onSeekBarMouseUp, false);
+      this.scrubbing = false;
+      if (this.videoWasPlaying) {
+        this.play();
+      }
+    },
+    setCurrentTimeWithScrubber: function(event){
+      var bar = this.currSeekBar,
+          barX = _V_.findPosX(bar),
+          barW = bar.offsetWidth,
+          handle = this.currHandle,
+          handleW = (handle) ? handle.offsetWidth : 0;
+          
+          // Adjusted X and Width, so handle doesn't go outside the bar
+          barAX = barX + (handleW / 2),
+          barAW = barW - handleW,
+          // Percent that the click is through the adjusted area
+          percent = Math.max(0, Math.min(1, (event.pageX - barAX) / barAW)),
+          // Percent translated to pixels
+          percentPix = percent * barAW,
+          // Percent translated to seconds
+          newTime = percent * this.duration();
+
+      // Don't let video end while scrubbing.
+      if (newTime == this.duration()) { newTime = newTime - 0.1; }
+
+      // Set new time (tell player to seek to new time)
+      this.currentTime(newTime);
+    },
+    getSeekBarAdjustedWidth: function(bar, handle){
+      var bar = this.currSeekBar,
+          barX = _V_.findPosX(bar),
+          barW = bar.offsetWidth,
+          handle = this.currHandle,
+          handleW = (handle) ? handle.offsetWidth : 0;
+
+          // Adjusted X and Width, so handle doesn't go outside the bar
+          barAX = barX + (handleW / 2),
+          barAW = barW - handleW;
+    },
+    updateSeekBars: function(){
+      // If scrubbing, use the cached currentTime value for speed
+      var progress = /* (this.scrubbing) ? this.scrubTime / this.duration() : */ this.currentTime() / this.duration();
+      // Protect against no duration and other division issues
+      if (isNaN(progress)) { progress = 0; }
+      
+      this.each(this.bels.seekBars, function(bar){
+        var barData = _V_.getData(bar),
+            barX = _V_.findPosX(bar),
+            barW = bar.offsetWidth,
+            handle = barData.seekHandle,
+            progBar = barData.playProgress,
+            handleW = (handle) ? handle.offsetWidth : 0;
+
+            // Adjusted X and Width, so handle doesn't go outside the bar
+            barAX = barX + (handleW / 2),
+            barAW = barW - handleW;
+            // Percent that the click is through the adjusted area
+            // percent = Math.max(0, Math.min(1, (event.pageX - barAX) / barAW)),
+            // Percent translated to pixels
+            // percentPix = percent * barAW,
+            // Percent translated to seconds
+            // newTime = percent * this.duration();
+        
+            
+        progBarProgress = _V_.round(progress * barAW + handleW / 2) + "px";
+        if (progBar && progBar.style) { progBar.style.width = progBarProgress; }
+        
+        handle.style.left = _V_.round(progress * barAW)+"px";
+      });
+      
+      
+      // Update bar length
+      // this.each(this.bels.playProgressBars, function(bar){
+      //   if (bar.style) { bar.style.width = _V_.round(progress * 100, 2) + "%"; }
+      // });
+
+      // Move Handle
+    },
+    onSeekBarFocus: function(event){
+      _V_.addEvent(document, "keyup", _V_.proxy(this, this.onSeekBarKey));
+    },
+    onSeekBarKey: function(event){
+      if (event.which == 37) {
+        event.preventDefault();
+        this.currentTime(this.currentTime() - 1);
+      } else if (event.which == 39) {
+        event.preventDefault();
+        this.currentTime(this.currentTime() + 1);
+      }
+    },
+    onSeekBarBlur: function(event){
+       _V_.removeEvent(document, "keyup", _V_.proxy(this, this.onSeekBarKey));
+    }
+  }
+);
+/* Seek Handle Behaviors
+================================================================================ */
+VideoJS.fn.newBehavior("seekHandle",
+  function(element){
+    if (!this.bels.seekHandles) { this.bels.seekHandles = []; }
+    this.bels.seekHandles.push(element);
+
+    // Store references between seekbar and seekhandle
+    _V_.getData(element).seekBar = element.parentNode;
+    _V_.getData(element.parentNode).seekHandle = element;
+  },
+  function(){},
+  {}
+);
+
+/* Play Progress Bar Behaviors
+================================================================================ */
+VideoJS.fn.newBehavior("playProgressBar",
+  function(element){
+    if (!this.bels.playProgressBars) {
+      this.bels.playProgressBars = [];
+      this.addEvent("timeupdate", this.updatePlayProgressBars);
+    }
+    this.bels.playProgressBars.push(element);
+  },
+  function(){
+    // Remove
+  },
+  {
+    // Ajust the play progress bar's width based on the current play time
+    updatePlayProgressBars: function(){
+      // If scrubbing, use the cached currentTime value for speed
+      var progress = (this.scrubbing) ? this.values.currentTime / this.duration() : this.currentTime() / this.duration();
+      // Protect against no duration and other division issues
+      if (isNaN(progress)) { progress = 0; }
+      // Update bar length
+      this.each(this.bels.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.bels.loadProgressBars) { this.bels.loadProgressBars = []; }
+    this.bels.loadProgressBars.push(element);
+    this.addEvent("progress", this.updateLoadProgressBars);
+  },
+  function(){},
+  {
+    updateLoadProgressBars: function(event){
+      // log("updating progress bars", this.bufferedPercent());
+      this.each(this.bels.loadProgressBars, function(bar){
+        if (bar.style) { bar.style.width = _V_.round(this.bufferedPercent() * 100, 2) + "%"; }
+      });
+    }
+  }
+);
@@ -0,0 +1,43 @@
+/* Text Track Displays
+================================================================================ */
+// Create a behavior type for each text track type (subtitlesDisplay, captionsDisplay, etc.).
+// Then you can easily do something like.
+//    player.addBehavior(myDiv, "subtitlesDisplay");
+// And the myDiv's content will be updated with the text change.
+_V_.each(["subtitles", "captions", "chapters", "descriptions"], function(type){
+  var add, remove,
+      name = type+"Display",
+      plural = name+"s",
+      updateFuncName = "update"+plural,
+      funcs = {};
+
+  // Add the behavior to an element
+  add = function(element){
+    if (!this.bels[plural]) {
+      this.bels[plural] = [];
+      this.addEvent(type+"update", this[updateFuncName]);
+    }
+    this.bels[plural].push(element);
+  };
+
+  // Remove the behavior from an element
+  remove = function(element){
+    if (this.bels[plural]) {
+      _V_.remove(element, this.bels[plural]);
+      if (this.bels[plural].length == 0) {
+        this.removeEvent(type+"update", this[updateFuncName]);
+        delete this.bels[plural];
+      }
+    }
+  };
+
+  // Addional needed funcitons (added directly to player)
+  funcs[updateFuncName] = function(){
+    var val = this.textTrackValue(type);
+    this.each(this.bels[plural], function(display){
+      display.innerHTML = val;
+    });
+  };
+
+  VideoJS.fn.newBehavior(name, add, remove, funcs);
+});
@@ -0,0 +1,177 @@
+/* Volume Behaviors
+================================================================================ */
+/* Seek Bar Behaviors (Current Time Scrubber)
+================================================================================ */
+VideoJS.fn.newBehavior("volumeBar",
+  function(element){
+    if (!this.bels.volumeBars) {
+      this.bels.volumeBars = [];
+      this.addEvent("volumechange", this.updateVolumeBars);
+    }
+    this.bels.volumeBars.push(element);
+
+    // Get and store related child objects (level & handle)
+    var data = _V_.getData(element);
+    this.each(element.childNodes, function(c){
+      if (c.className) {
+        if (c.className.indexOf("volume-handle") != -1) {
+          data.volumeHandle = c;
+        } else if (c.className.indexOf("volume-level") != -1) {
+          data.volumeLevel = c;
+        }
+      }
+    });
+
+    // Binding with element as 'this' so the holder element can be retrieved in IE.
+    // IE doesn't support the currentTarget event attr.
+    var player = this;
+    _V_.addEvent(element, "mousedown", _V_.proxy(element, function(event){
+      player.onVolumeBarMouseDown(event, this);
+    }));
+    // _V_.addEvent(element, "focus", _V_.proxy(this, this.onVolumeBarFocus));
+    // _V_.addEvent(element, "blur", _V_.proxy(this, this.onVolumeBarBlur));
+  },
+  function(){},
+  {
+    // Adjust the play position when the user drags on the progress bar
+    onVolumeBarMouseDown: function(event, currentTarget){
+      event.preventDefault();
+      _V_.blockTextSelection();
+
+      this.currVolumeBar = currentTarget;
+      this.currHandle = _V_.getData(currentTarget).volumeHandle || false;
+
+      this.setVolumeWithSlider(event);
+      _V_.addEvent(document, "mousemove", _V_.proxy(this, this.onVolumeBarMouseMove));
+      _V_.addEvent(document, "mouseup", _V_.proxy(this, this.onVolumeBarMouseUp));
+    },
+    onVolumeBarMouseMove: function(event){ // Removeable
+      this.setVolumeWithSlider(event);
+    },
+    onVolumeBarMouseUp: function(event){ // Removeable
+      _V_.unblockTextSelection();
+      _V_.removeEvent(document, "mousemove", this.onVolumeBarMouseMove, false);
+      _V_.removeEvent(document, "mouseup", this.onVolumeBarMouseUp, false);
+    },
+    setVolumeWithSlider: function(event){
+      var bar = this.currVolumeBar,
+          barX = _V_.findPosX(bar),
+          barW = bar.offsetWidth,
+          handle = this.currHandle,
+          handleW = (handle) ? handle.offsetWidth : 0;
+          
+          // Adjusted X and Width, so handle doesn't go outside the bar
+          barAX = barX + (handleW / 2),
+          barAW = barW - handleW,
+          // Percent that the click is through the adjusted area
+          percent = Math.max(0, Math.min(1, (event.pageX - barAX) / barAW)),
+          // Percent translated to pixels
+          percentPix = percent * barAW,
+          // Percent translated to seconds
+          newTime = percent * this.duration();
+
+      this.volume(percent);
+    },
+    updateVolumeBars: function(){
+      var vol = this.volume();
+      this.each(this.bels.volumeBars, function(bar){
+        var barData = _V_.getData(bar),
+            barX = _V_.findPosX(bar),
+            barW = bar.offsetWidth,
+            handle = barData.volumeHandle,
+            progBar = barData.volumeLevel,
+            handleW = (handle) ? handle.offsetWidth : 0;
+
+            // Adjusted X and Width, so handle doesn't go outside the bar
+            barAX = barX + (handleW / 2),
+            barAW = barW - handleW;
+            // Percent that the click is through the adjusted area
+            // percent = Math.max(0, Math.min(1, (event.pageX - barAX) / barAW)),
+            // Percent translated to pixels
+            // percentPix = percent * barAW,
+            // Percent translated to seconds
+            // newTime = percent * this.duration();
+
+        progBarProgress = _V_.round(vol * barAW + handleW / 2) + "px";
+        if (progBar && progBar.style) { progBar.style.width = progBarProgress; }
+        
+        handle.style.left = _V_.round(vol * barAW)+"px";
+      });
+      
+      
+      // Update bar length
+      // this.each(this.bels.playProgressBars, function(bar){
+      //   if (bar.style) { bar.style.width = _V_.round(progress * 100, 2) + "%"; }
+      // });
+
+      // Move Handle
+    }// ,
+    //     onVolumeBarFocus: function(event){
+    //       _V_.addEvent(document, "keyup", _V_.proxy(this, this.onVolumeBarKey));
+    //     },
+    //     onVolumeBarKey: function(event){
+    //       if (event.which == 37) {
+    //         event.preventDefault();
+    //         this.currentTime(this.currentTime() - 1);
+    //       } else if (event.which == 39) {
+    //         event.preventDefault();
+    //         this.currentTime(this.currentTime() + 1);
+    //       }
+    //     },
+    //     onVolumeBarBlur: function(event){
+    //        _V_.removeEvent(document, "keyup", _V_.proxy(this, this.onVolumeBarKey));
+    //     }
+  }
+);
+
+/* Mute Toggle
+================================================================================ */
+VideoJS.fn.newBehavior("muteToggle", function(element){
+    if (!this.bels.muteToggles) {
+      this.bels.muteToggles = [];
+      this.addEvent("volumechange", this.muteTogglesOnVolumeChange);
+    }
+    this.bels.muteToggles.push(element);
+    _V_.addEvent(element, "click", _V_.proxy(this, this.onMuteToggleClick));
+    // _V_.addEvent(element, "focus", _V_.proxy(this, this.onMuteToggleFocus));
+    // _V_.addEvent(element, "blur", _V_.proxy(this, this.onMuteToggleBlur));
+  },
+  function(){},
+  {
+    onMuteToggleClick: function(event){
+      this.muted( this.muted() ? false : true );
+    },
+    muteTogglesOnVolumeChange: function(event){
+      var vol = this.volume(),
+          level = 3;
+
+      if (vol == 0 || this.muted()) {
+        level = 0;
+      } else if (vol < 0.33) {
+        level = 1;
+      } else if (vol < 0.67) {
+        level = 2;
+      }
+
+      this.each(this.bels.muteToggles, function(toggle){
+        /* TODO improve muted icon classes */
+        _V_.each([0,1,2,3], function(i){
+          _V_.removeClass(toggle, "vjs-vol-"+i);
+        });
+        _V_.addClass(toggle, "vjs-vol-"+level);
+      });
+    }//,
+    // onMuteToggleFocus: function(event){
+    //   _V_.addEvent(document, "keyup", _V_.proxy(this, this.onMuteToggleKey));
+    // },
+    // onMuteToggleKey: function(event){
+    //   if (event.which == 32 || event.which == 13) {
+    //     event.preventDefault();
+    //     this.onMuteToggleClick();
+    //   }
+    // },
+    // onMuteToggleBlur: function(event){
+    //    _V_.removeEvent(document, "keyup", _V_.proxy(this, this.onMuteToggleKey));
+    // }
+  }
+);
@@ -0,0 +1,153 @@
+_V_.controlSets.bar = {
+  options: {},
+  add: function(){
+    /* See controls/controls.html to see the HTML this creates. */
+
+    // Create a reference to the controls elements
+    var bar = this.cels.bar = {};
+
+    // Control Bar Main Div ("main")
+    bar.main = _V_.createElement("div", { className: "vjs-controls" });
+    // Add the controls to the video's container
+    this.box.appendChild(bar.main);
+    this.addBehavior(bar.main, "controlBar");
+
+    // Play Control
+    bar.playControl = _V_.createElement("div", {
+      className: "vjs-play-control vjs-control",
+      innerHTML: '<div><span class="vjs-control-text">Play</span></div>',
+      role: "button", tabIndex: 0
+    });
+    bar.main.appendChild(bar.playControl);
+    this.addBehavior(bar.playControl, "playToggle");
+
+    /* Time -------------------------------------------------------------- */
+    // Time Display
+    bar.currentTime = _V_.createElement("div", { 
+      className: "vjs-current-time vjs-time-controls vjs-control"
+    });
+    bar.currentTimeDisplay = _V_.createElement("span", { 
+      className: "vjs-current-time-display",
+      innerHTML: '0:00'
+    });
+    // Put display inside div, inside control div, to follow control scheme.
+    bar.currentTime.appendChild(_V_.createElement("div").appendChild(bar.currentTimeDisplay));
+    bar.main.appendChild(bar.currentTime);
+    this.addBehavior(bar.currentTimeDisplay, "currentTimeDisplay");
+
+    // Time Separator (Not used in main skin, but still available, and could be used as a 'spare element')
+    bar.timeDivider = _V_.createElement("div", {
+      className: "vjs-time-divider",
+      innerHTML: '<div><span>/</span></div>'
+    });
+    bar.main.appendChild(bar.timeDivider);
+
+    // Duration Display
+    bar.duration = _V_.createElement("div", { 
+      className: "vjs-duration vjs-time-controls vjs-control"
+    });
+    bar.durationDisplay = _V_.createElement("span", { 
+      className: "vjs-duration-display",
+      innerHTML: '0:00'
+    });
+    // Put display inside div, inside control div, to follow control scheme.
+    bar.duration.appendChild(_V_.createElement("div").appendChild(bar.durationDisplay));
+    bar.main.appendChild(bar.duration);
+    this.addBehavior(bar.durationDisplay, "durationDisplay");
+    
+    // Duration Display
+    bar.remainingTime = _V_.createElement("div", { 
+      className: "vjs-remaining-time vjs-time-controls vjs-control"
+    });
+    bar.remainingTimeDisplay = _V_.createElement("span", { 
+      className: "vjs-remaining-time-display",
+      innerHTML: '-0:00'
+    });
+    // Put display inside div, inside control div, to follow control scheme.
+    bar.remainingTime.appendChild(_V_.createElement("div").appendChild(bar.remainingTimeDisplay));
+    bar.main.appendChild(bar.remainingTime);
+    this.addBehavior(bar.remainingTime, "remainingTimeDisplay");
+
+    /* Progress -------------------------------------------------------------- */
+    // Progress Control: Seek, Load Progress, and Play Progress
+    bar.progressControl = _V_.createElement("div", { className: "vjs-progress-control vjs-control" });
+    bar.main.appendChild(bar.progressControl);
+
+    // Seek Bar and holder for the progress bars
+    bar.seekBar = _V_.createElement("div", { className: "vjs-progress-holder" });
+    bar.progressControl.appendChild(bar.seekBar);
+
+    // Load Progress Bar
+    bar.loadProgressBar = _V_.createElement("div", {
+      className: "vjs-load-progress",
+      innerHTML: '<span class="vjs-control-text">Loaded: 0%</span>'
+    });
+    bar.seekBar.appendChild(bar.loadProgressBar);
+    this.addBehavior(bar.loadProgressBar, "loadProgressBar");
+
+    // Play Progress Bar
+    bar.playProgressBar = _V_.createElement("div", { 
+      className: "vjs-play-progress",
+      innerHTML: '<span class="vjs-control-text">Progress: 0%</span>'
+    });
+    bar.seekBar.appendChild(bar.playProgressBar);
+
+    // Seek Handle
+    bar.seekHandle = _V_.createElement("div", {
+      className: "vjs-seek-handle",
+      innerHTML: '<span class="vjs-control-text">00:00</span>',
+      tabIndex: 0,
+      role: "slider", "aria-valuenow": 0, "aria-valuemin": 0, "aria-valuemax": 100
+    });
+    bar.seekBar.appendChild(bar.seekHandle);
+
+    // SeekBar Behavior includes play progress bar, and seek handle
+    // Needed so it can determine seek position based on handle position/size
+    this.addBehavior(bar.seekBar, "seekBar");
+
+    /* Fullscreen -------------------------------------------------------------- */
+    // Fullscreen Button
+    bar.fullscreenControl = _V_.createElement("div", {
+      className: "vjs-fullscreen-control vjs-control",
+      innerHTML: '<div><span class="vjs-control-text">Fullscreen</span></div>',
+      role: "button", tabIndex: 0
+    });
+    bar.main.appendChild(bar.fullscreenControl);
+    this.addBehavior(bar.fullscreenControl, "fullscreenToggle");
+
+    /* Volume -------------------------------------------------------------- */
+    // Fullscreen Button
+    bar.volumeControl = _V_.createElement("div", { className: "vjs-volume-control vjs-control" });
+    bar.volumeBar = _V_.createElement("div", { className: "vjs-volume-bar" });
+    bar.volumeLevel = _V_.createElement("div", {
+      className: "vjs-volume-level",
+      innerHTML: '<span class="vjs-control-text"></span>'
+    });
+    bar.volumeHandle = _V_.createElement("div", {
+      className: "vjs-volume-handle",
+      innerHTML: '<span class="vjs-control-text"></span>',
+      tabindex: 0,
+      role: "slider", "aria-valuenow": 0, "aria-valuemin": 0, "aria-valuemax": 100
+    });
+    
+    bar.volumeBar.appendChild(bar.volumeLevel);
+    bar.volumeBar.appendChild(bar.volumeHandle);
+    bar.volumeControl.appendChild(bar.volumeBar);
+    bar.main.appendChild(bar.volumeControl);
+    this.addBehavior(bar.volumeBar, "volumeBar");
+
+    // Mute Button
+    bar.muteControl = _V_.createElement("div", {
+      className: "vjs-mute-control vjs-control",
+      innerHTML: '<div><span class="vjs-control-text">Mute</span></div>',
+      role: "button", tabIndex: 0
+    });
+    bar.main.appendChild(bar.muteControl);
+    this.addBehavior(bar.muteControl, "muteToggle");
+  },
+  remove: function(){
+    this.box.removeChild(this.cels.bigPlayButton);
+    delete this.cels.bigPlayButton;
+    this.removeBehavior(this.cels.bigPlayButton, "bigPlayButton");
+  }
+};
@@ -0,0 +1,52 @@
+_V_.controlSets.bigPlayButton = {
+  options: {},
+  add: function(){
+    /* Creating this HTML
+      <div class="vjs-big-play-button"><span></span></div>
+    */
+    this.cels.bigPlayButton = _V_.createElement("div", {
+      className: "vjs-big-play-button",
+      innerHTML: "<span></span>"
+    });
+    this.box.appendChild(this.cels.bigPlayButton);
+    this.addBehavior(this.cels.bigPlayButton, "bigPlayButton");
+  },
+  remove: function(){
+    this.removeBehavior(this.cels.bigPlayButton, "bigPlayButton");
+    this.box.removeChild(this.cels.bigPlayButton);
+    delete this.cels.bigPlayButton;
+  }
+};
+
+/* Big Play Button Behaviors
+================================================================================ */
+VideoJS.fn.newBehavior("bigPlayButton",
+  // Add Big Play Button Behavior
+  function(element){
+    if (!this.bels.bigPlayButtons) {
+      this.bels.bigPlayButtons = [];
+      this.addEvent("play", this.hideBigPlayButtons);
+      this.addEvent("ended", this.showBigPlayButtons);
+    }
+    this.bels.bigPlayButtons.push(element);
+    this.addBehavior(element, "playButton");
+  },
+  // Remove Big Play Button Behavior
+  function(element){
+    
+  },
+  // Needed functions (added directly to player (this))
+  {
+    showBigPlayButtons: function(){
+      if (!this.options.controlsEnabled) { return; }
+      this.each(this.bels.bigPlayButtons, function(element){
+        element.style.display = "block";
+      });
+    },
+    hideBigPlayButtons: function(){
+      this.each(this.bels.bigPlayButtons, function(element){
+        element.style.display = "none";
+      });
+    }
+  }
+);
@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>Controls HTML</title>
+  <link rel="stylesheet" href="../video-js.css" type="text/css">
+</head>
+<body>
+
+<div class="video-js vjs-default-skin" style="width: 640px; height: 270px;">
+  <video id="vid1" class="" preload="none" width="640" height="264" data-setup="" poster="http://video-js.zencoder.com/oceans-clip.png">
+    <source src="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv" type='video/flv'>
+    <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; codecs="vp8, vorbis"'>
+    <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"'>
+  </video>
+
+  <div class="vjs-controls">
+
+    <!-- Play/Pause Button -->
+    <div class="vjs-play-control vjs-control" role="button" tabindex="0">
+      <div>
+        <span class="vjs-control-text">Play</span>
+      </div>
+    </div>
+
+    <!-- Current Time Display -->
+    <div class="vjs-current-time vjs-time-controls vjs-control">
+      <div>
+        <span class="vjs-current-time-display">00:00</span>
+      </div>
+    </div>
+
+    <!-- Optional Divider for Time -->
+    <div class="vjs-time-divider">
+      <div>
+        <span>/</span>
+      </div>
+    </div>
+
+    <!-- Duration Display -->
+    <div class="vjs-duration vjs-time-controls vjs-control">
+      <div>
+        <span class="vjs-duration-display">00:00</span>
+      </div>
+    </div>
+
+    <!-- Remaining Time Display -->
+    <div class="vjs-remaining-time vjs-time-controls vjs-control">
+      <div>
+        <span class="vjs-remaining-time-display">00:00</span>
+      </div>
+    </div>
+
+    <!-- Seek Slider and Load & Play Progress Bars -->
+    <div class="vjs-progress-control vjs-control" role="slider" tabindex="0" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+
+      <!-- Seek Slider + Holds both progress bars. -->
+      <div class="vjs-progress-holder">
+
+        <!-- Load Progress -->
+        <div class="vjs-load-progress" title="Load Progress">
+          <span class="vjs-control-text">Loaded: 0%</span><!-- Support Multiple Load Progress Bars -->
+        </div>
+
+        <!-- Play Progress -->
+        <div class="vjs-play-progress" title="Play Progress">
+          <span class="vjs-control-text">Progress: 0%</span>
+        </div>
+      </div>
+
+      <!-- Seek Handle -->
+      <div class="vjs-seek-handle" title="Current Time">
+        <div>
+          <span class="vjs-control-text">00:00</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Fullscreen Control -->
+    <div class="vjs-fullscreen-control vjs-control" role="button" tabindex="0">
+      <div>
+        <span class="vjs-control-text">Fullscreen</span>
+      </div>
+    </div>
+
+    <!-- Volume Control -->
+    <div class="vjs-volume-control vjs-control">
+
+      <div class="vjs-volume-bar">
+        <!-- Volume Bar -->
+        <div class="vjs-volume-level">
+          <span class="vjs-control-text"></span>
+        </div>
+
+        <!-- Volume Handle -->
+        <div class="vjs-volume-handle" tabindex="0" role="slider" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+          <span class="vjs-control-text"></span>
+        </div>
+      </div>
+
+    </div>
+
+    <!-- Mute Button -->
+    <div class="vjs-mute-control" role="button" tabindex="0">
+      <div>
+        <span class="vjs-control-text">Mute</span>
+      </div>
+    </div>
+
+    <!-- Rewind Button -->
+    <!-- <div class="vjs-rewind-control vjs-control" title="Rewind" role="button" tabindex="0">
+      <div>
+        <span class="vjs-control-text">Rewind</span>
+      </div>
+    </div> -->
+
+    <!-- Fast Forward Button -->
+    <!-- <div class="vjs-forward-control" title="Fast Forward" role="button" tabindex="0">
+      <div>
+        <span>Fast Forward</span>
+      </div>
+    </div> -->
+
+    <!-- Previous Video Button -->
+    <!-- <div class="vjs-previous-control" title="Previous Video" role="button" tabindex="0">
+      <div>
+        <span>Previous Video</span>
+      </div>
+    </div> -->
+
+    <!-- Next Video Button -->
+    <!-- <div class="vjs-next-control" title="Next Video" role="button" tabindex="0">
+      <div>
+        <span>Next Video</span>
+      </div>
+    </div> -->
+
+    <!-- Subtitles Button -->
+    <!-- <div class="vjs-subtitles-control" title="Subtitles On/Off" role="button" tabindex="0">
+      <div>
+        <span>Closed Captions</span>
+      </div>
+    </div> -->
+
+    <!-- Captions Button -->
+    <!-- <div class="vjs-captions-control" title="Captions On/Off" role="button" tabindex="0">
+      <div>
+        <span>Closed Captions</span>
+      </div>
+    </div> -->
+  </div>
+
+</div>
+
+</body>
+</html>
@@ -0,0 +1,133 @@
+_V_.controlSets.main = {
+  options: {},
+  add: 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>
+    */
+
+    this.cels.main = {};
+
+    // Create a div to hold the different controls
+    this.cels.main.bar = _V_.createElement("div", { className: "vjs-controls" });
+    // Add the controls to the video's container
+    this.box.appendChild(this.cels.main.bar);
+    this.addBehavior(this.cels.main.bar, "controlBar");
+
+    // Build the play control
+    this.cels.main.playControl = _V_.createElement("div", { className: "vjs-play-control vjs-control", innerHTML: "<span></span>" });
+    this.cels.main.bar.appendChild(this.cels.main.playControl);
+    this.addBehavior(this.cels.main.playControl, "playToggle");
+     
+    // Build the progress control
+    this.cels.main.progressControl = _V_.createElement("div", { className: "vjs-progress-control vjs-control" });
+    this.cels.main.bar.appendChild(this.cels.main.progressControl);
+
+    // Create a holder for the progress bars
+    this.cels.main.progressHolder = _V_.createElement("div", { className: "vjs-progress-holder" });
+    this.cels.main.progressControl.appendChild(this.cels.main.progressHolder);
+    this.addBehavior(this.cels.main.progressHolder, "seekBar");
+
+    // Create the loading progress display
+    this.cels.main.loadProgressBar = _V_.createElement("div", { className: "vjs-load-progress" });
+    this.cels.main.progressHolder.appendChild(this.cels.main.loadProgressBar);
+    this.addBehavior(this.cels.main.loadProgressBar, "loadProgressBar");
+
+    // Create the playing progress display
+    this.cels.main.playProgressBar = _V_.createElement("div", { className: "vjs-play-progress" });
+    this.cels.main.progressHolder.appendChild(this.cels.main.playProgressBar);
+    this.addBehavior(this.cels.main.playProgressBar, "playProgressBar");
+
+    // Create the progress time display (00:00 / 00:00)
+    this.cels.main.timeControl = _V_.createElement("div", { className: "vjs-time-control vjs-control" });
+    this.cels.main.bar.appendChild(this.cels.main.timeControl);
+
+    // // Create the current play time display
+    this.cels.main.currentTimeDisplay = _V_.createElement("span", { className: "vjs-current-time-display", innerHTML: "00:00" });
+    this.cels.main.timeControl.appendChild(this.cels.main.currentTimeDisplay);
+    this.addBehavior(this.cels.main.currentTimeDisplay, "currentTimeDisplay");
+
+    // Add time separator
+    this.cels.main.timeSeparator = _V_.createElement("span", { innerHTML: " / " });
+    this.cels.main.timeControl.appendChild(this.cels.main.timeSeparator);
+
+    // Create the total duration display
+    this.cels.main.durationDisplay = _V_.createElement("span", { className: "vjs-duration-display", innerHTML: "00:00" });
+    this.cels.main.timeControl.appendChild(this.cels.main.durationDisplay);
+    this.addBehavior(this.cels.main.durationDisplay, "durationDisplay");
+
+    // Create the volumne control
+    this.cels.main.volumeControl = _V_.createElement("div", {
+      className: "vjs-volume-control vjs-control",
+      innerHTML: '<div><span class="vjs-vc-1"></span><span class="vjs-vc-2"></span><span class="vjs-vc-3"></span><span class="vjs-vc-4"></span><span class="vjs-vc-5"></span><span class="vjs-vc-6"></span></div>'
+    });
+    this.cels.main.bar.appendChild(this.cels.main.volumeControl);
+    this.addBehavior(this.cels.main.volumeControl, "volumeScrubber");
+
+    this.cels.main.volumeDisplay = this.cels.main.volumeControl.children[0];
+    this.addBehavior(this.cels.main.volumeDisplay, "volumeDisplay");
+
+    // Crete the fullscreen control
+    this.cels.main.fullscreenControl = _V_.createElement("div", {
+      className: "vjs-fullscreen-control vjs-control",
+      innerHTML: '<div><span class="vjs-fc-1"></span><span class="vjs-fc-2"></span><span class="vjs-fc-3"></span><span class="vjs-fc-4"></span></div>'
+    });
+    this.cels.main.bar.appendChild(this.cels.main.fullscreenControl);
+    this.addBehavior(this.cels.main.fullscreenControl, "fullscreenToggle");
+  },
+  remove: function(){
+    this.box.removeChild(this.cels.bigPlayButton);
+    delete this.cels.bigPlayButton;
+    this.removeBehavior(this.cels.bigPlayButton, "bigPlayButton");
+  }
+}
+
+/* Control Bar Behaviors
+================================================================================ */
+VideoJS.fn.newBehavior("controlBar", 
+  function(element){
+    if (!this.bels.controlBars) {
+      this.bels.controlBars = [];
+      // this.addEvent("mouseover", this.showControlBars);
+      // this.addEvent("mouseout", this.hideControlBars);
+    }
+    this.bels.controlBars.push(element);
+  },
+  function(element){},
+  {
+    showControlBars: function(){
+      this.each(this.bels.controlBars, function(bar){
+        // bar.style.opacity = 1;
+        bar.style.display = "block";
+      });
+    },
+    hideControlBars: function(){
+      this.each(this.bels.controlBars, function(bar){
+        // bar.style.opacity = 0;
+        bar.style.display = "none";
+      });
+    }
+  }
+);
@@ -0,0 +1,22 @@
+_V_.controlSets.subtitlesBox = {
+  options: {},
+  add: function(){
+    /* Creating this HTML
+
+      <div class="vjs-subtitles"></div>
+
+    */
+
+    // Create a reference to the element
+    var subs = this.cels.subtitlesBox = _V_.createElement("div", { className: "vjs-subtitles" });
+
+    // Add the controls to the video's container
+    this.box.appendChild(subs);
+    this.addBehavior(subs, "subtitlesDisplay");
+  },
+  remove: function(){
+    this.removeBehavior(this.cels.subtitlesBox, "subtitlesDisplay");
+    this.box.removeChild(this.cels.subtitlesBox);
+    delete this.cels.subtitlesBox;
+  }
+};
@@ -0,0 +1,381 @@
+// HTML5 Shiv. Must be in <head>.
+document.createElement("video");document.createElement("audio");
+
+var VideoJS = _V_ = function(id, options){
+
+  // Allow for element or ID to be passed in.
+  var tag = (typeof id == "string" ? _V_.el(id) : id);
+  if (!tag || !tag.nodeName) { // Could be a box div also
+    throw new TypeError("The element or ID supplied is not valid. (video.js)");
+    return;
+  }
+
+  // Check if (not) using "new" operator before the function to create new instance
+  if (!(this instanceof arguments.callee)) {
+    // Return the player attr on the element if it exists
+    // Otherwise set up a new player.
+    return tag.player || new VideoJS(id, options);
+  }
+
+  this.tag = tag;
+  var box = this.box = _V_.createElement("div"),
+      width = tag.width || 300,
+      height = tag.height || 150;
+
+  // Make player findable on elements
+  tag.player = box.player = this;
+
+  // Wrap video tag in div (box) container
+  tag.parentNode.insertBefore(box, tag);
+  box.appendChild(tag); // Breaks iPhone, fixed in HTML5 setup.
+
+  // Give video tag properties to box
+  box.id = tag.id; // ID will now reference box, not the video tag
+  box.className = tag.className;
+  box.setAttribute("width", width);
+  box.setAttribute("height", height);
+  box.style.width = width+"px";
+  box.style.height = height+"px";
+
+  // Strip tag of basic properties
+  tag.id += "_html5_api";
+  tag.className = "vjs-tech";
+  tag.removeAttribute("width");
+  tag.removeAttribute("height");
+  tag.removeAttribute("controls");
+
+  // Default Options
+  this.options = _V_.options; // Global Defaults
+  _V_.merge(this.options, this.getVideoTagSettings()); // Override with Video Tag Options
+  _V_.merge(this.options, options); // Override/extend with options from setup call
+
+  // Empty video tag sources and tracks so the built in player doesn't use them also.
+  if (tag.hasChildNodes()) {
+    for (var i=0,j=tag.childNodes;i<j.length;i++) {
+      if (j[i].nodeName == "SOURCE" || j[i].nodeName == "TRACK") {
+        tag.removeChild(j[i]);
+      }
+    }
+  }
+
+  // Store references to elements for different purposes
+  this.els = {};
+  // Tech (playback) Elements. Store playback tech objects for switching between them.
+  // ex. this.tels.html5 = videoTagElement; this.tels.flowplayer = swfObject;
+  this.tels = {};
+  // Behavior Elements. Store refs to elements that trigger/are triggered by a behavior.
+  // ex. this.bels.playButtons = [element1, element2]
+  this.bels = {};
+  // Control Elements. Store refs to elements that are part of control sets
+  // this.cels.mainControls.playButton = playButtonDiv;
+  this.cels = {};
+  // Cache for video property values.
+  this.values = {};
+
+  this.apiIsReady = false;
+
+  this.addBehavior(this.box, "box");
+
+  this.addEvent("ended", this.handleEnded);
+
+  // Build controls when the API is ready
+  this.addEvent("techready", _V_.proxy(this, function(){
+    this.each(this.options.controlSets, function(set){
+      _V_.controlSets[set].add.call(this);
+    });
+  }));
+
+  // Loop through playback technologies (HTML5, Flash) and check for support
+  // Then load the best source.
+  this.src(this.options.sources);
+};
+
+VideoJS.options = {
+  techOrder: ["h5swf","html5","flowplayer"],
+  controlSets: ["bigPlayButton", "bar", "subtitlesBox"/*, "replay"*/],
+  controlSetOptions: {
+    bigPlayButton: {},
+    bar: {},
+    replay: {}
+  },
+  width: "auto", // Default of web browser is 300x150. Should rely on source width/height.
+  height: "auto"
+};
+
+VideoJS.fn = VideoJS.prototype = {
+
+  getVideoTagSettings: function(){
+    var options = {
+      sources: [],
+      tracks: []
+    };
+
+    options.width = this.tag.width;
+    options.height = this.tag.height;
+    options.src = this.tag.src;
+    options.poster = this.tag.poster;
+    options.preload = this.tag.preload;
+    options.autoplay = this.tag.getAttribute("autoplay") !== null; // hasAttribute not IE <8 compatible
+    options.controls = this.tag.getAttribute("controls") !== null;
+    options.loop = this.tag.getAttribute("loop") !== null;
+    options.muted = this.tag.getAttribute("muted") !== null;
+
+    for (var c,i=0,j=this.tag.children;i<j.length;i++) {
+      c = j[i];
+      if (c.nodeName == "SOURCE") {
+        options.sources.push({
+          src: c.src,
+          type: c.type,
+          media: c.media,
+          title: c.title
+        });
+      }
+      if (c.nodeName == "TRACK") {
+        options.tracks.push(new _V_.Track({
+          src: c.getAttribute("src"),
+          kind: c.getAttribute("kind"),
+          srclang: c.getAttribute("srclang"),
+          label: c.getAttribute("label"),
+          'default': c.getAttribute("default") !== null,
+          title: c.getAttribute("title")
+        }, this));
+        
+      }
+    }
+    return options;
+  },
+
+  /* PLayback Technology (tech)
+  ================================================================================ */
+  loadTech: function(techName, source){
+    var tech = this.currentTech = _V_.tech[techName];
+
+    // Pause and remove current playback technology
+    if (this.currentTechName) {
+      this.removeTech(techName);
+
+    // If the first time loading, HTML5 tag will exist but won't be initialized
+    // So we need to remove it if we're not loading HTML5
+    } else if (!this.currentTechName && techName != "html5") {
+      this.removeTechElement(this.tag);
+    }
+
+    this.currentTechName = techName;
+
+    // Turn off API access because we're loading a new tech that might load asynchronously
+    this.isReady = false;
+
+    // Point all internal API calls to new playback tech's API.
+    this.api = tech.api;
+
+    // Finsh API Setup when tech is ready
+    this.addEvent("techready", _V_.proxy(this, function(){
+      // Reomve this so it's not called twice next load
+      this.removeEvent("techready", arguments.callee);
+      
+      this.currentTechElement = this.tels[this.currentTechName];
+
+      // Set up playback technology's event triggers
+      this.api.setupTriggers.call(this);
+      this.triggerReady();
+
+      // Make playback element clickable
+      this.addBehavior(this.currentTechElement, "tech");
+
+      // Manually track progress in cases where the browser/flash player doesn't report it.
+      if (!_V_.techSupports(tech, "event", "progress")) { this.manualProgressOn(); }
+
+      // Manually track timeudpates in cases where the browser/flash player doesn't report it.
+      if (!_V_.techSupports(tech, "event", "timeupdate")) { this.manualTimeUpdatesOn(); }
+    }));
+
+    // Initialize new tech if it hasn't been yet
+    if (this.tels[techName] === undefined) {
+      tech.init.call(this, source);
+    } else {
+      _V_.insertFirst(this.tels[techName], this.box);
+      this.src(source);
+    }
+  },
+
+  removeTech: function(techName){
+    this.removeTechElement(this.tels[techName]);
+    // Should probably remove API listeners as well
+  },
+  removeTechElement: function(el){
+    this.box.removeChild(el);
+  },
+
+  /* Ready - Trigger functions when player is ready
+  ================================================================================ */
+  readyQueue: [],
+  ready: function(fn){
+    if (this.isReady) {
+      fn.call(this);
+    } else {
+      this.readyQueue.push(fn);
+    }
+  },
+  triggerReady: function(){
+    if (this.isReady) return;
+    this.isReady = true;
+    if (this.readyQueue.length > 0) {
+      // Call all functions in ready queue
+      this.each(this.readyQueue, function(fn){
+        fn.call(this);
+      });
+
+      // Reset Ready Queue
+      this.readyQueue = [];
+    }
+  },
+
+  /* Behaviors - Make elements act like specific controls or displays
+  ================================================================================ */
+  /* TODO - Make behavior classes. Use JR's simple inheritance for sub-classing. */
+  behaviors: {},
+  // New Behavior. Gets called in prototype scope (_V_.fn.newBehavior), so added to all instances.
+  newBehavior: function(name, add, remove, functions){
+    this.behaviors[name] = { add: add, remove: remove };
+    this.extend(functions);
+  },
+  addBehavior: function(element, behavior){
+    // Allow passing and ID string
+    if (typeof element == "string") { element = _V_.el(element); }
+    this.behaviors[behavior].add.call(this, element);
+  },
+  removeBehavior: function(element, behavior){
+    if (typeof element == "string") { element = _V_.el(element); }
+    this.behaviors[behavior].remove.call(this, element);
+  },
+
+  /* Fallbacks for unsupported event types
+  ================================================================================ */
+  // Manually trigger progress events based on changes to the buffered amount
+  // Many flash players and older HTML5 browsers don't send progress or progress-like events
+  manualProgressOn: function(){
+    this.manualProgress = true;
+    // Trigger progress watching when a source begins loading
+    // this.addEvent("loadstart", _V_.proxy(this, this.trackProgress));
+    this.trackProgress();
+
+    // Set variables of closure
+    var tech = _V_.tech[this.currentTechName],
+        el = this.tels[this.currentTechName];
+
+    // Watch for native progress event
+    _V_.addEvent(el, "progress", _V_.proxy(this, function(){
+      // Remove this listener from the element
+      _V_.removeEvent(el, "progress", arguments.callee);
+      // Update known progress support for this playback technology
+      _V_.updateTechSupport(tech, "event", "progress", true);
+      // Turn off manual progress tracking
+      this.manualProgressOff();
+    }));
+  },
+  manualProgressOff: function(){
+    this.manualProgress = false;
+    this.removeEvent("loadstart", _V_.proxy(this, this.trackProgress));
+    this.stopTrackingProgress();
+  },
+
+  trackProgress: function(){
+    this.progressInterval = setInterval(_V_.proxy(this, function(){
+      // Don't trigger unless buffered amount is greater than last time
+      // log(this.values.bufferEnd, this.buffered().end(0), this.duration())
+      /* TODO: update for multiple buffered regions */
+      if (this.values.bufferEnd < this.buffered().end(0)) {
+        this.triggerEvent("progress");
+      } else if (this.bufferedPercent() == 1) {
+        this.stopTrackingProgress();
+        this.triggerEvent("progress"); // Last update
+      }
+    }), 500);
+  },
+  stopTrackingProgress: function(){ clearInterval(this.progressInterval); },
+
+  /* Time Tracking -------------------------------------------------------------- */
+  manualTimeUpdatesOn: function(){
+    this.manualTimeUpdates = true;
+
+    this.addEvent("play", this.trackCurrentTime);
+    this.addEvent("pause", this.stopTrackingCurrentTime);
+    // timeupdate is also called by .currentTime whenever current time is set
+
+    // Set variables of closure
+    var tech = _V_.tech[this.currentTechName],
+        el = this.tels[this.currentTechName];
+
+    // Watch for native timeupdate event
+    _V_.addEvent(el, "timeupdate", _V_.proxy(this, function(){
+
+      // Remove this listener from the element
+      _V_.removeEvent(el, "timeupdate", arguments.callee);
+
+      // Update known progress support for this playback technology
+      _V_.updateTechSupport(tech, "event", "timeupdate", true);
+
+      // Turn off manual progress tracking
+      this.manualTimeUpdatesOff();
+    }));
+  },
+  manualTimeUpdatesOff: function(){
+    this.manualTimeUpdates = false;
+    this.stopTrackingCurrentTime();
+    this.removeEvent("play", this.trackCurrentTime);
+    this.removeEvent("pause", this.stopTrackingCurrentTime);
+  },
+  
+  trackCurrentTime: function(){
+    if (this.currentTimeInterval) { this.stopTrackingCurrentTime(); }
+    this.currentTimeInterval = setInterval(_V_.proxy(this, function(){
+      this.triggerEvent("timeupdate");
+    }), 250); // 42 = 24 fps // 250 is what Webkit uses // FF uses 15
+  },
+  // Turn off play progress tracking (when paused or dragging)
+  stopTrackingCurrentTime: function(){ clearInterval(this.currentTimeInterval); },
+  
+  /* Player event handlers (how the player reacts to certain events)
+  ================================================================================ */
+  handleEnded: function(){
+    if (this.options.loop) {
+      this.currentTime(0);
+      this.play();
+    } else {
+      this.currentTime(0);
+      this.pause();
+    }
+  },
+
+  /* Utility
+  ================================================================================ */
+  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; }
+    }
+  },
+
+  extend: function(obj){
+    for (var attrname in obj) {
+      if (obj.hasOwnProperty(attrname)) { this[attrname]=obj[attrname]; }
+    }
+  },
+
+  /* Local Storage
+  ================================================================================ */
+  setLocalStorage: function(key, value){
+    // IE was throwing errors referencing the var anywhere without this
+    var localStorage = localStorage || false;
+    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);
+      }
+    }
+  }
+};
+
+VideoJS.players = {};
@@ -0,0 +1,217 @@
+// ECMA-262 is the standard for javascript.
+// The following methods are impelemented EXACTLY as described in the standard (according to Mozilla Docs), and do not override the default method if one exists.
+// This may conflict with other libraries that modify the array prototype, but those libs should update to use the standard.
+
+// [].indexOf
+// https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/indexOf
+if (!Array.prototype.indexOf) {
+    Array.prototype.indexOf = function (searchElement /*, fromIndex */ ) {
+        "use strict";
+        if (this === void 0 || this === null) {
+            throw new TypeError();
+        }
+        var t = Object(this);
+        var len = t.length >>> 0;
+        if (len === 0) {
+            return -1;
+        }
+        var n = 0;
+        if (arguments.length > 0) {
+            n = Number(arguments[1]);
+            if (n !== n) { // shortcut for verifying if it's NaN
+                n = 0;
+            } else if (n !== 0 && n !== (1 / 0) && n !== -(1 / 0)) {
+                n = (n > 0 || -1) * Math.floor(Math.abs(n));
+            }
+        }
+        if (n >= len) {
+            return -1;
+        }
+        var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0);
+        for (; k < len; k++) {
+            if (k in t && t[k] === searchElement) {
+                return k;
+            }
+        }
+        return -1;
+    }
+}
+
+// NOT NEEDED YET
+// [].lastIndexOf
+// https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/lastIndexOf
+// if (!Array.prototype.lastIndexOf)
+// {
+//   Array.prototype.lastIndexOf = function(searchElement /*, fromIndex*/)
+//   {
+//     "use strict";
+// 
+//     if (this === void 0 || this === null)
+//       throw new TypeError();
+// 
+//     var t = Object(this);
+//     var len = t.length >>> 0;
+//     if (len === 0)
+//       return -1;
+// 
+//     var n = len;
+//     if (arguments.length > 1)
+//     {
+//       n = Number(arguments[1]);
+//       if (n !== n)
+//         n = 0;
+//       else if (n !== 0 && n !== (1 / 0) && n !== -(1 / 0))
+//         n = (n > 0 || -1) * Math.floor(Math.abs(n));
+//     }
+// 
+//     var k = n >= 0
+//           ? Math.min(n, len - 1)
+//           : len - Math.abs(n);
+// 
+//     for (; k >= 0; k--)
+//     {
+//       if (k in t && t[k] === searchElement)
+//         return k;
+//     }
+//     return -1;
+//   };
+// }
+
+
+// NOT NEEDED YET
+// Array forEach per ECMA standard https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/array/foreach
+// Production steps of ECMA-262, Edition 5, 15.4.4.18
+// Reference: http://es5.github.com/#x15.4.4.18
+// if ( !Array.prototype.forEach ) {
+// 
+//   Array.prototype.forEach = function( callback, thisArg ) {
+// 
+//     var T, k;
+// 
+//     if ( this == null ) {
+//       throw new TypeError( " this is null or not defined" );
+//     }
+// 
+//     // 1. Let O be the result of calling ToObject passing the |this| value as the argument.
+//     var O = Object(this);
+// 
+//     // 2. Let lenValue be the result of calling the Get internal method of O with the argument "length".
+//     // 3. Let len be ToUint32(lenValue).
+//     var len = O.length >>> 0;
+// 
+//     // 4. If IsCallable(callback) is false, throw a TypeError exception.
+//     // See: http://es5.github.com/#x9.11
+//     if ( {}.toString.call(callback) != "[object Function]" ) {
+//       throw new TypeError( callback + " is not a function" );
+//     }
+// 
+//     // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
+//     if ( thisArg ) {
+//       T = thisArg;
+//     }
+// 
+//     // 6. Let k be 0
+//     k = 0;
+// 
+//     // 7. Repeat, while k < len
+//     while( k < len ) {
+// 
+//       var kValue;
+// 
+//       // a. Let Pk be ToString(k).
+//       //   This is implicit for LHS operands of the in operator
+//       // b. Let kPresent be the result of calling the HasProperty internal method of O with argument Pk.
+//       //   This step can be combined with c
+//       // c. If kPresent is true, then
+//       if ( k in O ) {
+// 
+//         // i. Let kValue be the result of calling the Get internal method of O with argument Pk.
+//         kValue = O[ Pk ];
+// 
+//         // ii. Call the Call internal method of callback with T as the this value and
+//         // argument list containing kValue, k, and O.
+//         callback.call( T, kValue, k, O );
+//       }
+//       // d. Increase k by 1.
+//       k++;
+//     }
+//     // 8. return undefined
+//   };
+// }
+
+
+// NOT NEEDED YET
+// https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/map
+// Production steps of ECMA-262, Edition 5, 15.4.4.19
+// Reference: http://es5.github.com/#x15.4.4.19
+// if (!Array.prototype.map) {
+//   Array.prototype.map = function(callback, thisArg) {
+// 
+//     var T, A, k;
+// 
+//     if (this == null) {
+//       throw new TypeError(" this is null or not defined");
+//     }
+// 
+//     // 1. Let O be the result of calling ToObject passing the |this| value as the argument.
+//     var O = Object(this);
+// 
+//     // 2. Let lenValue be the result of calling the Get internal method of O with the argument "length".
+//     // 3. Let len be ToUint32(lenValue).
+//     var len = O.length >>> 0;
+// 
+//     // 4. If IsCallable(callback) is false, throw a TypeError exception.
+//     // See: http://es5.github.com/#x9.11
+//     if ({}.toString.call(callback) != "[object Function]") {
+//       throw new TypeError(callback + " is not a function");
+//     }
+// 
+//     // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
+//     if (thisArg) {
+//       T = thisArg;
+//     }
+// 
+//     // 6. Let A be a new array created as if by the expression new Array(len) where Array is
+//     // the standard built-in constructor with that name and len is the value of len.
+//     A = new Array(len);
+// 
+//     // 7. Let k be 0
+//     k = 0;
+// 
+//     // 8. Repeat, while k < len
+//     while(k < len) {
+// 
+//       var kValue, mappedValue;
+// 
+//       // a. Let Pk be ToString(k).
+//       //   This is implicit for LHS operands of the in operator
+//       // b. Let kPresent be the result of calling the HasProperty internal method of O with argument Pk.
+//       //   This step can be combined with c
+//       // c. If kPresent is true, then
+//       if (k in O) {
+// 
+//         // i. Let kValue be the result of calling the Get internal method of O with argument Pk.
+//         kValue = O[ k ];
+// 
+//         // ii. Let mappedValue be the result of calling the Call internal method of callback
+//         // with T as the this value and argument list containing kValue, k, and O.
+//         mappedValue = callback.call(T, kValue, k, O);
+// 
+//         // iii. Call the DefineOwnProperty internal method of A with arguments
+//         // Pk, Property Descriptor {Value: mappedValue, Writable: true, Enumerable: true, Configurable: true},
+//         // and false.
+// 
+//         // In browsers that support Object.defineProperty, use the following:
+//         // Object.defineProperty(A, Pk, { value: mappedValue, writable: true, enumerable: true, configurable: true });
+// 
+//         // For best browser support, use the following:
+//         A[ k ] = mappedValue;
+//       }
+//       // d. Increase k by 1.
+//       k++;
+//     }
+// 
+//     // 9. return A
+//     return A;
+//   };      
+// }
@@ -0,0 +1,287 @@
+// Event System (J.Resig - Secrets of a JS Ninja http://jsninja.com/ [Go buy it, really])
+// (Book version isn't completely usable, so fixed some things and borrowed from jQuery where it's working)
+// 
+// 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.
+// 
+// When you add an event listener using _V_.addEvent, 
+//   it stores the handler function in seperate cache object, 
+//   and adds a generic handler to the element's event,
+//   along with a unique id (guid) to the element.
+
+_V_.extend({
+
+  // 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.
+  addEvent: function(elem, type, fn){
+    var data = _V_.getData(elem), handlers;
+
+    // We only need to generate one handler per element
+    if (data && !data.handler) {
+      // Our new meta-handler that fixes the event object and the context
+      data.handler = function(event){
+        event = _V_.fixEvent(event);
+        var handlers = _V_.getData(elem).events[event.type];
+        // Go through and call all the real bound handlers
+        if (handlers) {
+          for (var i = 0, l = handlers.length; i < l; i++) {
+            if (handlers[i]) handlers[i].call(elem, event); // Incase one's been removed
+          }
+        }
+      };
+    }
+
+    // We need a place to store all our event data
+    if (!data.events) { data.events = {}; }
+
+    // And a place to store the handlers for this event type
+    handlers = data.events[type];
+
+    if (!handlers) {
+      handlers = data.events[ type ] = [];
+
+      // Attach our meta-handler to the element, since one doesn't exist
+      if (document.addEventListener) {
+        elem.addEventListener(type, data.handler, false);
+      } else if (document.attachEvent) {
+        elem.attachEvent("on" + type, data.handler);
+      }
+    }
+
+    if (!fn.guid) { fn.guid = _V_.guid++; }
+
+    handlers.push(fn);
+  },
+
+  removeEvent: function(elem, type, fn) {
+    var data = _V_.getData(elem), handlers;
+    // If no events exist, nothing to unbind
+    if (!data.events) { return; }
+
+    // Are we removing all bound events?
+    if (!type) {
+      for (type in data.events) {
+        _V_.cleanUpEvents(elem, type);
+      }
+      return;
+    }
+
+    // And a place to store the handlers for this event type
+    handlers = data.events[type];
+
+    // If no handlers exist, nothing to unbind
+    if (!handlers) { return; }
+
+    // See if we're only removing a single handler
+    if (fn && fn.guid) {
+      for (var i = 0; i < handlers.length; i++) {
+        // We found a match (don't stop here, there could be a couple bound)
+        if (handlers[i].guid === fn.guid) {
+          // Remove the handler from the array of handlers
+          handlers.splice(i--, 1);
+        }
+      }
+    }
+
+    _V_.cleanUpEvents(elem, type);
+  },
+
+  cleanUpEvents: function(elem, type) {
+    var data = _V_.getData(elem);
+    // Remove the events of a particular type if there are none left
+
+    if (data.events[type].length === 0) {
+      delete data.events[type];
+
+      // Remove the meta-handler from the element
+      if (document.removeEventListener) {
+        elem.removeEventListener(type, data.handler, false);
+      } else if (document.detachEvent) {
+        elem.detachEvent("on" + type, data.handler);
+      }
+    }
+
+    // Remove the events object if there are no types left
+    if (_V_.isEmpty(data.events)) {
+      delete data.events;
+      delete data.handler;
+    }
+
+    // Finally remove the expando if there is no data left
+    if (_V_.isEmpty(data)) {
+      _V_.removeData(elem);
+    }
+  },
+
+  fixEvent: function(event) {
+    if (event[_V_.expando]) { return event; }
+    // store a copy of the original event object
+    // and "clone" to set read-only properties
+    var originalEvent = event;
+    event = new _V_.Event(originalEvent);
+
+    for ( var i = _V_.Event.props.length, prop; i; ) {
+      prop = _V_.Event.props[ --i ];
+      event[prop] = originalEvent[prop];
+    }
+
+    // Fix target property, if necessary
+    if (!event.target) { event.target = event.srcElement || document; }
+
+    // check if target is a textnode (safari)
+    if (event.target.nodeType === 3) { event.target = event.target.parentNode; }
+
+    // Add relatedTarget, if necessary
+    if (!event.relatedTarget && event.fromElement) {
+      event.relatedTarget = event.fromElement === event.target ? event.toElement : event.fromElement;
+    }
+
+    // Calculate pageX/Y if missing and clientX/Y available
+    if ( event.pageX == null && event.clientX != null ) {
+      var eventDocument = event.target.ownerDocument || document,
+        doc = eventDocument.documentElement,
+        body = eventDocument.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);
+    }
+
+    // Add which for key events
+    if (event.which == null && (event.charCode != null || event.keyCode != null)) {
+      event.which = event.charCode != null ? event.charCode : event.keyCode;
+    }
+
+    // Add metaKey to non-Mac browsers (use ctrl for PC's and Meta for Macs)
+    if ( !event.metaKey && event.ctrlKey ) {
+      event.metaKey = event.ctrlKey;
+    }
+
+    // Add which for click: 1 === left; 2 === middle; 3 === right
+    // Note: button is not normalized, so don't use it
+    if ( !event.which && event.button !== undefined ) {
+      event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) ));
+    }
+
+    return event;
+  },
+
+  triggerEvent: function(elem, event) {
+    var data = _V_.getData(elem),
+        parent = elem.parentNode || elem.ownerDocument,
+        type = event.type || event,
+        handler;
+
+    if (data) { handler = data.handler }
+
+    // Added in attion to book. Book code was broke.
+    event = typeof event === "object" ?
+      event[_V_.expando] ? 
+        event :
+        new _V_.Event(type, event) :
+      new _V_.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;
+
+    // Bubble the event up the tree to the document,
+    // Unless it's been explicitly stopped
+    // if (parent && !event.isPropagationStopped()) {
+    //   _V_.triggerEvent(parent, event);
+    // 
+    // // We're at the top document so trigger the default action
+    // } else if (!parent && !event.isDefaultPrevented()) {
+    //   // log(type);
+    //   var targetData = _V_.getData(event.target);
+    //   // log(targetData);
+    //   var targetHandler = targetData.handler;
+    //   // log("2");
+    //   if (event.target[event.type]) {
+    //     // Temporarily disable the bound handler,
+    //     // don't want to execute it twice
+    //     if (targetHandler) {
+    //       targetData.handler = function(){};
+    //     }
+    // 
+    //     // Trigger the native event (click, focus, blur)
+    //     event.target[event.type]();
+    // 
+    //     // Restore the handler
+    //     if (targetHandler) {
+    //       targetData.handler = targetHandler;
+    //     }
+    //   }
+    // }
+  }
+});
+
+// Custom Event object for standardizing event objects between browsers.
+_V_.Event = function(src, props){
+  // Event object
+  if (src && src.type) {
+    this.originalEvent = src;
+    this.type = src.type;
+
+    // Events bubbling up the document may have been marked as prevented
+    // by a handler lower down the tree; reflect the correct value.
+    this.isDefaultPrevented = (src.defaultPrevented || src.returnValue === false ||
+      src.getPreventDefault && src.getPreventDefault()) ? returnTrue : returnFalse;
+
+  // Event type
+  } else {
+    this.type = src;
+  }
+
+  // Put explicitly provided properties onto the event object
+  if (props) { _V_.merge(this, props); }
+
+  this.timeStamp = (new Date).getTime();
+
+  // Mark it as fixed
+  this[_V_.expando] = true;
+};
+
+_V_.Event.prototype = {
+  preventDefault: function() {
+    this.isDefaultPrevented = returnTrue;
+
+    var e = this.originalEvent;
+    if (!e) { return; }
+
+    // if preventDefault exists run it on the original event
+    if (e.preventDefault) { 
+      e.preventDefault();
+    // otherwise set the returnValue property of the original event to false (IE)
+    } else {
+      e.returnValue = false;
+    }
+  },
+  stopPropagation: function() {
+    this.isPropagationStopped = returnTrue;
+
+    var e = this.originalEvent;
+    if (!e) { return; }
+    // if stopPropagation exists run it on the original event
+    if (e.stopPropagation) { e.stopPropagation(); }
+    // otherwise set the cancelBubble property of the original event to true (IE)
+    e.cancelBubble = true;
+  },
+  stopImmediatePropagation: function() {
+    this.isImmediatePropagationStopped = returnTrue;
+    this.stopPropagation();
+  },
+  isDefaultPrevented: returnFalse,
+  isPropagationStopped: returnFalse,
+  isImmediatePropagationStopped: returnFalse
+};
+_V_.Event.props = "altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode layerX layerY metaKey newValue offsetX offsetY pageX pageY prevValue relatedNode relatedTarget screenX screenY shiftKey srcElement target toElement view wheelDelta which".split(" ");
+
+function returnTrue(){ return true; }
+function returnFalse(){ return false; }
@@ -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
-};
@@ -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();
-    }
-  }
-});
-
@@ -0,0 +1,54 @@
+// Javascript JSON implementation
+// (Parse Method Only)
+// https://github.com/douglascrockford/JSON-js/blob/master/json2.js
+
+var JSON;
+if (!JSON) { JSON = {}; }
+
+(function(){
+  var cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g;
+
+  if (typeof JSON.parse !== 'function') {
+      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');
+      };
+  }
+}());
@@ -1,10 +1,73 @@
-////////////////////////////////////////////////////////////////////////////////
-// Convenience Functions (mini library)
-// Functions not specific to video or VideoJS and could probably be replaced with a library like jQuery
-////////////////////////////////////////////////////////////////////////////////
+_V_.merge = function(obj1, obj2, safe){
+  for (var attrname in obj2){
+    if (obj2.hasOwnProperty(attrname) && (!safe || !obj1.hasOwnProperty(attrname))) { obj1[attrname]=obj2[attrname]; }
+  }
+  return obj1;
+};
+_V_.extend = function(obj){ this.merge(this, obj, true); };

-VideoJS.extend({
+_V_.extend({
+  tech: {}, // Holder for playback technology settings
+  controlSets: {}, // Holder for control set definitions

+  techSupports: function(tech, type, name){
+    if (tech.supports[type]) {
+      return tech.supports[type][name];
+    }
+    return false;
+  },
+  updateTechSupport: function(tech, type, name, value){
+    if (!tech.supports[type]) { tech.supports[type] = {}; }
+    tech.supports[type][name] = value;
+  },
+  
+  html5Events: "loadstart,suspend,abort,error,emptied,stalled,loadedmetadata,loadeddata,canplay,canplaythrough,playing,waiting,seeking,seeked,ended,durationchange,timeupdate,progress,play,pause,ratechange,volumechange".split(","),
+
+  // 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
+
+  each: function(arr, fn){
+    if (!arr || arr.length === 0) { return; }
+    for (var i=0,j=arr.length; i<j; i++) {
+      fn.call(this, arr[i], i);
+    }
+  },
+
+  el: function(id){ return document.getElementById(id); },
+  createElement: function(tagName, attributes){
+    var el = document.createElement(tagName),
+        attrname;
+    for (attrname in attributes){
+      if (attributes.hasOwnProperty(attrname)) {
+        if (attrname.indexOf("-") !== -1) {
+          el.setAttribute(attrname, attributes[attrname]);
+        } else {
+          el[attrname] = attributes[attrname];
+        }
+      }
+    }
+    return el;
+  },
+  insertFirst: function(node, parent){
+    if (parent.firstChild) {
+      parent.insertBefore(parent.firstChild, node);
+    } else {
+      parent.appendChild(node);
+    }
+  },
  addClass: function(element, classToAdd){
    if ((" "+element.className+" ").indexOf(" "+classToAdd+" ") == -1) {
      element.className = element.className === "" ? classToAdd : element.className + " " + classToAdd;
@@ -12,12 +75,17 @@ VideoJS.extend({
  },
  removeClass: function(element, classToRemove){
    if (element.className.indexOf(classToRemove) == -1) { return; }
-    var classNames = element.className.split(/\s+/);
-    classNames.splice(classNames.lastIndexOf(classToRemove),1);
+    var classNames = element.className.split(" ");
+    classNames.splice(classNames.indexOf(classToRemove),1);
    element.className = classNames.join(" ");
  },
-  createElement: function(tagName, attributes){
-    return this.merge(document.createElement(tagName), attributes);
+  
+  remove: function(item, array){
+    if (!array) return;
+    var i = array.indexOf(item);
+    if (i != -1) { 
+      return array.splice(i, 1)
+    };
  },

  // Attempt to block the ability to select text while dragging controls
@@ -28,19 +96,32 @@ VideoJS.extend({
  // 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 seconds as H:MM:SS or M:SS
+  // Supplying a guide (in seconds) will include enough leading zeros to cover the length of the guide
+  formatTime: function(seconds, guide) {
+    var guide = guide || seconds, // Default to using seconds as guide
+        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);
+
+    // 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;
  },

  // 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));
+    return Math.max(0, Math.min(1, (x - _V_.findPosX(relativeElement)) / relativeElement.offsetWidth));
  },
  // Get an objects position on the page
  findPosX: function(obj) {
@@ -54,143 +135,134 @@ VideoJS.extend({
    return window.getComputedStyle(element, null).getPropertyValue(style);
  },

+  trim: function(string){ return string.toString().replace(/^\s+/, "").replace(/\s+$/, ""); },
  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);
+  isEmpty: function(object) {
+    for (var prop in object) {
+      return false;
    }
+    return true;
  },
-  removeListener: function(element, type, handler){
-    if (element.removeEventListener) {
-      element.removeEventListener(type, handler, false);
-    } else if (element.attachEvent) {
-      element.detachEvent("on"+type, handler);
+
+  // Mimic HTML5 TimeRange Spec.
+  createTimeRange: function(start, end){
+    return {
+      length: 1,
+      start: function() { return start; },
+      end: function() { return end; }
+    };
+  },
+
+  /* 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)
+  ================================================================================ */
+  cache: {}, // Where the data is stored
+  guid: 1, // Unique ID for the element
+  expando: "vdata" + (new Date).getTime(), // Unique attribute to store element's guid in
+
+  // Returns the cache object where data for the element is stored
+  getData: function(elem){
+    var id = elem[_V_.expando];
+    if (!id) {
+      id = elem[_V_.expando] = _V_.guid++;
+      _V_.cache[id] = {};
+    }
+    return _V_.cache[id];
+  },
+  // Delete data for the element from the cache and the guid attr from element
+  removeData: function(elem){
+    var id = elem[_V_.expando];
+    if (!id) { return; }
+    // Remove all stored data
+    delete _V_.cache[id];
+    // Remove the expando property from the DOM node
+    try {
+      delete elem[_V_.expando];
+    } catch(e) {
+      if (elem.removeAttribute) {
+        elem.removeAttribute(_V_.expando);
+      } else {
+        // IE doesn't appear to support removeAttribute on the document element
+        elem[_V_.expando] = null;
+      }
    }
  },

-  get: function(url, onSuccess){
+  /* Proxy (a.k.a Bind 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
+  ================================================================================ */
+  proxy: function(context, fn) {
+    // Make sure the function has a unique ID
+    if (!fn.guid) { fn.guid = _V_.guid++; }
+    // Create the new function that changes the context
+    var ret = function() {
+      return fn.apply(context, arguments);
+    };
+
+    // Give the new function the same ID
+    // (so that they are equivalent and can be easily removed)
+    ret.guid = fn.guid;
+
+    return ret;
+  },
+
+  get: function(url, onSuccess, onError){
    // if (netscape.security.PrivilegeManager.enablePrivilege) {
    //   netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
    // }
+
+    var local = (url.indexOf("file:") == 0 || (window.location.href.indexOf("file:") == 0 && url.indexOf("http:") == -1));
+
    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);
+
+    try {
+      request.open("GET", url);
+    } catch(e) {
+      _V_.log(e);
+      // onError(e);
+      return false;
+    }
+
+    request.onreadystatechange = _V_.proxy(this, function() {
+      if (request.readyState == 4) {
+        if (request.status == 200 || local && request.status == 0) {
+          onSuccess(request.responseText);
+        } else {
+          onError();
+        }
      }
-    }.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;
+      _V_.log(e);
+      onError(e);
    }
  }
+
 });
-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);
-};

+// /* Function Context Allows for binding context to functions when using in event listeners
+// ================================================================================ */
+// Function.prototype.context = function(obj){
+//   var method = this,
+//   temp = function(){
+//     return method.apply(obj, arguments);
+//   };
+//   return temp;
+// };
@@ -0,0 +1,15 @@
+// usage: log('inside coolFunc', this, arguments);
+// paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
+_V_.log = function(){
+  _V_.log.history = _V_.log.history || [];// store logs to an array for reference
+  _V_.log.history.push(arguments);
+  if(window.console) {
+    arguments.callee = arguments.callee.caller;
+    var newarr = [].slice.call(arguments);
+    (typeof console.log === 'object' ? _V_.log.apply.call(console.log, console, newarr) : console.log.apply(console, newarr));
+  }
+};
+
+// make it safe to use console.log always
+(function(b){function c(){}for(var d="assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,timeStamp,profile,profileEnd,time,timeEnd,trace,warn".split(","),a;a=d.pop();){b[a]=b[a]||c}})((function(){try
+{console.log();return window.console;}catch(err){return window.console={};}})());
@@ -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;
-
@@ -0,0 +1,152 @@
+VideoJS.tech.h5swf = {
+  // swf: "flash/VideoJS.swf",
+  swf: "https://s3.amazonaws.com/video-js/3.0b/video-js.swf",
+  // swf: "http://video-js.zencoder.com/3.0b/video-js.swf",
+  supported: function(){
+    /* TODO Check for flash, etc. */
+    return true;
+  },
+  canPlaySource: function(sourceObj){
+    if (sourceObj.type in _V_.tech.h5swf.supports.format) { return "maybe"; }
+  },
+  supports: {
+    format: {
+      "video/flv": "FLV",
+      "video/x-flv": "FLV",
+      "video/mp4": "MP4",
+      "video/m4v": "MP4"
+    },
+
+    // Optional events that we can manually mimic with timers
+    event: {
+      progress: false,
+      timeupdate: false
+    }
+  },
+
+  // Init the swf object
+  init: function(sourceObj){
+    var player = this,
+        placeHolder = _V_.createElement("div", { id: player.box.id + "_temp_h5swf" }),
+        objId = player.box.id+"_h5swf_api"
+        h5swf = VideoJS.tech.h5swf,
+
+        flashvars = {
+          readyFunction: "_V_.tech.h5swf.onSWFReady",
+          eventProxyFunction: "_V_.tech.h5swf.onSWFEvent",
+          errorEventProxyFunction: "_V_.tech.h5swf.onSWFErrorEvent",
+          src: sourceObj.src,
+          autoplay: this.options.autoplay,
+          preload: this.options.preload,
+          loop: this.options.loop,
+          muted: this.options.muted
+        },
+
+        params = {
+          allowScriptAccess: "always",
+          wmode: "opaque",
+          bgcolor: "#000000"
+        },
+
+        attributes = {
+          id: objId,
+          name: objId,
+          'class': 'vjs-tech'
+        };
+
+    player.box.appendChild(placeHolder);
+
+    swfobject.embedSWF(_V_.tech.h5swf.swf, placeHolder.id, "480", "270", "9.0.124", "", flashvars, params, attributes);
+  },
+  onSWFReady: function(currSwf){
+    // Flash seems to be catching errors, so raising them manally
+    try {
+      // Delay for real swf ready.
+      setTimeout(function(){
+        var el = _V_.el(currSwf),
+            player = el.parentNode.player; // Get player from box
+
+        el.player = player;
+
+        // Update reference to playback technology element
+        player.tels.h5swf = el;
+
+        player.ready(function(){
+          // this.src("http://video-js.zencoder.com/oceans-clip.mp4");
+        });
+        player.triggerEvent("techready");
+
+      },0);
+    } catch(err) {
+      _V_.log(err);
+    }
+  },
+  
+  onSWFEvent: function(swfID, eventName, other){
+    try {
+      var player = _V_.el(swfID).player;
+      if (player) {
+        player.triggerEvent(eventName);
+      }
+    } catch(err) {
+      _V_.log(err);
+    }
+  },
+
+   onSWFErrorEvent: function(swfID, eventName){
+    _V_.log("Error", eventName);
+  },
+  
+  api: {
+    setupTriggers: function(){
+      // Using global onSWFEvent func to distribute events
+    },
+
+    play: function(){ this.tels.h5swf.vjs_play(); },
+    pause: function(){ this.tels.h5swf.vjs_pause(); },
+    src: function(src){ this.tels.h5swf.vjs_src(src); },
+    load: function(){ this.tels.h5swf.vjs_load(); },
+
+    buffered: function(){
+      return _V_.createTimeRange(0, this.tels.h5swf.vjs_getProperty("buffered"));
+    },
+
+    supportsFullScreen: function(){
+      return false; // Flash does not allow fullscreen through javascript
+    },
+    enterFullScreen: function(){ return false; }
+  }
+};
+
+// Create setters and getters for attributes
+(function(){
+  var api = VideoJS.tech.h5swf.api,
+      readWrite = "src,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(","),
+      callOnly = "load,play,pause".split(",");
+      // Overridden: buffered
+
+      createSetter = function(attr){
+        var attrUpper = attr.charAt(0).toUpperCase() + attr.slice(1);
+        api["set"+attrUpper] = function(val){ return this.tels.h5swf.vjs_setProperty(attr, val); };
+      },
+
+      createGetter = function(attr){
+        api[attr] = function(){ return this.tels.h5swf.vjs_getProperty(attr); };
+      };
+
+  // Create getter and setters for all read/write attributes
+  _V_.each(readWrite, function(attr){
+    createGetter(attr);
+    createSetter(attr);
+  });
+
+  // Create getters for read-only attributes
+  _V_.each(readOnly, function(attr){
+    createGetter(attr);
+  });
+})();
+// Special
+// canPlayType
+// addTextTrack
+// textTracks
@@ -0,0 +1,157 @@
+// Setup an API for the HTML5 playback technology
+VideoJS.tech.html5 = {
+  supported: function(){
+    return !!document.createElement("video").canPlayType;
+  },
+  canPlaySource: function(srcObj){
+    return this.tag.canPlayType(srcObj.type); // Switch to global check
+    // Check Type
+    // If no Type, check ext
+    // Check Media Type
+  },
+  init: function(sourceObj){
+    var tag = this.tag, // Reuse original tag for HTML5 playback technology element
+        html5 = _V_.tech.html5,
+        options = this.options;
+
+    // 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 (html5.supports.movingElementInDOM === false) {
+      var newTag = _V_.createElement("video", {
+        id: tag.id,
+        className: tag.className
+      });
+
+      this.box.removeChild(this.tag);
+      tag = this.tag = newTag;
+      this.box.appendChild(tag);
+    }
+
+    // Store reference to playback element
+    this.tels.html5 = tag;
+
+    // Update tag settings, in case they were overridden
+    _V_.each(["autoplay","preload","loop","muted","poster"], function(attr){
+      tag[attr] = options[attr];
+    }, this);
+
+    if (tag.currentSrc != sourceObj.src) {
+      tag.src = sourceObj.src;
+    } else {
+      this.triggerEvent("loadstart");
+    }
+    this.triggerEvent("techready");
+  },
+  supports: {
+    /* Will hold support info as it's discovered */
+  },
+  api: {
+    setupTriggers: function(){
+      // Make video events trigger player events
+      // May seem verbose here, but makes other APIs possible.
+
+      // ["play", "playing", "pause", "ended", "volumechange", "error", "progress", "seeking", "timeupdate"]
+      var types = _V_.html5Events,
+          i;
+      for (i = 0;i<types.length; i++) {
+        _V_.addEvent(this.tels.html5, types[i], _V_.proxy(this, function(e){
+          e.stopPropagation();
+          this.triggerEvent(e);
+        }));
+      }
+    },
+    removeTriggers: function(){},
+
+    play: function(){ this.tels.html5.play(); },
+    pause: function(){ this.tels.html5.pause(); },
+    paused: function(){ return this.tels.html5.paused; },
+
+    currentTime: function(){ return this.tels.html5.currentTime; },
+    setCurrentTime: function(seconds){
+      try { this.tels.html5.currentTime = seconds; }
+      catch(e) {
+        _V_.log(e);
+        // this.warning(VideoJS.warnings.videoNotReady); 
+      }
+    },
+
+    duration: function(){ return this.tels.html5.duration || 0; },
+    buffered: function(){ return this.tels.html5.buffered; },
+
+    volume: function(){ return this.tels.html5.volume; },
+    setVolume: function(percentAsDecimal){ this.tels.html5.volume = percentAsDecimal; },
+    muted: function(){ return this.tels.html5.muted; },
+    setMuted: function(muted){ this.tels.html5.muted = muted },
+
+    width: function(){ return this.tels.html5.offsetWidth; },
+    height: function(){ return this.tels.html5.offsetHeight; },
+
+    supportsFullScreen: function(){
+      if(typeof this.tels.html5.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.tels.html5.webkitEnterFullScreen();
+      } catch (e) {
+        if (e.code == 11) { this.warning(VideoJS.warnings.videoNotReady); }
+      }
+    },
+    src: function(src){ this.tels.html5.src = src; },
+    load: function(){ this.tels.html5.load(); },
+    currentSrc: function(){ return this.tels.html5.currentSrc; },
+
+    preload: function(){ return this.tels.html5.preload; },
+    setPreload: function(val){ this.tels.html5.preload = val; },
+    autoplay: function(){ return this.tels.html5.autoplay; },
+    setAutoplay: function(val){ this.tels.html5.autoplay = val; },
+    loop: function(){ return this.tels.html5.loop; },
+    setLoop: function(val){ this.tels.html5.loop = val; },
+
+    error: function(){ return this.tels.html5.error; },
+    networkState: function(){ return this.tels.html5.networkState; },
+    readyState: function(){ return this.tels.html5.readyState; },
+    seeking: function(){ return this.tels.html5.seeking; },
+    initialTime: function(){ return this.tels.html5.initialTime; },
+    startOffsetTime: function(){ return this.tels.html5.startOffsetTime; },
+    played: function(){ return this.tels.html5.played; },
+    seekable: function(){ return this.tels.html5.seekable; },
+    ended: function(){ return this.tels.html5.ended; },
+    videoTracks: function(){ return this.tels.html5.videoTracks; },
+    audioTracks: function(){ return this.tels.html5.audioTracks; },
+    videoWidth: function(){ return this.tels.html5.videoWidth; },
+    videoHeight: function(){ return this.tels.html5.videoHeight; },
+    textTracks: function(){ return this.tels.html5.textTracks; },
+    defaultPlaybackRate: function(){ return this.tels.html5.defaultPlaybackRate; },
+    playbackRate: function(){ return this.tels.html5.playbackRate; },
+    mediaGroup: function(){ return this.tels.html5.mediaGroup; },
+    controller: function(){ return this.tels.html5.controller; },
+    controls: function(){ return this.tels.html5.controls; },
+    defaultMuted: function(){ return this.tels.html5.defaultMuted; }
+  }
+};
+
+/* Device Fixes
+================================================================================ */
+// iOS
+if (_V_.isIOS()) {
+  // If you move a video element in the DOM, it breaks video playback.
+  _V_.tech.supports.movingElementInDOM = false;
+}
+
+// Android
+if (_V_.isAndroid()) {
+
+  // Override Android 2.2 and less canPlayType method which is broken
+  if (_V_.androidVersion() < 3) {
+    document.createElement("video").constructor.prototype.canPlayType = function(type){
+      return (type && type.toLowerCase().indexOf("video/mp4") != -1) ? "maybe" : "";
+    };
+  }
+}
@@ -0,0 +1,131 @@
+_V_.Track = function(attributes, player){
+  // Store reference to the parent player
+  this.player = player;
+
+  this.src = attributes.src;
+  this.kind = attributes.kind;
+  this.srclang = attributes.srclang;
+  this.label = attributes.label;
+  this["default"] = attributes["default"];
+  this.title = attributes.title;
+
+  this.cues = [];
+  this.currentCue = false;
+  this.lastCueIndex = 0;
+
+  // Update current cue on timeupdate
+  player.addEvent("timeupdate", _V_.proxy(this, this.update))
+  // Reset cue time on media end
+  player.addEvent("ended", _V_.proxy(this, function() { this.lastCueIndex = 0; }));
+
+  // Load Track File
+  _V_.get(attributes.src, _V_.proxy(this, this.parseCues));
+};
+
+_V_.Track.prototype = {
+
+  parseCues: function(srcContent) {
+    var cue, time, text,
+        lines = srcContent.split("\n"),
+        line = "";
+
+    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
+        cue = {
+          id: line, // Cue Number
+          index: this.cues.length // Position in Array
+        };
+
+        // Second line - Time
+        line = _V_.trim(lines[++i]);
+        time = line.split(" --> ");
+        cue.startTime = this.parseCueTime(time[0]);
+        cue.endTime = this.parseCueTime(time[1]);
+
+        // Additional lines - Cue 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);
+        }
+        cue.text = text.join('<br/>');
+
+        // Add this cue
+        this.cues.push(cue);
+      }
+    }
+  },
+
+  parseCueTime: 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;
+  },
+
+  update: function(){
+    // Assuming all cues are in order by time, and do not overlap
+    if (this.cues && this.cues.length > 0) {
+      var time = this.player.currentTime();
+      // If current cue should stay showing, don't do anything. Otherwise, find new cue.
+      if (!this.currentCue || this.currentCue.startTime >= time || this.currentCue.endTime < time) {
+        var newSubIndex = false,
+          // Loop in reverse if lastCue is after current time (optimization)
+          // Meaning the user is scrubbing in reverse or rewinding
+          reverse = (this.cues[this.lastCueIndex].startTime > time),
+          // If reverse, step back 1 becase we know it's not the lastCue
+          i = this.lastCueIndex - (reverse) ? 1 : 0;
+        while (true) { // Loop until broken
+          if (reverse) { // Looping in reverse
+            // Stop if no more, or this cue ends before the current time (no earlier cues should apply)
+            if (i < 0 || this.cues[i].endTime < time) { break; }
+            // End is greater than time, so if start is less, show this cue
+            if (this.cues[i].startTime < time) {
+              newSubIndex = i;
+              break;
+            }
+            i--;
+          } else { // Looping forward
+            // Stop if no more, or this cue starts after time (no later cues should apply)
+            if (i >= this.cues.length || this.cues[i].startTime > time) { break; }
+            // Start is less than time, so if end is later, show this cue
+            if (this.cues[i].endTime > time) {
+              newSubIndex = i;
+              break;
+            }
+            i++;
+          }
+        }
+
+        // Set or clear current cue
+        if (newSubIndex !== false) {
+          this.currentCue = this.cues[newSubIndex];
+          this.lastCueIndex = newSubIndex;
+          this.updatePlayer(this.currentCue.text);
+        } else if (this.currentCue) {
+          this.currentCue = false;
+          this.updatePlayer("");
+        }
+      }
+    }
+  },
+
+  // Update the stored value for the current track kind
+  // and trigger an event to update all text track displays.
+  updatePlayer: function(text){
+    this.player.textTrackValue(this.kind, text);
+  }
+};
@@ -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);
-}
-
@@ -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>
@@ -0,0 +1,7 @@
+.project
+*~
+*.diff
+*.patch
+.DS_Store
+.settings
+
@@ -0,0 +1,27 @@
+[QUnit](http://docs.jquery.com/QUnit) - A JavaScript Unit Testing framework.
+================================
+
+QUnit is a powerful, easy-to-use, JavaScript test suite. It's used by the jQuery
+project to test its code and plugins but is capable of testing any generic
+JavaScript code (and even capable of testing JavaScript code on the server-side).
+
+QUnit is especially useful for regression testing: Whenever a bug is reported,
+write a test that asserts the existence of that particular bug. Then fix it and
+commit both. Every time you work on the code again, run the tests. If the bug
+comes up again - a regression - you'll spot it immediately and know how to fix
+it, because you know what code you just changed.
+
+Having good unit test coverage makes safe refactoring easy and cheap. You can
+run the tests after each small refactoring step and always know what change
+broke something.
+
+QUnit is similar to other unit testing frameworks like JUnit, but makes use of
+the features JavaScript provides and helps with testing code in the browser, eg.
+with it's stop/start facilities for testing asynchronous code.
+
+If you are interested in helping developing QUnit, you are in the right place.
+For related discussions, visit the
+[QUnit and Testing forum](http://forum.jquery.com/qunit-and-testing).
+
+Planning for a qunitjs.com site and other testing tools related work now happens
+on the [jQuery Testing Team planning wiki](http://jquerytesting.pbworks.com/w/page/41556026/FrontPage).
@@ -0,0 +1,16 @@
+Canvas - A QUnit Addon For Testing Canvas Rendering
+================================
+
+This addon for QUnit adds a pixelEqual method that allows you to assert
+individual pixel values in a given canvas.
+
+Usage:
+
+    pixelEqual(canvas, x, y, r, g, b, a, message)
+
+Where:
+
+  * canvas: Reference to a canvas element
+  * x, y: Coordinates of the pixel to test
+  * r, g, b, a: The color and opacity value of the pixel that you except
+  * message: Optional message, same as for other assertions
@@ -0,0 +1,76 @@
+test("Canvas pixels", function () {
+	var canvas = document.getElementById('qunit-canvas'), context;
+	try {
+		context = canvas.getContext('2d');
+	} catch(e) {
+		// propably no canvas support, just exit
+		return;
+	}
+	context.fillStyle = 'rgba(0, 0, 0, 0)';
+	context.fillRect(0, 0, 5, 5);
+	QUnit.pixelEqual(canvas, 0, 0, 0, 0, 0, 0);
+	context.clearRect(0,0,5,5);
+	context.fillStyle = 'rgba(255, 0, 0, 0)';
+	context.fillRect(0, 0, 5, 5);
+	QUnit.pixelEqual(canvas, 0, 0, 0, 0, 0, 0);
+	context.clearRect(0,0,5,5);
+	context.fillStyle = 'rgba(0, 255, 0, 0)';
+	context.fillRect(0, 0, 5, 5);
+	QUnit.pixelEqual(canvas, 0, 0, 0, 0, 0, 0);
+	context.clearRect(0,0,5,5);
+	context.fillStyle = 'rgba(0, 0, 255, 0)';
+	context.fillRect(0, 0, 5, 5);
+	QUnit.pixelEqual(canvas, 0, 0, 0, 0, 0, 0);
+	context.clearRect(0,0,5,5);
+
+	context.fillStyle = 'rgba(0, 0, 0, 0.5)';
+	context.fillRect(0, 0, 5, 5);
+	QUnit.pixelEqual(canvas, 0, 0, 0, 0, 0, 127);
+	context.clearRect(0,0,5,5);
+	context.fillStyle = 'rgba(255, 0, 0, 0.5)';
+	context.fillRect(0, 0, 5, 5);
+	QUnit.pixelEqual(canvas, 0, 0, 255, 0, 0, 127);
+	context.clearRect(0,0,5,5);
+	context.fillStyle = 'rgba(0, 255, 0, 0.5)';
+	context.fillRect(0, 0, 5, 5);
+	QUnit.pixelEqual(canvas, 0, 0, 0, 255, 0, 127);
+	context.clearRect(0,0,5,5);
+	context.fillStyle = 'rgba(0, 0, 255, 0.5)';
+	context.fillRect(0, 0, 5, 5);
+	QUnit.pixelEqual(canvas, 0, 0, 0, 0, 255, 127);
+	context.clearRect(0,0,5,5);
+
+	context.fillStyle = 'rgba(0, 0, 0, 0.5)';
+	context.fillRect(0, 0, 5, 5);
+	QUnit.pixelEqual(canvas, 2, 2, 0, 0, 0, 127);
+	context.clearRect(0,0,5,5);
+	context.fillStyle = 'rgba(255, 0, 0, 0.5)';
+	context.fillRect(0, 0, 5, 5);
+	QUnit.pixelEqual(canvas, 2, 2, 255, 0, 0, 127);
+	context.clearRect(0,0,5,5);
+	context.fillStyle = 'rgba(0, 255, 0, 0.5)';
+	context.fillRect(0, 0, 5, 5);
+	QUnit.pixelEqual(canvas, 2, 2, 0, 255, 0, 127);
+	context.clearRect(0,0,5,5);
+	context.fillStyle = 'rgba(0, 0, 255, 0.5)';
+	context.fillRect(0, 0, 5, 5);
+	QUnit.pixelEqual(canvas, 2, 2, 0, 0, 255, 127);
+	context.clearRect(0,0,5,5);
+
+	context.fillStyle = 'rgba(0, 0, 0, 1)';
+	context.fillRect(0, 0, 5, 5);
+	QUnit.pixelEqual(canvas, 4, 4, 0, 0, 0, 255);
+	context.clearRect(0,0,5,5);
+	context.fillStyle = 'rgba(255, 0, 0, 1)';
+	context.fillRect(0, 0, 5, 5);
+	QUnit.pixelEqual(canvas, 4, 4, 255, 0, 0, 255);
+	context.clearRect(0,0,5,5);
+	context.fillStyle = 'rgba(0, 255, 0, 1)';
+	context.fillRect(0, 0, 5, 5);
+	QUnit.pixelEqual(canvas, 4, 4, 0, 255, 0, 255);
+	context.clearRect(0,0,5,5);
+	context.fillStyle = 'rgba(0, 0, 255, 1)';
+	context.fillRect(0, 0, 5, 5);
+	QUnit.pixelEqual(canvas, 4, 4, 0, 0, 255, 255);
+	context.clearRect(0,0,5,5);
+});
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8" />
+	<title>QUnit Test Suite - Canvas Addon</title>
+	<link rel="stylesheet" href="../../qunit/qunit.css" type="text/css" media="screen">
+	<script type="text/javascript" src="../../qunit/qunit.js"></script>
+	<script type="text/javascript" src="qunit-canvas.js"></script>
+	<script type="text/javascript" src="canvas-test.js"></script>
+</head>
+<body>
+	<h1 id="qunit-header">QUnit Test Suite - Canvas Addon</h1>
+	<h2 id="qunit-banner"></h2>
+	<div id="qunit-testrunner-toolbar"></div>
+	<h2 id="qunit-userAgent"></h2>
+	<ol id="qunit-tests"></ol>
+	<canvas id="qunit-canvas" width="5" height="5"></canvas>
+</body>
+</html>
@@ -0,0 +1,6 @@
+QUnit.extend( QUnit, {
+	pixelEqual: function(canvas, x, y, r, g, b, a, message) {
+		var actual = Array.prototype.slice.apply(canvas.getContext('2d').getImageData(x, y, 1, 1).data), expected = [r, g, b, a];
+		QUnit.push(QUnit.equiv(actual, expected), actual, expected, message);
+	}
+});
@@ -0,0 +1,17 @@
+Close-Enough - A QUnit Addon For Number Approximations
+================================
+
+This addon for QUnit adds close and notClose assertion methods, to test that
+numbers are close enough (or different enough) from an expected number, with
+a specified accuracy.
+
+Usage:
+
+    close(actual, expected, maxDifference, message)
+    notClose(actual, expected, minDifference, message)
+
+Where:
+
+  * maxDifference: the maximum inclusive difference allowed between the actual and expected numbers
+  * minDifference: the minimum exclusive difference allowed between the actual and expected numbers
+  * actual, expected, message: The usual
@@ -0,0 +1,37 @@
+test("Close Numbers", function () {
+
+	QUnit.close(7, 7, 0);
+	QUnit.close(7, 7.1, 0.1);
+	QUnit.close(7, 7.1, 0.2);
+	
+	QUnit.close(3.141, Math.PI, 0.001);
+	QUnit.close(3.1, Math.PI, 0.1);
+	
+	var halfPi = Math.PI / 2;
+	QUnit.close(halfPi, 1.57, 0.001);
+	
+	var sqrt2 = Math.sqrt(2);
+	QUnit.close(sqrt2, 1.4142, 0.0001);
+	
+	QUnit.close(Infinity, Infinity, 1);	
+	
+});
+
+test("Distant Numbers", function () {
+
+	QUnit.notClose(6, 7, 0);
+	QUnit.notClose(7, 7.2, 0.1);
+	QUnit.notClose(7, 7.2, 0.19999999999);
+	
+	QUnit.notClose(3.141, Math.PI, 0.0001);
+	QUnit.notClose(3.1, Math.PI, 0.001);
+	
+	var halfPi = Math.PI / 2;
+	QUnit.notClose(halfPi, 1.57, 0.0001);
+	
+	var sqrt2 = Math.sqrt(2);
+	QUnit.notClose(sqrt2, 1.4142, 0.00001);
+	
+	QUnit.notClose(Infinity, -Infinity, 5);
+
+});
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8" />
+	<title>QUnit Test Suite - Close Enough Addon</title>
+	<link rel="stylesheet" href="../../qunit/qunit.css" type="text/css" media="screen">
+	<script type="text/javascript" src="../../qunit/qunit.js"></script>
+	<script type="text/javascript" src="qunit-close-enough.js"></script>
+	<script type="text/javascript" src="close-enough-test.js"></script>
+</head>
+<body>
+	<h1 id="qunit-header">QUnit Test Suite - Close Enough</h1>
+	<h2 id="qunit-banner"></h2>
+	<div id="qunit-testrunner-toolbar"></div>
+	<h2 id="qunit-userAgent"></h2>
+	<ol id="qunit-tests"></ol>
+</body>
+</html>
@@ -0,0 +1,32 @@
+QUnit.extend( QUnit, {
+	/**
+	 * Checks that the first two arguments are equal, or are numbers close enough to be considered equal
+	 * based on a specified maximum allowable difference.
+	 *
+	 * @example close(3.141, Math.PI, 0.001);
+	 *
+	 * @param Number actual
+	 * @param Number expected
+	 * @param Number maxDifference (the maximum inclusive difference allowed between the actual and expected numbers)
+	 * @param String message (optional)
+	 */
+	close: function(actual, expected, maxDifference, message) {
+		var passes = (actual === expected) || Math.abs(actual - expected) <= maxDifference;
+		QUnit.push(passes, actual, expected, message);
+	},
+	
+	/**
+	 * Checks that the first two arguments are numbers with differences greater than the specified 
+	 * minimum difference.
+	 *
+	 * @example notClose(3.1, Math.PI, 0.001);
+	 *
+	 * @param Number actual
+	 * @param Number expected
+	 * @param Number minDifference (the minimum exclusive difference allowed between the actual and expected numbers)
+	 * @param String message (optional)
+	 */
+	notClose: function(actual, expected, minDifference, message) {
+		QUnit.push(Math.abs(actual - expected) > minDifference, actual, expected, message);
+	}
+});
@@ -0,0 +1,7 @@
+Composite - A QUnit Addon For Running Multiple Test Files
+================================
+
+Composite is a QUnit addon that, when handed an array of files, will
+open each of those files inside of an iframe, run the tests and
+display the results as a single suite of QUnit tests.
+
@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8" />
+	<title>QUnit SubsuiteRunner Test Suite</title>
+
+	<link rel="stylesheet" href="../../qunit/qunit.css" type="text/css" media="screen">
+	<link rel="stylesheet" href="qunit-composite.css">
+	<script src="../../qunit/qunit.js"></script>
+	<script src="qunit-composite.js"></script>
+
+	<script>
+	QUnit.testSuites([
+		"../../test/index.html",
+		"../canvas/canvas.html",
+		"../close-enough/close-enough.html",
+		"../step/step.html",
+		"composite-test.html"
+   	]);
+	</script>
+</head>
+<body>
+
+<h1 id="qunit-header">QUnit SubsuiteRunner Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+<div id="qunit-fixture">
+
+</div>
+</body>
+</html>
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8" />
+	<title>QUnit Core Test Suite</title>
+	<link rel="stylesheet" href="../../qunit/qunit.css" type="text/css" media="screen">
+	<script src="../../qunit/qunit.js"></script>
+
+	<script src="qunit-composite.js"></script>
+	<script src="composite-test.js"></script>
+</head>
+<body>
+	<h1 id="qunit-header">QUnit Core Test Suite</h1>
+	<h2 id="qunit-banner"></h2>
+	<div id="qunit-testrunner-toolbar"></div>
+	<h2 id="qunit-userAgent"></h2>
+	<ol id="qunit-tests"></ol>
+	<div id="qunit-fixture">test markup</div>
+</body>
+</html>
@@ -0,0 +1,159 @@
+module( "testSuites tests", (function(){
+	var asyncTest = QUnit.asyncTest,
+		runSuite = QUnit.runSuite;
+
+	return {
+		setup: function(){
+			//proxy asyncTest and runSuite
+			QUnit.asyncTest = window.asyncTest = function( name, callback ){
+				ok( true, "asyncTestCalled for each suite" );
+				callback(); //don't acutally create tests, just call callback
+			};
+			QUnit.runSuite = window.runSuite = function(){
+				ok( true, "runSuite called for each suite" );
+			};
+			//ensure that subsuite's done doesn't run
+			this.oldDone = QUnit.done;
+		},
+		teardown: function(){
+			//restore
+			QUnit.asyncTest = window.asyncTest = asyncTest;
+			QUnit.runSuite = window.runSuite = runSuite;
+			QUnit.done = this.oldDone;
+		}
+	};
+})());
+
+test( "proper number of asyncTest and runSuite calls", function(){
+	expect( 6 );
+	QUnit.testSuites( ["one.html", "two.html", "three.html"] );
+});
+
+test( "done callback changed", function(){
+	QUnit.testSuites( ["dummy.html"] );
+	notEqual( this.oldDone, QUnit.done, "done callback should be set" );
+});
+
+module( "testStart tests", (function(){
+	var id = QUnit.id;
+	return {
+		setup: function(){
+			//proxy id
+			var fakeElem = this.fakeElem = document.createElement( "div" );
+
+			QUnit.id = function(){
+				return fakeElem;
+			}
+		},
+		teardown: function(){
+			QUnit.id = id;
+		}
+	};
+})());
+
+test( "running message printed", function(){
+	var hello = "hello world",
+	expected = "Running " + hello + "...<br>&nbsp;";
+	QUnit.testStart( {name: hello} );
+	equal( this.fakeElem.innerHTML, expected, "innerHTML was set correctly by testStart" );
+});
+
+module( "testDone tests", (function(){
+	var id = QUnit.id;
+	return {
+		setup: function(){
+			//proxy id
+			var fakeElem = this.fakeElem = document.createElement( "div" );
+			fakeElem.appendChild( document.createElement( "ol" ) );
+			fakeElem.appendChild( document.createElement( "ol" ) );
+			QUnit.id = function(){
+				return fakeElem;
+			}
+		},
+		teardown: function(){
+			QUnit.id = id;
+		}
+	};
+})());
+
+test( "test expansions are hidden", function(){
+	QUnit.testDone();
+	equal( this.fakeElem.children[0].style.display, "none", "first ol display is none" );
+	equal( this.fakeElem.children[1].style.display, "none", "second ol display is none" );
+});
+
+test( "non-ol elements aren't hidden", function(){
+	this.fakeElem.appendChild( document.createElement( "span" ) );
+
+	QUnit.testDone();
+	notEqual( this.fakeElem.children[2].style.display, "none", "first ol display is none" );
+});
+
+module( "runSuite tests", (function(){
+	var getElementsByTagName = document.getElementsByTagName,
+		createElement = document.createElement,
+		runSuite = QUnit.runSuite;
+
+	return {
+		setup: function(){
+			//proxy getElementsByTagName and createElement
+			var setAttributeCall = this.setAttributeCall = {},
+				appendChildCall = this.appendChildCall = {called: 0},
+				iframeLoad = this.iframeLoad = {},
+				iframeQUnitObject = this.iframeQUnitObject = {},
+				fakeElement = {
+					appendChild: function(){appendChildCall.called++},
+					setAttribute: function(){setAttributeCall.args = arguments},
+					addEventListener: function( type, callback ){iframeLoad.callback = callback;},
+					contentWindow: {QUnit: iframeQUnitObject},
+					className: "",
+				};
+
+			document.getElementsByTagName = function(){
+				return [fakeElement];
+			};
+			document.createElement = function(){
+				return fakeElement;
+			}
+
+		},
+		teardown: function(){
+			document.getElementsByTagName = getElementsByTagName;
+			document.createElement = createElement;
+			//must restore even though we didn't proxy; the runner overwrites upon first call
+			QUnit.runSuite = runSuite;
+		}
+	};
+})());
+
+test( "runSuite different after first run", function(){
+	var before = QUnit.runSuite,
+		after;
+	QUnit.runSuite();
+	after = QUnit.runSuite;
+	notEqual( before, after, "runSuite changed after initial run" );
+});
+
+test( "iframe only created once", function(){
+	QUnit.runSuite();
+	equal( this.appendChildCall.called, 1, "append child called once" );
+	QUnit.runSuite();
+	equal( this.appendChildCall.called, 1, "append child only ever called once" );
+});
+
+test( "iframe's QUnit object is modified when iframe source loads", function(){
+	var before = this.iframeQUnitObject,
+		after;
+	QUnit.runSuite();
+	this.iframeLoad.callback();
+	notEqual( before, after, "iframe's qunit object is modified upon load");
+});
+
+test( "iframe src set to suite passed", function(){
+	var pages = ["testing.html", "subsuiteRunner.html"];
+	QUnit.runSuite( pages[0] );
+	equal( this.setAttributeCall.args[0], "src", "src attribute set" );
+	equal( this.setAttributeCall.args[1], pages[0], "src attribute set" );
+	QUnit.runSuite( pages[1] );
+	equal( this.setAttributeCall.args[1], pages[1], "src attribute set" );
+});
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8" />
+	<title>QUnit Core Test Suite</title>
+	<link rel="stylesheet" href="../../qunit/qunit.css" type="text/css" media="screen">
+	<script src="../../qunit/qunit.js"></script>
+
+	<script src="../../test/test.js"></script>
+</head>
+<body>
+	<h1 id="qunit-header">QUnit Core Test Suite</h1>
+	<h2 id="qunit-banner"></h2>
+	<div id="qunit-testrunner-toolbar"></div>
+	<h2 id="qunit-userAgent"></h2>
+	<ol id="qunit-tests"></ol>
+	<div id="qunit-fixture">test markup</div>
+</body>
+</html>
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8" />
+	<title>QUnit Same Test Suite</title>
+	<link rel="stylesheet" href="../../qunit/qunit.css" type="text/css" media="screen">
+	<script src="../../qunit/qunit.js"></script>
+
+	<script src="../../test/same.js"></script>
+</head>
+<body>
+	<h1 id="qunit-header">QUnit Same Test Suite</h1>
+	<h2 id="qunit-banner"></h2>
+	<div id="qunit-testrunner-toolbar"></div>
+	<h2 id="qunit-userAgent"></h2>
+	<ol id="qunit-tests"></ol>
+	<div id="qunit-fixture">test markup</div>
+</body>
+</html>
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8" />
+		<title>Composite</title>
+	</head>
+	<body>
+		<h1>Composite</h1>
+		<h3>A QUnit Addon For Running Multiple Test Files</h3>
+		<p>Composite is a QUnit addon that, when handed an array of
+		files, will open each of those files inside of an iframe, run
+		the tests and display the results as a single suite of QUnit
+		tests.</p>
+		<h4>Using Composite</h4>
+		<p>To use Composite, setup a standard QUnit html page as you
+		would with other QUnit tests. Remember to include composite.js
+		and composite.css. Then, inside of either an external js file,
+		or a script block call the only new method that Composite
+		exposes, QUnit.testSuites().</p><p>QUnit.testSuites() is
+		passed an array of test files to run as follows:</p>
+		<pre>
+QUnit.testSuites([
+    "test-file-1.html",
+    "test-file-2.html",
+    "test-file-3.html"
+]);
+		</pre>
+		<h4>Tests</h4>
+		<p>Composite has tests of it's own.</p>
+		<p>
+			<a href="composite-test.html">Composite Test</a>: A suite which tests the implementation of composite.<br>
+			<a href="composite-demo-test.html">Composite Demo</a>: A suite which demoes how Compisite is bootstrapped and run.
+		</p>
+	</body>
+</html>
@@ -0,0 +1,13 @@
+iframe.qunit-subsuite{
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    
+    margin: 0;
+    padding: 0;
+    border-width: 1px 0 0;
+    height: 45%;
+    width: 100%;
+
+    background: #fff;
+}
@@ -0,0 +1,82 @@
+(function( QUnit ) {
+
+var subsuiteFrame;
+
+QUnit.extend( QUnit, {
+	testSuites: function( suites ) {
+		for ( var i = 0; i < suites.length; i++ ) {
+			(function( suite ) {
+				asyncTest( suite, function() {
+					QUnit.runSuite( suite );
+				});
+			}( suites[i] ) );
+		}
+		QUnit.done = function() {
+			subsuiteFrame.style.display = "none";
+		};
+	},
+
+	testStart: function( data ) {
+		// update the test status to show which test suite is running
+		QUnit.id( "qunit-testresult" ).innerHTML = "Running " + data.name + "...<br>&nbsp;";
+	},
+
+	testDone: function() {
+		var current = QUnit.id( this.config.current.id ),
+			children = current.children;
+
+		// undo the auto-expansion of failed tests
+		for ( var i = 0; i < children.length; i++ ) {
+			if ( children[i].nodeName === "OL" ) {
+				children[i].style.display = "none";
+			}
+		}
+	},
+
+	runSuite: function( suite ) {
+		var body = document.getElementsByTagName( "body" )[0],
+			iframe = subsuiteFrame = document.createElement( "iframe" ),
+			iframeWin;
+
+		iframe.className = "qunit-subsuite";
+		body.appendChild( iframe );
+
+		function onIframeLoad() {
+			var module, test,
+				count = 0;
+
+			QUnit.extend( iframeWin.QUnit, {
+				moduleStart: function( data ) {
+					// capture module name for messages
+					module = data.name;
+				},
+
+				testStart: function( data ) {
+					// capture test name for messages
+					test = data.name;
+				},
+
+				log: function( data ) {
+					// pass all test details through to the main page
+					var message = module + ": " + test + ": " + data.message;
+					expect( ++count );
+					QUnit.push( data.result, data.actual, data.expected, message );
+				},
+
+				done: function() {
+					// start the wrapper test from the main page
+					start();
+				}
+			});
+		}
+		QUnit.addEvent( iframe, "load", onIframeLoad );
+
+		iframeWin = iframe.contentWindow;
+		iframe.setAttribute( "src", suite );
+
+		this.runSuite = function( suite ) {
+			iframe.setAttribute( "src", suite );
+		};
+	}
+});
+}( QUnit ) );
@@ -0,0 +1,18 @@
+QUnit.step() - A QUnit Addon For Testing execution in order
+============================================================
+
+This addon for QUnit adds a step method that allows you to assert
+the proper sequence in which the code should execute.
+
+Example:
+
+    test("example test", function () {
+      function x() {
+        QUnit.step(2, "function y should be called first");
+      }
+      function y() {
+        QUnit.step(1);
+      }
+      y();
+      x();
+    });
@@ -0,0 +1,25 @@
+QUnit.extend( QUnit, {
+
+	/**
+	 * Check the sequence/order
+	 *
+	 * @example step(1); setTimeout(function () { step(3); }, 100); step(2);
+	 * @param Number expected  The excepted step within the test()
+	 * @param String message (optional)
+	 */
+	step: function (expected, message) {
+		this.config.current.step++; // increment internal step counter.
+		if (typeof message == "undefined") {
+			message = "step " + expected;
+		}
+		var actual = this.config.current.step;
+		QUnit.push(QUnit.equiv(actual, expected), actual, expected, message);
+	}
+});
+
+/**
+ * Reset the step counter for every test()
+ */ 
+QUnit.testStart(function () {
+	this.config.current.step = 0;
+});
@@ -0,0 +1,13 @@
+module('Step Addon');
+test("step", 3, function () {
+	QUnit.step(1, "step starts at 1");
+	setTimeout(function () {
+		start();
+		QUnit.step(3);
+	}, 100);
+	QUnit.step(2, "before the setTimeout callback is run");
+	stop();
+});
+test("step counter", 1, function () {
+	QUnit.step(1, "each test has its own step counter");
+});
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8" />
+	<title>QUnit Test Suite - Step Addon</title>
+	<link rel="stylesheet" href="../../qunit/qunit.css" type="text/css" media="screen">
+	<script type="text/javascript" src="../../qunit/qunit.js"></script>
+	<script type="text/javascript" src="qunit-step.js"></script>
+	<script type="text/javascript" src="step-test.js"></script>
+</head>
+<body>
+	<h1 id="qunit-header">QUnit Test Suite - Step Addon</h1>
+	<h2 id="qunit-banner"></h2>
+	<div id="qunit-testrunner-toolbar"></div>
+	<h2 id="qunit-userAgent"></h2>
+	<ol id="qunit-tests"></ol>
+	<canvas id="qunit-canvas" width="5" height="5"></canvas>
+</body>
+</html>
@@ -0,0 +1,27 @@
+{
+	"name": "qunit",
+	"author": "The jQuery Project",
+	"contributors": [
+	{
+		"name": "John Resig",
+		"email": "jeresig@gmail.com",
+		"url": "http://ejohn.org/"
+	},
+	{
+		"name": "Jörn Zaefferer",
+		"email": "joern.zaefferer@googlemail.com",
+		"url": "http://bassistance.de/"
+	}],
+	"url": "http://docs.jquery.com/QUnit",
+	"repositories"	: [{
+		"type": "git", 
+		"url": "https://github.com/jquery/qunit.git"
+	}],
+	"license": {
+		"name": "MIT",
+		"url": "http://www.opensource.org/licenses/mit-license.php"
+	},
+	"description": "An easy-to-use JavaScript Unit Testing framework.",
+	"keywords": [ "testing", "unit", "jquery" ],
+	"main": "qunit/qunit.js"
+}
@@ -0,0 +1,226 @@
+/**
+ * QUnit - A JavaScript Unit Testing Framework
+ *
+ * http://docs.jquery.com/QUnit
+ *
+ * Copyright (c) 2011 John Resig, Jörn Zaefferer
+ * Dual licensed under the MIT (MIT-LICENSE.txt)
+ * or GPL (GPL-LICENSE.txt) licenses.
+ */
+
+/** Font Family and Sizes */
+
+#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult {
+	font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
+}
+
+#qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
+#qunit-tests { font-size: smaller; }
+
+
+/** Resets */
+
+#qunit-tests, #qunit-tests ol, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult {
+	margin: 0;
+	padding: 0;
+}
+
+
+/** Header */
+
+#qunit-header {
+	padding: 0.5em 0 0.5em 1em;
+
+	color: #8699a4;
+	background-color: #0d3349;
+
+	font-size: 1.5em;
+	line-height: 1em;
+	font-weight: normal;
+
+	border-radius: 15px 15px 0 0;
+	-moz-border-radius: 15px 15px 0 0;
+	-webkit-border-top-right-radius: 15px;
+	-webkit-border-top-left-radius: 15px;
+}
+
+#qunit-header a {
+	text-decoration: none;
+	color: #c2ccd1;
+}
+
+#qunit-header a:hover,
+#qunit-header a:focus {
+	color: #fff;
+}
+
+#qunit-banner {
+	height: 5px;
+}
+
+#qunit-testrunner-toolbar {
+	padding: 0.5em 0 0.5em 2em;
+	color: #5E740B;
+	background-color: #eee;
+}
+
+#qunit-userAgent {
+	padding: 0.5em 0 0.5em 2.5em;
+	background-color: #2b81af;
+	color: #fff;
+	text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
+}
+
+
+/** Tests: Pass/Fail */
+
+#qunit-tests {
+	list-style-position: inside;
+}
+
+#qunit-tests li {
+	padding: 0.4em 0.5em 0.4em 2.5em;
+	border-bottom: 1px solid #fff;
+	list-style-position: inside;
+}
+
+#qunit-tests.hidepass li.pass, #qunit-tests.hidepass li.running  {
+	display: none;
+}
+
+#qunit-tests li strong {
+	cursor: pointer;
+}
+
+#qunit-tests li a {
+	padding: 0.5em;
+	color: #c2ccd1;
+	text-decoration: none;
+}
+#qunit-tests li a:hover,
+#qunit-tests li a:focus {
+	color: #000;
+}
+
+#qunit-tests ol {
+	margin-top: 0.5em;
+	padding: 0.5em;
+
+	background-color: #fff;
+
+	border-radius: 15px;
+	-moz-border-radius: 15px;
+	-webkit-border-radius: 15px;
+
+	box-shadow: inset 0px 2px 13px #999;
+	-moz-box-shadow: inset 0px 2px 13px #999;
+	-webkit-box-shadow: inset 0px 2px 13px #999;
+}
+
+#qunit-tests table {
+	border-collapse: collapse;
+	margin-top: .2em;
+}
+
+#qunit-tests th {
+	text-align: right;
+	vertical-align: top;
+	padding: 0 .5em 0 0;
+}
+
+#qunit-tests td {
+	vertical-align: top;
+}
+
+#qunit-tests pre {
+	margin: 0;
+	white-space: pre-wrap;
+	word-wrap: break-word;
+}
+
+#qunit-tests del {
+	background-color: #e0f2be;
+	color: #374e0c;
+	text-decoration: none;
+}
+
+#qunit-tests ins {
+	background-color: #ffcaca;
+	color: #500;
+	text-decoration: none;
+}
+
+/*** Test Counts */
+
+#qunit-tests b.counts                       { color: black; }
+#qunit-tests b.passed                       { color: #5E740B; }
+#qunit-tests b.failed                       { color: #710909; }
+
+#qunit-tests li li {
+	margin: 0.5em;
+	padding: 0.4em 0.5em 0.4em 0.5em;
+	background-color: #fff;
+	border-bottom: none;
+	list-style-position: inside;
+}
+
+/*** Passing Styles */
+
+#qunit-tests li li.pass {
+	color: #5E740B;
+	background-color: #fff;
+	border-left: 26px solid #C6E746;
+}
+
+#qunit-tests .pass                          { color: #528CE0; background-color: #D2E0E6; }
+#qunit-tests .pass .test-name               { color: #366097; }
+
+#qunit-tests .pass .test-actual,
+#qunit-tests .pass .test-expected           { color: #999999; }
+
+#qunit-banner.qunit-pass                    { background-color: #C6E746; }
+
+/*** Failing Styles */
+
+#qunit-tests li li.fail {
+	color: #710909;
+	background-color: #fff;
+	border-left: 26px solid #EE5757;
+	white-space: pre;
+}
+
+#qunit-tests > li:last-child {
+	border-radius: 0 0 15px 15px;
+	-moz-border-radius: 0 0 15px 15px;
+	-webkit-border-bottom-right-radius: 15px;
+	-webkit-border-bottom-left-radius: 15px;
+}
+
+#qunit-tests .fail                          { color: #000000; background-color: #EE5757; }
+#qunit-tests .fail .test-name,
+#qunit-tests .fail .module-name             { color: #000000; }
+
+#qunit-tests .fail .test-actual             { color: #EE5757; }
+#qunit-tests .fail .test-expected           { color: green;   }
+
+#qunit-banner.qunit-fail                    { background-color: #EE5757; }
+
+
+/** Result */
+
+#qunit-testresult {
+	padding: 0.5em 0.5em 0.5em 2.5em;
+
+	color: #2b81af;
+	background-color: #D2E0E6;
+
+	border-bottom: 1px solid white;
+}
+
+/** Fixture */
+
+#qunit-fixture {
+	position: absolute;
+	top: -10000px;
+	left: -10000px;
+}
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>QUnit Test Suite</title>
+	<link rel="stylesheet" href="../qunit/qunit.css" type="text/css" media="screen">
+	<script type="text/javascript" src="../qunit/qunit.js"></script>
+	<script type="text/javascript" src="test.js"></script>
+	<script type="text/javascript" src="same.js"></script>
+	<script>
+		var logs = ["begin", "testStart", "testDone", "log", "moduleStart", "moduleDone", "done"];
+		for (var i = 0; i < logs.length; i++) {
+			(function() {
+				var log = logs[i];
+				QUnit[log] = function() {
+					console.log(log, arguments);
+				};
+			})();
+		}
+	</script>
+</head>
+<body>
+	<div id="qunit-fixture">test markup</div>
+</body>
+</html>
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8" />
+	<title>QUnit Test Suite</title>
+	<link rel="stylesheet" href="../qunit/qunit.css" type="text/css" media="screen">
+	<script type="text/javascript" src="../qunit/qunit.js"></script>
+	<script type="text/javascript" src="test.js"></script>
+	<script type="text/javascript" src="same.js"></script>
+</head>
+<body>
+	<h1 id="qunit-header">QUnit Test Suite</h1>
+	<h2 id="qunit-banner"></h2>
+	<div id="qunit-testrunner-toolbar"></div>
+	<h2 id="qunit-userAgent"></h2>
+	<ol id="qunit-tests"></ol>
+	<div id="qunit-fixture">test markup</div>
+</body>
+</html>
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>QUnit Test Suite</title>
+	<link rel="stylesheet" href="../qunit/qunit.css" type="text/css" media="screen">
+	<script type="text/javascript" src="../qunit/qunit.js"></script>
+	<script type="text/javascript" src="logs.js"></script>
+</head>
+<body>
+	<h1 id="qunit-header">QUnit Test Suite</h1>
+	<h2 id="qunit-banner"></h2>
+	<div id="qunit-testrunner-toolbar"></div>
+	<h2 id="qunit-userAgent"></h2>
+	<ol id="qunit-tests"></ol>
+	<div id="qunit-fixture">test markup</div>
+</body>
+</html>
@@ -0,0 +1,153 @@
+// TODO disable reordering for this suite!
+
+
+var begin = 0,
+	moduleStart = 0,
+	moduleDone = 0,
+	testStart = 0,
+	testDone = 0,
+	log = 0,
+	moduleContext,
+	moduleDoneContext,
+	testContext,
+	testDoneContext,
+	logContext;
+
+QUnit.begin(function() {
+	begin++;
+});
+QUnit.done(function() {
+});
+QUnit.moduleStart(function(context) {
+	moduleStart++;
+	moduleContext = context;
+});
+QUnit.moduleDone(function(context) {
+	moduleDone++;
+	moduleDoneContext = context;
+});
+QUnit.testStart(function(context) {
+	testStart++;
+	testContext = context;
+});
+QUnit.testDone(function(context) {
+	testDone++;
+	testDoneContext = context;
+});
+QUnit.log(function(context) {
+	log++;
+	logContext = context;
+});
+
+var logs = ["begin", "testStart", "testDone", "log", "moduleStart", "moduleDone", "done"];
+for (var i = 0; i < logs.length; i++) {
+	(function() {
+		var log = logs[i];
+		QUnit[log](function() {
+			console.log(log, arguments);
+		});
+	})();
+}
+
+module("logs1");
+
+test("test1", 13, function() {
+	equal(begin, 1);
+	equal(moduleStart, 1);
+	equal(testStart, 1);
+	equal(testDone, 0);
+	equal(moduleDone, 0);
+
+	deepEqual(logContext, {
+		result: true,
+		message: undefined,
+		actual: 0,
+		expected: 0
+	});
+	equal("foo", "foo", "msg");
+	deepEqual(logContext, {
+		result: true,
+		message: "msg",
+		actual: "foo",
+		expected: "foo"
+	});
+	strictEqual(testDoneContext, undefined);
+	deepEqual(testContext, {
+		module: "logs1",
+		name: "test1"
+	});
+	strictEqual(moduleDoneContext, undefined);
+	deepEqual(moduleContext, {
+		name: "logs1"
+	});
+
+	equal(log, 12);
+});
+test("test2", 10, function() {
+	equal(begin, 1);
+	equal(moduleStart, 1);
+	equal(testStart, 2);
+	equal(testDone, 1);
+	equal(moduleDone, 0);
+
+	deepEqual(testDoneContext, {
+		module: "logs1",
+		name: "test1",
+		failed: 0,
+		passed: 13,
+		total: 13
+	});
+	deepEqual(testContext, {
+		module: "logs1",
+		name: "test2"
+	});
+	strictEqual(moduleDoneContext, undefined);
+	deepEqual(moduleContext, {
+		name: "logs1"
+	});
+
+	equal(log, 22);
+});
+
+module("logs2");
+
+test("test1", 9, function() {
+	equal(begin, 1);
+	equal(moduleStart, 2);
+	equal(testStart, 3);
+	equal(testDone, 2);
+	equal(moduleDone, 1);
+
+	deepEqual(testContext, {
+		module: "logs2",
+		name: "test1"
+	});
+	deepEqual(moduleDoneContext, {
+		name: "logs1",
+		failed: 0,
+		passed: 23,
+		total: 23
+	});
+	deepEqual(moduleContext, {
+		name: "logs2"
+	});
+
+	equal(log, 31);
+});
+test("test2", 8, function() {
+	equal(begin, 1);
+	equal(moduleStart, 2);
+	equal(testStart, 4);
+	equal(testDone, 3);
+	equal(moduleDone, 1);
+
+	deepEqual(testContext, {
+		module: "logs2",
+		name: "test2"
+	});
+	deepEqual(moduleContext, {
+		name: "logs2"
+	});
+
+	equal(log, 39);
+});
@@ -0,0 +1,471 @@
+test("module without setup/teardown (default)", function() {
+	expect(1);
+	ok(true);
+});
+
+test("expect in test", 3, function() {
+	ok(true);
+	ok(true);
+	ok(true);
+});
+
+test("expect in test", 1, function() {
+	ok(true);
+});
+
+module("setup test", {
+	setup: function() {
+		ok(true);
+	}
+});
+
+test("module with setup", function() {
+	expect(2);
+	ok(true);
+});
+
+test("module with setup, expect in test call", 2, function() {
+	ok(true);
+});
+
+var state;
+
+module("setup/teardown test", {
+	setup: function() {
+		state = true;
+		ok(true);
+	},
+	teardown: function() {
+		ok(true);
+	}
+});
+
+test("module with setup/teardown", function() {
+	expect(3);
+	ok(true);
+});
+
+module("setup/teardown test 2");
+
+test("module without setup/teardown", function() {
+	expect(1);
+	ok(true);
+});
+
+if (typeof setTimeout !== 'undefined') {
+state = 'fail';
+
+module("teardown and stop", {
+	teardown: function() {
+		equal(state, "done", "Test teardown.");
+	}
+});
+
+test("teardown must be called after test ended", function() {
+	expect(1);
+	stop();
+	setTimeout(function() {
+		state = "done";
+		start();
+	}, 13);
+});
+
+test("parameter passed to stop increments semaphore n times", function() {
+	expect(1);
+	stop(3);
+	setTimeout(function() {
+		state = "not enough starts";
+		start(), start();
+	}, 13);
+	setTimeout(function() {
+		state = "done";
+		start();
+	}, 15);
+});
+
+test("parameter passed to start decrements semaphore n times", function() {
+	expect(1);
+	stop(), stop(), stop();
+	setTimeout(function() {
+		state = "done";
+		start(3);
+	}, 18);
+});
+
+module("async setup test", {
+	setup: function() {
+		stop();
+		setTimeout(function(){
+			ok(true);
+			start();
+		}, 500);
+	}
+});
+
+asyncTest("module with async setup", function() {
+	expect(2);
+	ok(true);
+	start();
+});
+
+module("async teardown test", {
+	teardown: function() {
+		stop();
+		setTimeout(function(){
+			ok(true);
+			start();
+		}, 500);
+	}
+});
+
+asyncTest("module with async teardown", function() {
+	expect(2);
+	ok(true);
+	start();
+});
+
+module("asyncTest");
+
+asyncTest("asyncTest", function() {
+	expect(2);
+	ok(true);
+	setTimeout(function() {
+		state = "done";
+		ok(true);
+		start();
+	}, 13);
+});
+
+asyncTest("asyncTest", 2, function() {
+	ok(true);
+	setTimeout(function() {
+		state = "done";
+		ok(true);
+		start();
+	}, 13);
+});
+
+test("sync", 2, function() {
+	stop();
+	setTimeout(function() {
+		ok(true);
+		start();
+	}, 13);
+	stop();
+	setTimeout(function() {
+		ok(true);
+		start();
+	}, 125);
+});
+
+test("test synchronous calls to stop", 2, function() {
+    stop();
+    setTimeout(function(){
+        ok(true, 'first');
+        start();
+        stop();
+        setTimeout(function(){
+            ok(true, 'second');
+            start();
+        }, 150);
+    }, 150);
+});
+}
+
+module("save scope", {
+	setup: function() {
+		this.foo = "bar";
+	},
+	teardown: function() {
+		deepEqual(this.foo, "bar");
+	}
+});
+test("scope check", function() {
+	expect(2);
+	deepEqual(this.foo, "bar");
+});
+
+module("simple testEnvironment setup", {
+	foo: "bar",
+	bugid: "#5311" // example of meta-data
+});
+test("scope check", function() {
+	deepEqual(this.foo, "bar");
+});
+test("modify testEnvironment",function() {
+	this.foo="hamster";
+});
+test("testEnvironment reset for next test",function() {
+	deepEqual(this.foo, "bar");
+});
+
+module("testEnvironment with object", {
+	options:{
+		recipe:"soup",
+		ingredients:["hamster","onions"]
+	}
+});
+test("scope check", function() {
+	deepEqual(this.options, {recipe:"soup",ingredients:["hamster","onions"]}) ;
+});
+test("modify testEnvironment",function() {
+	// since we do a shallow copy, the testEnvironment can be modified
+	this.options.ingredients.push("carrots");
+});
+test("testEnvironment reset for next test",function() {
+	deepEqual(this.options, {recipe:"soup",ingredients:["hamster","onions","carrots"]}, "Is this a bug or a feature? Could do a deep copy") ;
+});
+
+
+module("testEnvironment tests");
+
+function makeurl() {
+	var testEnv = QUnit.current_testEnvironment;
+	var url = testEnv.url || 'http://example.com/search';
+	var q   = testEnv.q   || 'a search test';
+	return url + '?q='+encodeURIComponent(q);
+}
+
+test("makeurl working",function() {
+	equal( QUnit.current_testEnvironment, this, 'The current testEnvironment is global');
+	equal( makeurl(), 'http://example.com/search?q=a%20search%20test', 'makeurl returns a default url if nothing specified in the testEnvironment');
+});
+
+module("testEnvironment with makeurl settings", {
+	url: 'http://google.com/',
+	q: 'another_search_test'
+});
+test("makeurl working with settings from testEnvironment", function() {
+	equal( makeurl(), 'http://google.com/?q=another_search_test', 'rather than passing arguments, we use test metadata to form the url');
+});
+test("each test can extend the module testEnvironment", {
+	q:'hamstersoup'
+}, function() {
+	equal( makeurl(), 'http://google.com/?q=hamstersoup', 'url from module, q from test');
+});
+
+module("jsDump");
+test("jsDump output", function() {
+	equals( QUnit.jsDump.parse([1, 2]), "[\n  1,\n  2\n]" );
+	equals( QUnit.jsDump.parse({top: 5, left: 0}), "{\n  \"top\": 5,\n  \"left\": 0\n}" );
+	if (typeof document !== 'undefined' && document.getElementById("qunit-header")) {
+		equals( QUnit.jsDump.parse(document.getElementById("qunit-header")), "<h1 id=\"qunit-header\"></h1>" );
+		equals( QUnit.jsDump.parse(document.getElementsByTagName("h1")), "[\n  <h1 id=\"qunit-header\"></h1>\n]" );
+	}
+});
+
+module("assertions");
+test("raises",function() {
+	function CustomError( message ) {
+		this.message = message;
+	}
+
+	CustomError.prototype.toString = function() {
+		return this.message;
+	};
+
+	raises(
+		function() {
+			throw "error"
+		}
+	);
+
+	raises(
+		function() {
+			throw "error"
+		},
+		'raises with just a message, no expected'
+	);
+
+	raises(
+		function() {
+			throw new CustomError();
+		},
+		CustomError,
+		'raised error is an instance of CustomError'
+	);
+
+	raises(
+		function() {
+			throw new CustomError("some error description");
+		},
+		/description/,
+		"raised error message contains 'description'"
+	);
+
+	raises(
+		function() {
+			throw new CustomError("some error description");
+		},
+		function( err ) {
+			if ( (err instanceof CustomError) && /description/.test(err) ) {
+				return true;
+			}
+		},
+		"custom validation function"
+	);
+
+});
+
+if (typeof document !== "undefined") {
+
+module("fixture");
+test("setup", function() {
+	document.getElementById("qunit-fixture").innerHTML = "foobar";
+});
+test("basics", function() {
+	equal( document.getElementById("qunit-fixture").innerHTML, "test markup", "automatically reset" );
+});
+
+}
+
+module("custom assertions");
+(function() {
+	function mod2(value, expected, message) {
+		var actual = value % 2;
+		QUnit.push(actual == expected, actual, expected, message);
+	}
+	test("mod2", function() {
+		mod2(2, 0, "2 % 2 == 0");
+		mod2(3, 1, "3 % 2 == 1");
+	})
+})();
+
+
+module("recursions");
+
+function Wrap(x) {
+    this.wrap = x;
+    if (x == undefined)  this.first = true;
+}
+
+function chainwrap(depth, first, prev) {
+    depth = depth || 0;
+    var last = prev || new Wrap();
+    first = first || last;
+    
+    if (depth == 1) {
+        first.wrap = last;
+    } 
+    if (depth > 1) {
+        last = chainwrap(depth-1, first, new Wrap(last));
+    }
+    
+    return last;
+}
+
+test("check jsDump recursion", function() {
+    expect(4);
+
+    var noref = chainwrap(0);
+    var nodump = QUnit.jsDump.parse(noref);
+    equal(nodump, '{\n  "wrap": undefined,\n  "first": true\n}');
+
+    var selfref = chainwrap(1);
+    var selfdump = QUnit.jsDump.parse(selfref);
+    equal(selfdump, '{\n  "wrap": recursion(-1),\n  "first": true\n}');
+
+    var parentref = chainwrap(2);
+    var parentdump = QUnit.jsDump.parse(parentref);
+    equal(parentdump, '{\n  "wrap": {\n    "wrap": recursion(-2),\n    "first": true\n  }\n}');
+    
+    var circref = chainwrap(10);
+    var circdump = QUnit.jsDump.parse(circref);
+    ok(new RegExp("recursion\\(-10\\)").test(circdump), "(" +circdump + ") should show -10 recursion level");
+});
+
+test("check (deep-)equal recursion", function() {
+    var noRecursion = chainwrap(0);
+    equal(noRecursion, noRecursion, "I should be equal to me.");
+    deepEqual(noRecursion, noRecursion, "... and so in depth.");
+
+    var selfref = chainwrap(1);
+    equal(selfref, selfref, "Even so if I nest myself.");
+    deepEqual(selfref, selfref, "... into the depth.");
+
+    var circref = chainwrap(10);
+    equal(circref, circref, "Or hide that through some levels of indirection.");
+    deepEqual(circref, circref, "... and checked on all levels!");
+});
+
+
+test('Circular reference with arrays', function() {
+
+    // pure array self-ref
+    var arr = [];
+    arr.push(arr);
+    
+    var arrdump = QUnit.jsDump.parse(arr);
+
+    equal(arrdump, '[\n  recursion(-1)\n]');
+    equal(arr, arr[0], 'no endless stack when trying to dump arrays with circular ref');
+
+
+    // mix obj-arr circular ref
+    var obj = {};
+    var childarr = [obj];
+    obj.childarr = childarr;
+    
+    var objdump = QUnit.jsDump.parse(obj);
+    var childarrdump = QUnit.jsDump.parse(childarr);
+    
+    equal(objdump, '{\n  "childarr": [\n    recursion(-2)\n  ]\n}');
+    equal(childarrdump, '[\n  {\n    "childarr": recursion(-2)\n  }\n]');
+    
+    equal(obj.childarr, childarr, 'no endless stack when trying to dump array/object mix with circular ref');
+    equal(childarr[0], obj, 'no endless stack when trying to dump array/object mix with circular ref');
+    
+});
+
+
+test('Circular reference - test reported by soniciq in #105', function() {
+    var MyObject = function() {};
+    MyObject.prototype.parent = function(obj) {
+        if (obj === undefined) { return this._parent; }
+        this._parent = obj;
+    };
+    MyObject.prototype.children = function(obj) {
+        if (obj === undefined) { return this._children; }
+        this._children = obj;
+    };
+
+    var a = new MyObject(),
+        b = new MyObject();
+
+    var barr = [b];
+    a.children(barr);
+    b.parent(a);
+
+    equal(a.children(), barr);
+    deepEqual(a.children(), [b]);
+});
+
+
+
+
+(function() {
+	var reset = QUnit.reset;
+	function afterTest() {
+		ok( false, "reset should not modify test status" );
+	}
+	module("reset");
+	test("reset runs assertions", function() {
+		QUnit.reset = function() {
+			afterTest();
+			reset.apply( this, arguments );
+		};
+	});
+	test("reset runs assertions2", function() {
+		QUnit.reset = reset;
+	});
+})();
+
+module("noglobals", {
+	teardown: function() {
+		delete window.badGlobalVariableIntroducedInTest;
+	}
+});
+test("let teardown clean up globals", function() {
+	// this test will always pass if run without ?noglobals=true
+	window.badGlobalVariableIntroducedInTest = true;
+});
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8" />
+  <title>QUnit Test Suite</title>
+
+  <link rel="stylesheet" href="../design/video-js.css" type="text/css">
+  <!--[if lt IE 9]>
+    <script>
+      document.createElement("video"); // HTML5 Shiv. Must be in <head>.
+    </script>
+  <![endif]-->
+
+  <!--[if IE]>
+    <script src="https://getfirebug.com/firebug-lite.js" type="text/javascript" charset="utf-8"></script>
+  <![endif]-->
+
+  <script src="../src/core.js" type="text/javascript" charset="utf-8"></script>
+  <script src="../src/lib.js" type="text/javascript" charset="utf-8"></script>
+  <script src="../src/ecma.js" type="text/javascript" charset="utf-8"></script>
+  <script src="../src/json.js" type="text/javascript" charset="utf-8"></script>
+
+  <script src="../src/api.js" type="text/javascript" charset="utf-8"></script>
+  <script src="../src/events.js" type="text/javascript" charset="utf-8"></script>
+
+  <script src="../src/tracks.js" type="text/javascript" charset="utf-8"></script>
+
+  <script src="../src/behaviors/behaviors.js" type="text/javascript" charset="utf-8"></script>
+  <script src="../src/behaviors/seekBar.js" type="text/javascript" charset="utf-8"></script>
+  <script src="../src/behaviors/volume.js" type="text/javascript" charset="utf-8"></script>
+  <script src="../src/behaviors/texttrackdisplays.js" type="text/javascript" charset="utf-8"></script>
+
+  <script src="../src/controls/bigPlay.js" type="text/javascript" charset="utf-8"></script>
+  <script src="../src/controls/bar.js" type="text/javascript" charset="utf-8"></script>
+  <script src="../src/controls/subtitlesBox.js" type="text/javascript" charset="utf-8"></script>
+
+  <script src="../src/tech/html5.js" type="text/javascript" charset="utf-8"></script>
+  <script src="../src/tech/flowplayer.js" type="text/javascript" charset="utf-8"></script>
+
+  <script src="../src/autoload.js" type="text/javascript" charset="utf-8"></script>
+  
+  <script src="../src/log.js" type="text/javascript" charset="utf-8"></script>
+
+  <link rel="stylesheet" href="qunit/qunit/qunit.css" type="text/css" media="screen">
+  <script type="text/javascript" src="qunit/qunit/qunit.js"></script>
+  <script type="text/javascript" src="test.js"></script>
+</head>
+<body>
+  <h1 id="qunit-header">QUnit Test Suite</h1>
+  <h2 id="qunit-banner"></h2>
+  <div id="qunit-testrunner-toolbar"></div>
+  <h2 id="qunit-userAgent"></h2>
+  <ol id="qunit-tests"></ol>
+  <div id="qunit-fixture">test markup</div>
+</body>
+</html>
@@ -0,0 +1,154 @@
+var tagCode = '<video id="vid1" class="video-js vjs-default-skin" preload="none" width="640" height="264" data-setup=\'{}\' poster="http://video-js.zencoder.com/oceans-clip.png">';
+    tagCode+= '<source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4">';
+    tagCode+= '<source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm">';
+    tagCode+= '<source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg; codecs=\'theora, vorbis\'">';
+    tagCode+= '<track kind="subtitles" src="http://videojs.com/subtitles/demo-subtitles.srt" srclang="en-US" label="English"></track>';
+    tagCode+= '</video>';
+
+function playerSetup(){
+  document.body.innerHTML += tagCode;
+  var vid = document.getElementById("vid1");
+  this.player = _V_(vid);
+
+  stop();
+  this.player.ready(_V_.proxy(this, function(){
+    start();
+  }));
+}
+
+function playerTeardown(){
+  document.body.removeChild(document.getElementById("vid1"));
+  ok(!document.getElementById("vid1"), "torndown");
+}
+
+module("video.js setup", {
+  setup: playerSetup,
+  teardown: playerTeardown
+});
+
+test("Player Set Up", function() {
+  ok(this.player);
+});
+
+/* Events
+================================================================================ */
+module("API Events", {
+  setup: playerSetup,
+  teardown: playerTeardown
+});
+
+// Play Event
+test("play", function() {
+  this.player.addEvent("play", _V_.proxy(this, function(){
+    start();
+    ok(true);
+  }));
+  this.player.play();
+});
+
+// Playing Event
+test("playing", function() {
+  this.player.addEvent("playing", _V_.proxy(this, function(){
+    start();
+    ok(true, "playing");
+  }));
+  this.player.play();
+});
+
+// Pause Event
+test("pause", function() {
+  this.player.addEvent("pause", _V_.proxy(this, function(){
+    start();
+    ok(true);
+  }));
+  this.player.addEvent("playing", _V_.proxy(this, function(){
+    this.player.pause();
+  }));
+  this.player.play();
+});
+
+// Pause Event
+test("timeupdate", function() {
+  this.player.addEvent("timeupdate", _V_.proxy(this, function(){
+    start();
+    ok(true);
+  }));
+  this.player.addEvent("playing", _V_.proxy(this, function(){
+    this.player.pause();
+  }));
+  this.player.play();
+});
+
+/* Methods
+================================================================================ */
+module("API Methods", {
+  setup: playerSetup,
+  teardown: playerTeardown
+});
+
+// Play Method
+test("play()", function() {
+  this.player.addEvent("playing", _V_.proxy(this, function(){
+    start();
+    ok(true);
+  }));
+  this.player.play();
+});
+
+// Pause Method
+test("pause()", function() {
+  this.player.addEvent("pause", _V_.proxy(this, function(){
+    start();
+    ok(true);
+  }));
+  this.player.addEvent("playing", _V_.proxy(this, function(){
+    this.player.pause();
+  }));
+  this.player.play();
+});
+
+test("currentTime()", function() {
+
+  // Need video loaded before we can call current time
+  this.player.addEvent("loadstart", _V_.proxy(this, function(){
+    start();
+    ok(true, "vid loading");
+
+    // Watch for timeudpate
+    this.player.addEvent("timeupdate", _V_.proxy(this, function(){
+      start();
+      equal(this.player.currentTime(), 0, "time is 0");
+      this.player.removeEvent("timeupdate", arguments.callee);
+
+      // Test again for later time
+      this.player.addEvent("timeupdate", _V_.proxy(this, function(){
+        start();
+        notEqual(this.player.currentTime(), 0, "time is not 0");
+        this.player.removeEvent("timeupdate", arguments.callee);
+      }));
+      // Stop and trigger time
+      stop();
+      this.player.currentTime(10);
+
+    }));
+    // Stop and trigger time
+    stop();
+    this.player.currentTime(0);
+
+  }));
+
+  stop();
+  this.player.load();
+
+
+
+  // Watch for timeudpate
+  this.player.addEvent("timeupdate", _V_.proxy(this, function(){
+    start();
+    notEqual(this.player.currentTime(), 0, "time is not 0");
+    this.player.removeEvent("timeupdate", arguments.callee);
+  }));
+  // Stop and trigger time
+  stop();
+  this.player.load();
+});
@@ -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);
-    });
@@ -0,0 +1,156 @@
+API
+===
+The VideoJS API allows you to interact with the video through Javascript, whether the browser is playing the video through HTML5 video or any number of media playback technologies that have an API wrapper (e.g. video-js.flowplayer.js).
+
+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 (example_video_2, example_video_3, etc.).
+
+    _V_("example_video_1")
+
+
+Wait until Ready
+----------------
+The time it takes VideoJS 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.
+
+    _V_("example_video_1").ready(function(){
+
+      var myPlayer = this;
+
+    });
+
+
+API Methods
+-----------
+Now that you have access to a ready player, you can control the video or react to video events using the following functions. The VideoJS API function names follow the HTML5 media API. The main difference is that attributes which you would get or set on a video element directly ( videoElement.currentTime = "120"; ), you would use a function syntax for VideoJS ( myPlayer.currentTime(120); )
+
+### play()
+  Start video playback.
+  Returns the player object.
+  Example:
+
+    myPlayer.play();
+
+### pause()
+  Pause the video playback.
+  Returns: the player object
+  Example:
+
+    myPlayer.pause();
+
+### 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
+
+
+### 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();
+
+### buffered()
+  Returns a [TimeRange](http://videojs.com/docs/timerange.html) with sections of the video that have been downloaded. If you just want the percent of the video that's been downloaded, use bufferedPercent.
+  Example:
+
+    var whatHasBeenBuffered = myPlayer.buffered();
+
+### bufferedPercent()
+  Returns the percent (as a decimal) of the video that's been downloaded.
+  Example:
+
+    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.
+  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
+
+### 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);
+
+### 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();
+
+
+Events
+------
+You can attach event listeners to the player similarly to how you would for a video element.
+
+    var myFunc = function(){
+      // Do something when the event is fired
+    };
+    myPlayer.addEvent("eventName", myFunc);
+
+You can also remove the listeners later.
+
+    myPlayer.removeEvent("eventName", myFunc);
+
+### Event Types
+
+<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>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>
+</table>
@@ -4,9 +4,6 @@ Behaviors allow you to make an element on your page act as a video control or a

    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.

@@ -0,0 +1,2 @@
+Options
+=======
@@ -0,0 +1,29 @@
+Setup
+=====
+
+Step 1: Include the VideoJS Javascript and CSS files in the head of your page.
+------------------------------------------------------------------------------
+You can download the VideoJS source and host it on your own servers, or use the free CDN hosted version (thanks to Zencoder).
+
+    <script src="http://video-js.zencoder.com/3.0/video.min.js"></script>
+    <link href="http://video-js.zencoder.com/3.0/video-js.css" rel="stylesheet">
+
+
+Step 2: Add an HTML5 video tag to your page.
+--------------------------------------------
+Use the video tag as normal, with a few extra pieces for VideoJS:
+
+  1. The 'data-setup' Atrribute tells VideoJS to automatically set up the video when the page is ready, and read any options (in JSON format) from the attribute (see ['options'](http://videojs.com/docs/options.html)).
+  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 VideoJS 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 (see ['video-tag'](http://videojs.com/docs/video-tag.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>
@@ -0,0 +1,44 @@
+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, VideoJS.swf, etc. (not just "Flash").
+
+With the VideoJS API you can control any type of browser-based video, as long as the playback technology in use has an API and a VideoJS API wrapper for it.
+
+
+Including an API Wrapper
+------------------------
+
+
+Building an API Wrapper
+-----------------------
+
+
+
+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
@@ -0,0 +1,2 @@
+TimeRange
+=========
@@ -0,0 +1,8 @@
+HTML5 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)
@@ -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);
-}
@@ -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);
-}
@@ -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);
-}
@@ -1,259 +1,307 @@
 /* 
 VideoJS Default Styles (http://videojs.com)
-Version 2.0.2
+Version 3.0

 REQUIRED STYLES (be careful overriding)
 ================================================================================ */
-/* Box containing video, controls, and download links.
-   Will be set to the width of the video element through JS
-   If you want to add some kind of frame or special positioning, use another containing element, not video-js-box. */
-.video-js-box { text-align: left; position: relative; line-height: 0 !important; margin: 0; padding: 0 !important; border: none !important;  }
+/* 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.

-/* Video Element */
-video.video-js { background-color: #000; position: relative; padding: 0; }
+   ** 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: 10px;
+}

-.vjs-flash-fallback { display: block; }
+/* 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%; }
+
+/* Fullscreen Styles */
+body.vjs-full-window { 
+  padding: 0; margin: 0;
+  height: 100%; overflow-y: auto; /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
+}
+.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;
+  _position: absolute; /* IE6 Full-window (underscore hack) */
+}

-/* Poster Overlay Style */
-.video-js-box img.vjs-poster { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; cursor: pointer; }
 /* Subtiles Style */
-.video-js-box .vjs-subtitles { color: #fff; font-size: 20px; text-align: center; position: absolute; bottom: 40px; left: 0; right: 0; }
-
-/* Fullscreen styles for main elements */
-.video-js-box.vjs-fullscreen { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: 1000; }
-.video-js-box.vjs-fullscreen video.video-js,
-.video-js-box.vjs-fullscreen .vjs-flash-fallback { position: relative; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; }
-.video-js-box.vjs-fullscreen img.vjs-poster { z-index: 1001; }
-.video-js-box.vjs-fullscreen .vjs-spinner { z-index: 1001; }
-.video-js-box.vjs-fullscreen .vjs-controls { z-index: 1003; }
-.video-js-box.vjs-fullscreen .vjs-big-play-button { z-index: 1004; }
-.video-js-box.vjs-fullscreen .vjs-subtitles { z-index: 1004; }
-
-/* Styles Loaded Check */
-.vjs-styles-check { height: 5px; position: absolute; }
-/* Controls Below Video */
-.video-js-box.vjs-controls-below .vjs-controls { position: relative; opacity: 1; background-color: #000; }
-.video-js-box.vjs-controls-below .vjs-subtitles { bottom: 75px; } /* Account for height of controls below video */
+.video-js .vjs-subtitles { color: #fff; font-size: 20px; text-align: center; position: absolute; bottom: 40px; left: 0; right: 0; }

 /* DEFAULT SKIN (override in another file)
 ================================================================================
-Using all CSS to draw the controls. Images could be used if desired.
 Instead of editing this file, I recommend creating your own skin CSS file to be included after this file,
-so you can upgrade to newer versions easier. */
+so you can upgrade to newer versions easier. You can remove all these styles by removing the 'vjs-default-skin' class from the tag. */

-/* Controls Layout 
-  Using absolute positioning to position controls */
-.video-js-box .vjs-controls {
-  position: absolute; margin: 0; opacity: 0.85; color: #fff;
-  display: none; /* Start hidden */
-  left: 0; right: 0; /* 100% width of video-js-box */ 
-  width: 100%;
-  bottom: 0px; /* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */
-  height: 35px; /* Including any margin you want above or below control items */
-  padding: 0; /* Controls are absolutely position, so no padding necessary */
-  -webkit-transition: opacity 0.5s linear;
-  -moz-transition: opacity 0.5s linear;
-  -o-transition: opacity 0.5s linear;
-  -ms-transition: opacity 0.5s linear;
-  transition: opacity 0.5s linear;
+/* The default control bar. Created by bar.js */
+.vjs-default-skin .vjs-controls {
+  position: absolute;
+  bottom: 0; /* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */
+  left: 0; right: 0; /* 100% width of div */
+  opacity: 0.85; display: block; /* Start hidden */
+  margin: 0; padding: 0; /* Controls are absolutely position, so no padding necessary */
+  height: 2.6em; /* Including any margin you want above or below control items */
+  color: #fff; border-top: 1px solid #404040;
+
+  /* CSS Gradient */
+  /* Can use the Ultimate CSS Gradient Generator: http://www.colorzilla.com/gradient-editor/ */
+  background: #242424; /* Old browsers */
+  background: -moz-linear-gradient(top, #242424 50%, #1f1f1f 50%, #171717 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#242424), color-stop(50%,#1f1f1f), color-stop(100%,#171717)); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* Opera11.10+ */
+  background: -ms-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* IE10+ */
+  /* Filter was causing a lot of weird issues in IE. Elements would stop showing up, or other styles would break. */
+  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#242424', endColorstr='#171717',GradientType=0 );*/ /* IE6-9 */
+  background: linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* W3C */
+
+  /* Fade-in using CSS Transitions */
+  -webkit-transition: opacity 0.3s linear;
+  -moz-transition: opacity 0.3s linear;
+  -o-transition: opacity 0.3s linear;
+  -ms-transition: opacity 0.3s linear;
+  transition: opacity 0.3s linear;
 }

-.vjs-hide {
-  opacity: 0 !important;
-  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */
-  filter: alpha(opacity=0); /* IE5-7 */
-}
-
-.vjs-show {
-  opacity: 1 !important;
-  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE8 */
-  filter: alpha(opacity=100); /* IE5-7 */
-}
-
-.video-js-box .vjs-controls > div { /* Direct div children of control bar */
-  position: absolute; /* Use top, bottom, left, and right to specifically position the control. */
+/* General styles for individual controls. */
+.vjs-default-skin .vjs-control {
+  position: relative; float: left;
  text-align: center; margin: 0; padding: 0;
-  height: 25px; /* Default height of individual controls */
-  top: 5px; /* Top margin to put space between video and controls when controls are below */
-
-  /* CSS Background Gradients 
-     Using to give the aqua-ish look. */
-  /* Default */ background-color: #0B151A;
-  /* Webkit  */ background: #1F3744 -webkit-gradient(linear, left top, left bottom, from(#0B151A), to(#1F3744)) left 12px;
-  /* Firefox */ background: #1F3744 -moz-linear-gradient(top,  #0B151A,  #1F3744) left 12px;
-
-  /* CSS Curved Corners */
-  -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
-
-  /* CSS Shadows */
-  -webkit-box-shadow: 1px 1px 2px #000; -moz-box-shadow: 1px 1px 2px #000; box-shadow: 1px 1px 2px #000;
+  height: 2.6em; width: 2.6em;
 }

-/* Placement of Control Items 
-   - Left side of pogress bar, use left & width
-   - Rigth side of progress bar, use right & width
-   - Expand with the video (like progress bar) use left & right */
-.vjs-controls > div.vjs-play-control       { left: 5px;   width: 25px;  }
-.vjs-controls > div.vjs-progress-control   { left: 35px;  right: 165px; } /* Using left & right so it expands with the width of the video */
-.vjs-controls > div.vjs-time-control       { width: 75px; right: 90px;  } /* Time control and progress bar are combined to look like one */
-.vjs-controls > div.vjs-volume-control     { width: 50px; right: 35px;  }
-.vjs-controls > div.vjs-fullscreen-control { width: 25px; right: 5px;   }
+.vjs-default-skin .vjs-control:focus {
+  outline: 0;
+}
+
+/* Hide control text visually, but have it available for screenreaders: h5bp.com/v */
+.vjs-default-skin .vjs-control-text { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

-/* Removing curved corners on progress control and time control to join them. */
-.vjs-controls > div.vjs-progress-control {
-  -webkit-border-top-right-radius: 0; -moz-border-radius-topright: 0; border-top-right-radius: 0;
-  -webkit-border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0; border-bottom-right-radius: 0;
-}
-.vjs-controls > div.vjs-time-control { 
-  -webkit-border-top-left-radius: 0; -moz-border-radius-topleft: 0; border-top-left-radius: 0;
-  -webkit-border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0; border-bottom-left-radius: 0;
-}

 /* Play/Pause
 -------------------------------------------------------------------------------- */
-.vjs-play-control { cursor: pointer !important; }
+.vjs-default-skin .vjs-play-control { width: 5em; cursor: pointer !important; }
 /* Play Icon */
-.vjs-play-control span { display: block; font-size: 0; line-height: 0; }
-.vjs-paused .vjs-play-control span {
-  width: 0; height: 0; margin: 8px 0 0 8px;
-  /* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */
-  border-left: 10px solid #fff; /* Width & Color of play icon */
-  /* Height of play icon is total top & bottom border widths. Color is transparent. */
-  border-top: 5px solid rgba(0,0,0,0); border-bottom: 5px solid rgba(0,0,0,0);
+.vjs-default-skin.vjs-paused .vjs-play-control div { width: 15px; height: 17px; background: url('video-js.png'); margin: 0.5em auto 0; }
+.vjs-default-skin.vjs-playing .vjs-play-control div { width: 15px; height: 17px; background: url('video-js.png') -25px 0; margin: 0.5em auto 0; }
+
+/* Rewind
+-------------------------------------------------------------------------------- */
+.vjs-default-skin .vjs-rewind-control { width: 5em; cursor: pointer !important; }
+.vjs-default-skin .vjs-rewind-control div { width: 19px; height: 16px; background: url('video-js.png'); margin: 0.5em auto 0; }
+
+/* Volume/Mute
+-------------------------------------------------------------------------------- */
+.vjs-default-skin .vjs-mute-control { width: 3.8em; cursor: pointer !important; float: right; }
+.vjs-default-skin .vjs-mute-control div { width: 22px; height: 16px; background: url('video-js.png') -75px -25px; margin: 0.5em auto 0; }
+.vjs-default-skin .vjs-mute-control.vjs-vol-0 div { background: url('video-js.png') 0 -25px; }
+.vjs-default-skin .vjs-mute-control.vjs-vol-1 div { background: url('video-js.png') -25px -25px; }
+.vjs-default-skin .vjs-mute-control.vjs-vol-2 div { background: url('video-js.png') -50px -25px; }
+
+
+.vjs-default-skin .vjs-volume-control { width: 5em; float: right; }
+.vjs-default-skin .vjs-volume-bar { 
+  position: relative; width: 5em; height: 0.6em; margin: 1em auto 0; background: #666; cursor: pointer !important; 
+
+  -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;
+
+  background: #333;
+  background: -moz-linear-gradient(top, #333 0%, #666 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#666));
+  background: -webkit-linear-gradient(top, #333 0%,#666 100%);
+  background: -o-linear-gradient(top, #333 0%,#666 100%);
+  background: -ms-linear-gradient(top, #333 0%,#666 100%);
+  background: linear-gradient(top, #333 0%,#666 100%);
 }
-.vjs-playing .vjs-play-control span {
-  width: 3px; height: 10px; margin: 8px auto 0;
-  /* Drawing the pause bars with borders */
-  border-top: 0px; border-left: 3px solid #fff; border-bottom: 0px; border-right: 3px solid #fff;
+.vjs-default-skin .vjs-volume-level { 
+  position: absolute; top: 0; left: 0; height: 0.6em; background: #fff; 
+
+  -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;
+
+  background: #ffffff;
+  background: -moz-linear-gradient(top, #ffffff 0%, #cccccc 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#cccccc));
+  background: -webkit-linear-gradient(top, #ffffff 0%,#cccccc 100%);
+  background: -o-linear-gradient(top, #ffffff 0%,#cccccc 100%);
+  background: -ms-linear-gradient(top, #ffffff 0%,#cccccc 100%);
+  background: linear-gradient(top, #ffffff 0%,#cccccc 100%);
+}
+.vjs-default-skin .vjs-volume-handle { 
+  position: absolute; top: -0.2em; width: 0.8em; height: 0.8em; background: #ccc; left: 0;
+  border: 1px solid #fff;
+  -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em;
 }

 /* Progress
 -------------------------------------------------------------------------------- */
-.vjs-progress-holder { /* Box containing play and load progresses */
-  position: relative; padding: 0; overflow:hidden; cursor: pointer !important;
-  height: 9px; border: 1px solid #777;
-  margin: 7px 1px 0 5px; /* Placement within the progress control item */
-  -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
-}
-.vjs-progress-holder div { /* Progress Bars */
-  position: absolute; display: block; width: 0; height: 9px; margin: 0; padding: 0;
-  -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
-}
-.vjs-play-progress {
+.vjs-default-skin div.vjs-progress-control {
+  position: absolute;
+  left: 4.8em; right: 4.8em; /* Leave room for time displays. */
+  height: 1.0em; width: auto;
+  top: -1.3em; /* Set above the rest of the controls. And leave room for 2px of borders (progress bottom and controls top). */
+  border-bottom: 1px solid #1F1F1F;
+  border-top: 1px solid #222;
+
  /* CSS Gradient */
-  /* Default */ background: #fff;
-  /* Webkit  */ background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#777));
-  /* Firefox */ background: -moz-linear-gradient(top,  #fff,  #777);
-}
-.vjs-load-progress {
-  opacity: 0.8;
-  /* CSS Gradient */
-  /* Default */ background-color: #555;
-  /* Webkit  */ background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#aaa));
-  /* Firefox */ background: -moz-linear-gradient(top,  #555,  #aaa);
+  background: #333;
+  background: -moz-linear-gradient(top, #333 0%, #222 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222), color-stop(100%,#333));
+  background: -webkit-linear-gradient(top, #222 0%,#333 100%);
+  background: -o-linear-gradient(top, #333 0%,#222 100%);
+  background: -ms-linear-gradient(top, #333 0%,#222 100%);
+  background: linear-gradient(top, #333 0%,#222 100%);
+
+  /* 1px top shadow */
+/*  -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15);*/
 }

+/* Box containing play and load progresses. Also acts as seek scrubber. */
+.vjs-default-skin .vjs-progress-holder {
+  position: relative; cursor: pointer !important; /*overflow: hidden;*/
+  padding: 0; margin: 0; /* Placement within the progress control item */
+  height: 1.0em;
+  -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em;
+
+  /* CSS Gradient */
+  background: #111;
+  background: -moz-linear-gradient(top, #111 0%, #262626 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#111), color-stop(100%,#262626));
+  background: -webkit-linear-gradient(top, #111 0%,#262626 100%);
+  background: -o-linear-gradient(top, #111 0%,#262626 100%);
+  background: -ms-linear-gradient(top, #111 0%,#262626 100%);
+  background: linear-gradient(top, #111 0%,#262626 100%);
+}
+.vjs-default-skin .vjs-progress-holder .vjs-play-progress,
+.vjs-default-skin .vjs-progress-holder .vjs-load-progress { /* Progress Bars */
+  position: absolute; display: block; height: 1.0em; margin: 0; padding: 0;
+  left: 0; top: 0; /*Needed for IE6*/
+  -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em;
+
+  /*width: 0;*/
+}
+
+.vjs-default-skin .vjs-play-progress {
+  /* CSS Gradient. */ 
+  background: #fff; /* Old browsers */
+  background: -moz-linear-gradient(top, #fff 0%, #d6d6d6 50%, #fff 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(50%,#d6d6d6), color-stop(100%,#fff));
+  background: -webkit-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
+  background: -o-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
+  background: -ms-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
+  background: linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
+  
+  background: #efefef;
+  background: -moz-linear-gradient(top, #efefef 0%, #f5f5f5 50%, #dbdbdb 50%, #f1f1f1 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(50%,#f5f5f5), color-stop(50%,#dbdbdb), color-stop(100%,#f1f1f1));
+  background: -webkit-linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
+  background: -o-linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
+  background: -ms-linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#f1f1f1',GradientType=0 );
+  background: linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
+}
+.vjs-default-skin .vjs-load-progress {
+  opacity: 0.8;
+
+  /* CSS Gradient */
+  background: #666;
+  background: -moz-linear-gradient(top, #666 0%, #333 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666), color-stop(100%,#333));
+  background: -webkit-linear-gradient(top, #666 0%,#333 100%);
+  background: -o-linear-gradient(top, #666 0%,#333 100%);
+  background: -ms-linear-gradient(top, #666 0%,#333 100%);
+  background: linear-gradient(top, #666 0%,#333 100%);
+}
+
+.vjs-default-skin div.vjs-seek-handle {
+  position: absolute; 
+  width: 16px; height: 16px; /* Match img pixles */
+  margin-top: -0.3em;
+  left: 0; top: 0; /*Needed for IE6*/
+
+  background: url('video-js.png') 0px -50px;
+  /* CSS Curved Corners. Needed to make shadows curved. */
+  -moz-border-radius: 0.8em; -webkit-border-radius: 0.8em; border-radius: 0.8em;
+  /* CSS Shadows */
+  -webkit-box-shadow: 0px 2px 4px 0px #000; -moz-box-shadow: 0px 2px 4px 0px #000; box-shadow: 0px 2px 4px 0px #000;
+}
 /* Time Display
 -------------------------------------------------------------------------------- */
-.vjs-controls .vjs-time-control { font-size: 10px; line-height: 1; font-weight: normal; font-family: Helvetica, Arial, sans-serif; }
-.vjs-controls .vjs-time-control span { line-height: 25px; /* Centering vertically */ }
+.vjs-default-skin .vjs-time-controls {
+  position: absolute;
+  right: 0;
+  height: 1.0em; width: 4.8em;
+  top: -1.3em;
+  border-bottom: 1px solid #1F1F1F;
+  border-top: 1px solid #222;
+  background-color: #333;

-/* Volume
-------------------------------------------------------------------------------- */
-.vjs-volume-control { cursor: pointer !important; }
-.vjs-volume-control div { display: block; margin: 0 5px 0 5px; padding: 4px 0 0 0; }
-/* Drawing the volume icon using 6 span elements */
-.vjs-volume-control div span { /* Individual volume bars */
-  float: left; padding: 0;
-  margin: 0 2px 0 0; /* Space between */
-  width: 5px; height: 0px; /* Total height is height + bottom border */
-  border-bottom: 18px solid #555; /* Default (off) color and height of visible portion */
+  font-size: 1em; line-height: 1.0em; font-weight: normal; font-family: Helvetica, Arial, sans-serif;
+  
+  background: #333;
+  background: -moz-linear-gradient(top, #222 0%, #333 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222), color-stop(100%,#333));
+  background: -webkit-linear-gradient(top, #222 0%,#333 100%);
+  background: -o-linear-gradient(top, #333 0%,#222 100%);
+  background: -ms-linear-gradient(top, #333 0%,#222 100%);
+  background: linear-gradient(top, #333 0%,#222 100%);
+
+  /* 1px top shadow */
+/*  -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15);*/
 }
-.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). */
-.vjs-volume-control div span:nth-child(1) { border-bottom-width: 2px; height: 16px; }
-.vjs-volume-control div span:nth-child(2) { border-bottom-width: 4px; height: 14px; }
-.vjs-volume-control div span:nth-child(3) { border-bottom-width: 7px; height: 11px; }
-.vjs-volume-control div span:nth-child(4) { border-bottom-width: 10px; height: 8px; }
-.vjs-volume-control div span:nth-child(5) { border-bottom-width: 14px; height: 4px; }
-.vjs-volume-control div span:nth-child(6) { margin-right: 0; }
+
+.vjs-default-skin .vjs-current-time { left: 0; }
+
+.vjs-default-skin .vjs-duration { right: 0; display: none; }
+.vjs-default-skin .vjs-remaining-time { right: 0; }
+
+.vjs-time-divider { display:none; }
+
+.vjs-default-skin .vjs-time-control { font-size: 1em; line-height: 1; font-weight: normal; font-family: Helvetica, Arial, sans-serif; }
+.vjs-default-skin .vjs-time-control span { line-height: 25px; /* Centering vertically */ }

 /* Fullscreen
 -------------------------------------------------------------------------------- */
-.vjs-fullscreen-control { cursor: pointer !important; }
-.vjs-fullscreen-control div {
-  padding: 0; text-align: left; vertical-align: top; cursor: pointer !important; 
-  margin: 5px 0 0 5px; /* Placement within the fullscreen control item */
-  width: 20px; height: 20px;
-}
-/* Drawing the fullscreen icon using 4 span elements */
-.vjs-fullscreen-control div span { float: left; margin: 0; padding: 0; font-size: 0; line-height: 0; width: 0; text-align: left; vertical-align: top; }
-.vjs-fullscreen-control div span:nth-child(1) { /* Top-left triangle */
-  margin-right: 3px; /* Space between top-left and top-right */
-  margin-bottom: 3px; /* Space between top-left and bottom-left */
-  border-top: 6px solid #fff; /* Height and color */
-  border-right: 6px solid rgba(0,0,0,0);  /* Width */
-}
-.vjs-fullscreen-control div span:nth-child(2) { border-top: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); }
-.vjs-fullscreen-control div span:nth-child(3) { clear: both; margin: 0 3px 0 0; border-bottom: 6px solid #fff; border-right: 6px solid rgba(0,0,0,0); }
-.vjs-fullscreen-control div span:nth-child(4) { border-bottom: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); }
-/* Icon when video is in fullscreen mode */
-.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(1) { border: none; border-bottom: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); }
-.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(2) { border: none; border-bottom: 6px solid #fff; border-right: 6px solid rgba(0,0,0,0); }
-.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(3) { border: none; border-top: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); }
-.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(4) { border: none; border-top: 6px solid #fff; border-right: 6px solid rgba(0,0,0,0); }
+.vjs-secondary-controls { float: right; }
+
+.vjs-default-skin .vjs-fullscreen-control { width: 3.8em; cursor: pointer !important; float: right; }
+.vjs-default-skin .vjs-fullscreen-control div { width: 16px; height: 16px; background: url('video-js.png') -50px 0; margin: 0.5em auto 0; }
+
+.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control div { background: url('video-js.png') -75px 0; }

-/* Download Links - Used for browsers that don't support any video.
---------------------------------------------------------*/
-.vjs-no-video { font-size: small; line-height: 1.5; }

 /* Big Play Button (at start)
 ---------------------------------------------------------*/
-div.vjs-big-play-button {
-  display: none; /* Start hidden */ z-index: 2;
-  position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; margin: -43px 0 0 -43px; text-align: center; vertical-align: center; cursor: pointer !important;
-  border: 3px solid #fff; opacity: 0.9;
-  -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;
-  
-  /* CSS Background Gradients */
-  /* Default */ background-color: #0B151A;
-  /* Webkit  */ background: #1F3744 -webkit-gradient(linear, left top, left bottom, from(#0B151A), to(#1F3744)) left 40px;
-  /* Firefox */ background: #1F3744 -moz-linear-gradient(top,  #0B151A,  #1F3744) left 40px;
+.vjs-default-skin .vjs-big-play-button {
+  display: block; /* Start hidden */ z-index: 2;
+  position: absolute; top: 50%; left: 50%; width: 8.0em; height: 8.0em; margin: -43px 0 0 -43px; text-align: center; vertical-align: center; cursor: pointer !important;
+  border: 0.3em solid #fff; opacity: 0.95;
+  -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px;
+
+  background: #454545;
+  background: -moz-linear-gradient(top, #454545 0%, #232323 50%, #161616 50%, #3f3f3f 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#454545), color-stop(50%,#232323), color-stop(50%,#161616), color-stop(100%,#3f3f3f));
+  background: -webkit-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
+  background: -o-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
+  background: -ms-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#454545', endColorstr='#3f3f3f',GradientType=0 );
+  background: linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);

  /* CSS Shadows */
  -webkit-box-shadow: 4px 4px 8px #000; -moz-box-shadow: 4px 4px 8px #000; box-shadow: 4px 4px 8px #000;
 }
-div.vjs-big-play-button:hover {
+
+.vjs-default-skin 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;
 }

-div.vjs-big-play-button span {
-  display: block; font-size: 0; line-height: 0;
-  width: 0; height: 0; margin: 20px 0 0 23px;
-  /* 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);
-}
-
-/* Spinner Styles
---------------------------------------------------------*/
-/* CSS Spinners by Kilian Valkhof - http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/ */
-.vjs-spinner { display: none; position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; z-index: 1; margin: -50px 0 0 -50px;
-  /* Scaling makes the circles look smoother. */
-  -webkit-transform:scale(0.5); -moz-transform:scale(0.5); transform: scale(0.5);
-}
-/* Spinner circles */
-.vjs-spinner div { position:absolute; left: 40px; top: 40px; width: 20px; height: 20px; background: #fff;
-  -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;
-  border: 1px solid #ccc; /* Added border so can be visible on white backgrounds */
-}
-/* Each circle */
-.vjs-spinner div:nth-child(1) { opacity: 0.12; -webkit-transform: rotate(000deg) translate(0, -40px) scale(0.1); -moz-transform: rotate(000deg) translate(0, -40px) scale(0.1); transform: rotate(000deg) translate(0, -40px) scale(0.1); }
-.vjs-spinner div:nth-child(2) { opacity: 0.25; -webkit-transform: rotate(045deg) translate(0, -40px) scale(0.2); -moz-transform: rotate(045deg) translate(0, -40px) scale(0.2); transform: rotate(045deg) translate(0, -40px) scale(0.2); }
-.vjs-spinner div:nth-child(3) { opacity: 0.37; -webkit-transform: rotate(090deg) translate(0, -40px) scale(0.4); -moz-transform: rotate(090deg) translate(0, -40px) scale(0.4); transform: rotate(090deg) translate(0, -40px) scale(0.4); }
-.vjs-spinner div:nth-child(4) { opacity: 0.50; -webkit-transform: rotate(135deg) translate(0, -40px) scale(0.6); -moz-transform: rotate(135deg) translate(0, -40px) scale(0.6); transform: rotate(135deg) translate(0, -40px) scale(0.6); }
-.vjs-spinner div:nth-child(5) { opacity: 0.62; -webkit-transform: rotate(180deg) translate(0, -40px) scale(0.8); -moz-transform: rotate(180deg) translate(0, -40px) scale(0.8); transform: rotate(180deg) translate(0, -40px) scale(0.8); }
-.vjs-spinner div:nth-child(6) { opacity: 0.75; -webkit-transform: rotate(225deg) translate(0, -40px) scale(1.0); -moz-transform: rotate(225deg) translate(0, -40px) scale(1.0); transform: rotate(225deg) translate(0, -40px) scale(1.0); }
-.vjs-spinner div:nth-child(7) { opacity: 0.87; -webkit-transform: rotate(270deg) translate(0, -40px) scale(1.1); -moz-transform: rotate(270deg) translate(0, -40px) scale(1.1); transform: rotate(270deg) translate(0, -40px) scale(1.1); }
-.vjs-spinner div:nth-child(8) { opacity: 1.00; -webkit-transform: rotate(315deg) translate(0, -40px) scale(1.3); -moz-transform: rotate(315deg) translate(0, -40px) scale(1.3); transform: rotate(315deg) translate(0, -40px) scale(1.3); }
+.vjs-default-skin div.vjs-big-play-button span {
+  position: absolute; top: 50%; left: 50%;
+  display: block; width: 35px; height: 42px;
+  margin: -20px 0 0 -15px; /* Using negative margin to center image. */
+  background: url('video-js.png') -100px 0;
+}