Merge branch 'release/leonardo' into stable

fix for firefox9 fullscreen (only if it is enabled)

.gitignore

@@ -0,0 +1,5 @@
+.DS_Store
+dist/*
+dev.html
+projects
+.zenflow-log

.zenflow

@@ -0,0 +1,10 @@
+--- 
+confirm_review: true
+backup_remote: false
+release_branch: stable
+project: videojs
+qa_branch: false
+staging_branch: false
+development_branch: master
+remote: origin
+confirm_staging: false

CHANGELOG.md

@@ -0,0 +1,38 @@
+--------------------------------------------------------------------------------
+                          ^ ADD NEW CHANGES ABOVE ^
+--------------------------------------------------------------------------------
+
+CHANGELOG
+=========
+
+---- 3.0.3 / 2012-01-12 / doc-change -------------------------------------------
+* Added line to docs to test zenflow
+
+---- 3.0.4 / 2012-01-12 / undefined-source-fix ---------------------------------
+* Fixing an undefined source when no sources exist on load
+
+---- 3.0.5 / 2012-01-12 / event-layer-x-deprecation-fix ------------------------
+* Removed deprecated event.layerX and layerY
+
+---- 3.0.6 / 2012-01-12 / docs-url-fix -----------------------------------------
+* Fixed wrong URL for CDN in docs
+
+---- 3.0.7 / 2012-01-12 / fixing-ie8-poster-bug --------------------------------
+* Fixed an ie8 breaking bug with the poster
+
+---- 3.0.8 / 2012-01-23 / fix-ie-controls-hiding -------------------------------
+* Fixed issue with controls not hiding in IE due to no opacity support
+
+---- 3.1.0 / 2012-01-30 / leonardo ---------------------------------------------
+* Added CSS fix for Firefox 9 fullscreen (in the rare case that it's enabled)
+* Replaced swfobject with custom embed to save file size.
+* Added  flash iframe-mode, an experimental method for getting around flash reloading issues.
+* Fixed issue with volume knob position. Improved controls fading.
+* Fixed ian issue with triggering fullscreen a second time.
+* Fixed issue with getting attributes in Firefox 3.0
+* Escaping special characters in source URL for Flash
+* Added a check for if Firefox is enabled which fixes a Firefox 9 issue
+* Stopped spinner from showing on 'stalled' events since browsers sometimes don't show that they've recovered.
+* Fixed CDN Version which was breaking dev.html
+* Made full-window mode more independent
+* Added rakefile for release generation

README.md

@@ -2,6 +2,21 @@ VideoJS - [HTML5 Video Player](http://videojs.com)
 ==================================================
 Version 3.0 BETA
 
+Visit the main site at [videojs.com](http://videojs.com) for download options and instructions.
+
+To build video-js from the latest version of the source, clone the source repository and run:
+sh build.sh
+in the video-js directory using the commnand-line/terminal of a unix-based system.
+
+Contributing
+------------
+If you'd like to help out on VideoJS, you are awesome. Updates should be made to the source files and then make a pull request.
+
+When working on VideoJS code, you can use dev.html as your test page. It doesn't exist in the repo and changes to it won't be tracked. To get your own copy simply clone the repo and copy dev.html.example.
+cp dev.html.example dev.html
+
+You can use dev.html to test new code. It's simple HTML doc that includes all the source files. Send a pull request for any updates.
+
 ---
 BETA NOTES  
 Version 3 is almost a complete rewrite of the previous versions of VideoJS. New features includes:
@@ -13,141 +28,3 @@ Version 3 is almost a complete rewrite of the previous versions of VideoJS. New
     - 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

Rakefile

@@ -0,0 +1,167 @@
+require 'rubygems'
+require 'yaml'
+require 'httparty'
+
+namespace :build do
+
+  desc "Build version for current '/c/' CDN copy and locked in version"
+  task :current do
+    Rake::Task["build:source"].execute
+
+    cdn_version_num = "#{version['major']}.#{version['minor']}"
+
+    ['c', cdn_version_num].each do |vsn|
+      Rake::Shell["mkdir dist/#{vsn}"]
+
+      File.open("dist/#{vsn}/video.js", "w+") do |file|
+        file.puts File.read("dist/video.min.js").sub('GENERATED_CDN_VSN', vsn)
+      end
+
+      Rake::Shell["cp dist/video-js.min.css dist/#{vsn}/video-js.css"]
+      Rake::Shell["cp dist/video-js.swf dist/#{vsn}/video-js.swf"]
+      Rake::Shell["cp dist/video-js.png dist/#{vsn}/video-js.png"]
+      Rake::Shell["cp dist/demo.html dist/#{vsn}/demo.html"]
+    end
+
+    Rake::Shell["mkdir dist/video-js"]
+
+    File.open("dist/video-js/video.min.js", "w+") do |file|
+      file.puts File.read("dist/video.min.js").sub('GENERATED_CDN_VSN', cdn_version_num)
+    end
+
+    File.open("dist/video-js/video.js", "w+") do |file|
+      file.puts File.read("dist/video.js").sub('GENERATED_CDN_VSN', cdn_version_num)
+    end
+
+    Rake::Shell["cp dist/video-js.min.css dist/video-js/video-js.min.css"]
+    Rake::Shell["cp dist/video-js.css dist/video-js/video-js.css"]
+    Rake::Shell["cp dist/video-js.swf dist/video-js/video-js.swf"]
+    Rake::Shell["cp dist/video-js.png dist/video-js/video-js.png"]
+    Rake::Shell["cp dist/demo.html dist/video-js/demo.html"]
+
+    Rake::Shell["cd dist && zip -r video-js-#{version_number}.zip video-js && cd .."]
+
+    if `git name-rev --name-only HEAD`.strip != 'stable'
+      Rake::Log["*** WARNING: NOT ON STABLE BRANCH!!! ***"]
+    end
+  end
+
+  desc "Build source files for packaging"
+  task :source do
+    Rake::Log["Building Version: " << version_number]
+
+    if File.exist?("dist")
+      Rake::Shell["rm -r dist"]
+    end
+
+    # Make distribution folder
+    Rake::Shell["mkdir dist"]
+
+    Rake::Log["Combining source files"]
+    combined = ""
+
+    first_files = [ '_begin.js', 'core.js', 'lib.js' ]
+
+    first_files.each do |item|
+      Rake::Log[item]
+      combined << File.read("src/#{item}")
+    end
+
+    Dir.foreach('src') do |item|
+      next if (['.', '..', '.DS_Store', 'setup.js', '_end.js'] + first_files).include? item
+      combined << File.read("src/#{item}")
+    end
+
+    # combined << File.read("flash/swfobject.js")
+    combined << File.read("src/setup.js")
+    combined << File.read("src/_end.js")
+
+    Rake::Log["Adding version number"]
+    combined = combined.gsub('GENERATED_AT_BUILD', version_number)
+
+    File.open('dist/video.js', "w+") do |file|
+      file.puts "" << combined
+    end
+
+    Rake::Log["Copying CSS and updated version"]
+    File.open('dist/video-js.css', "w+") do |file|
+      file.puts File.read("design/video-js.css").gsub('GENERATED_AT_BUILD', version_number)
+    end
+
+    Rake::Log["Copying suppporting files"]
+    Rake::Shell["cp design/video-js.png dist/video-js.png"]
+    Rake::Shell["cp flash/video-js.swf dist/video-js.swf"]
+
+    Rake::Shell["cp build/release-files/README.md dist/README.md"]
+    Rake::Shell["cp build/release-files/demo.html dist/demo.html"]
+    Rake::Shell["cp LGPLv3-LICENSE.txt dist/LGPLv3-LICENSE.txt"]
+
+    Rake::Log["Minimizing JavaScript"]
+    Rake::Shell["java -jar build/lib/yuicompressor-2.4.7.jar dist/video.js -o dist/video.min.js"]
+
+    Rake::Log["Minimizing CSS"]
+    Rake::Shell["java -jar build/lib/yuicompressor-2.4.7.jar dist/video-js.css -o dist/video-js.min.css"]
+
+    Rake::Log[version_number << " Built"]
+  end
+
+  desc "Build list of source files for easy inclusion in projects"
+  task :js_source do
+
+    File.open("dev/source-list.js", "w+") do |file|
+      file.puts "var vjsSourceList = [];"
+
+      src_array = ["src/core", "src/lib"]
+      last = ["src/setup"] # "flash/swfobject", 
+      exclude = [".", "..", ".DS_Store", "_end.js", "_begin.js"]
+
+      Dir.foreach('src') do |item|
+        next if exclude.include? item
+
+        item_name = "src/" << item.sub(".js", "")
+
+        next if (src_array + last).include? item_name
+
+        src_array << item_name
+      end
+
+      src_array = src_array + last
+
+      src_array.each do |item|
+        file.puts "vjsSourceList.push('#{item}')"
+      end
+      # file.puts "vjsSourceList.push('src/#{item.sub(".js", "")}')"
+      # file.puts "vjsSourceList.push('flash/swfobject.js')"
+
+    end
+  end
+
+end
+
+def version
+  YAML.load(File.read("VERSION.yml"))
+end
+
+def version_number
+  "#{version['major']}.#{version['minor']}.#{version['patch']}"
+end
+
+module Rake
+  class Shell
+    def self.[](command)
+      output = %x[#{command}]
+      if $?.to_i > 0
+        puts "-----> Process aborted"
+        puts "       Exit status: #{$?}"
+        exit($?.to_i)
+      end
+      puts output
+    end
+  end
+
+  class Log
+    def self.[](message)
+      puts "-----> #{message.split("\n").join("\n       ")}"
+    end
+  end
+end

VERSION.yml

@@ -0,0 +1,4 @@
+--- 
+major: 3
+patch: 0
+minor: 1

build.sh

@@ -0,0 +1,48 @@
+#! /bin/csh
+# Combines Source Files. In terminal, sh build.sh
+# It will put a new video.js file under dist/
+
+# Create dist directory if it doesn't already exist
+mkdir -p dist
+
+# FILES=../src/*
+# for f in $FILES
+# do
+#   echo "Processing $f file..."
+#   # take action on each file. $f store current file name
+#   cat $f
+# done
+
+cat src/_begin.js > dist/video.js
+
+cat src/core.js >> dist/video.js
+cat src/lib.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/component.js >> dist/video.js
+cat src/player.js >> dist/video.js
+cat src/tech.js >> dist/video.js
+cat src/controls.js >> dist/video.js
+
+cat src/tracks.js >> dist/video.js
+
+# h5swf temporarily requires swfobject
+# cat flash/swfobject.js >> dist/video.js
+
+cat src/setup.js >> dist/video.js
+cat src/_end.js >> dist/video.js
+
+
+# Copy Files
+cp design/video-js.css dist/video-js.css
+cp design/video-js.png dist/video-js.png
+cp flash/video-js.swf dist/video-js.swf
+
+cp build/release-files/README.md dist/README.md
+cp build/release-files/demo.html dist/demo.html
+cp LGPLv3-LICENSE.txt dist/LGPLv3-LICENSE.txt
+
+java -jar build/lib/yuicompressor-2.4.7.jar dist/video.js -o dist/video.min.js
+java -jar build/lib/yuicompressor-2.4.7.jar dist/video-js.css -o dist/video-js.min.css

build/Versioning Notes.md

@@ -0,0 +1,28 @@
+Deploying Version
+-----------------
+- Update SWF location for CDN
+
+Version Numbers
+---------------
+http://en.wikipedia.org/wiki/Software_versioning#Sequence-based_identifiers
+
+### Major Version (Integer, e.g 3.0)
+- Any features where we expect it could break plugins, skins, or any major API integration.
+
+### Minor Version (3.1)
+- Additional non-breaking features
+
+### Revision Versions
+
+- Beta (3.1b1)
+- Release Candidate (3.1rc1)
+- Release with revisions (3.1r1)
+
+Notes:
+The last level of one revision type (beta/release candidate) should match the first level of the next revision type. 4.0-b10 should match 4.0-rc1, assuming b10 is the last beta version.
+
+Release revisions means bug fixes. The CDN url should not reflect the revision number. 4.0-r2 would still be /4.0/.
+
+Tagging a Release
+-----------------
+git tag -a [version number] [commit]

build/release-files/README.md

@@ -0,0 +1,153 @@
+Video.js - [HTML5 Video Player](http://videojs.com)
+==================================================
+Version 3.0
+
+---
+Version 3 is almost a complete rewrite of the previous versions of Video.js. 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.  
+
+Video.js 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 Video.js 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 Video.js:
+
+  1. The 'data-setup' attribute tells Video.js 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 Video.js functionality, like fullscreen and subtitles.
+    - 'vjs-default-skin' applies the default skin to the HTML controls, and can be removed or overridden to create your own controls design.
+
+Otherwise include/exclude attributes, settings, sources, and tracks exactly as you would for HTML5 video.
+
+    <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](http://videojs.com/docs/) for more advanced uses.
+
+
+Changelog
+---------
+3.0
+
+- Complete rewrite
+- 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.
+
+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

build/release-files/demo.html

@@ -1,21 +1,22 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>VideoJS | HTML5 Video Player</title>
+  <title>Video.js | HTML5 Video Player</title>
 
-  <link href="video-js.css" rel="stylesheet" type="text/css">
+  <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet" type="text/css">
 
   <!-- video.js must be in the <head> for older IEs to work. -->
-  <script src="video.js"></script>
+  <script src="http://vjs.zencdn.net/c/video.js"></script>
 
 </head>
 <body>
 
   <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
       poster="http://video-js.zencoder.com/oceans-clip.png"
-      data-setup="">
-    <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'>
-    <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
+      data-setup="{}">
+    <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
+    <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
+    <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
   </video>
 
 </body>

design/video-js.css

@@ -1,7 +1,9 @@
-/* 
+/*
 VideoJS Default Styles (http://videojs.com)
-Version 3.0
+Version GENERATED_AT_BUILD
+*/
 
+/*
 REQUIRED STYLES (be careful overriding)
 ================================================================================ */
 /* When loading the player, the video tag is replaced with a DIV,
@@ -11,17 +13,25 @@ REQUIRED STYLES (be careful overriding)
    ** 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; 
+.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;
+
+  /* Allow poster to be vertially aligned. */
+  vertical-align: middle;
+  /*  display: table-cell; */ /*This works in Safari but not Firefox.*/
 }
 
 /* Playback technology elements expand to the width/height of the containing div. <video> or <object> */
 .video-js .vjs-tech { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
 
+/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when checking fullScreenEnabled. */
+.video-js:-moz-full-screen { position: absolute; }
+
 /* Fullscreen Styles */
-body.vjs-full-window { 
+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 */
 }
@@ -29,11 +39,44 @@ body.vjs-full-window {
   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) */
 }
+.video-js:-webkit-full-screen {
+  width: 100% !important; height: 100% !important;
+}
 
-/* Subtiles Style */
+/* Poster Styles */
+.vjs-poster {
+  margin: 0 auto; padding: 0; cursor: pointer;
+
+  /* Scale with the size of the player div. Works when poster is vertically shorter, but stretches when it's less wide. */
+  position: relative; width: 100%; max-height: 100%; 
+}
+
+/* Subtiles Styles */
 .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)
+/* Fading sytles, used to fade control bar. */
+.vjs-fade-in {
+  visibility: visible !important; /* Needed to make sure things hide in older browsers too. */
+  opacity: 1 !important;
+  
+  -webkit-transition: visibility 0s linear 0s, opacity 0.3s linear;
+  -moz-transition: visibility 0s linear 0s, opacity 0.3s linear;
+  -ms-transition: visibility 0s linear 0s, opacity 0.3s linear;
+  -o-transition: visibility 0s linear 0s, opacity 0.3s linear;
+  transition: visibility 0s linear 0s, opacity 0.3s linear;
+}
+.vjs-fade-out {
+  visibility: hidden !important;
+  opacity: 0 !important;
+
+  -webkit-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
+  -moz-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
+  -ms-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
+  -o-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
+  transition: visibility 0s linear 1.5s,opacity 1.5s linear;
+}
+
+/* DEFAULT SKIN (override in another file to create new skins)
 ================================================================================
 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. */
@@ -43,7 +86,6 @@ so you can upgrade to newer versions easier. You can remove all these styles by
   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;
@@ -52,7 +94,7 @@ so you can upgrade to newer versions easier. You can remove all these styles by
   /* 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-gradient(linear, 0% 0%, 0% 100%, 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+ */
@@ -60,12 +102,10 @@ so you can upgrade to newer versions easier. You can remove all these styles by
   /*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;
+  /* Start hidden and with 0 opacity. Opacity is used to fade in modern browsers. */
+  /* Can't use display block to hide initially because widths of slider handles aren't calculated and avaialbe for positioning correctly. */
+  visibility: hidden;
+  opacity: 0;
 }
 
 /* General styles for individual controls. */
@@ -105,33 +145,33 @@ so you can upgrade to newer versions easier. You can remove all these styles by
 
 
 .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; 
+.vjs-default-skin .vjs-volume-bar {
+  position: relative; width: 5em; height: 0.6em; margin: 1em auto 0; 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%);
+  background: #666;
+  background: -moz-linear-gradient(top, #333, #666);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#666));
+  background: -webkit-linear-gradient(top, #333, #666);
+  background: -o-linear-gradient(top, #333, #666);
+  background: -ms-linear-gradient(top, #333, #666);
+  background: linear-gradient(top, #333, #666);
 }
-.vjs-default-skin .vjs-volume-level { 
-  position: absolute; top: 0; left: 0; height: 0.6em; background: #fff; 
+.vjs-default-skin .vjs-volume-level {
+  position: absolute; top: 0; left: 0; height: 0.6em;
 
   -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%);
+  background: #fff;
+  background: -moz-linear-gradient(top, #fff, #ccc);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ccc));
+  background: -webkit-linear-gradient(top, #fff, #ccc);
+  background: -o-linear-gradient(top, #fff, #ccc);
+  background: -ms-linear-gradient(top, #fff, #ccc);
+  background: linear-gradient(top, #fff, #ccc);
 }
-.vjs-default-skin .vjs-volume-handle { 
+.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;
@@ -149,12 +189,13 @@ so you can upgrade to newer versions easier. You can remove all these styles by
 
   /* 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%);
+  background: -moz-linear-gradient(top, #222, #333);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#333));
+  background: -webkit-linear-gradient(top, #222, #333);
+  background: -o-linear-gradient(top, #333, #222);
+  background: -ms-linear-gradient(top, #333, #222);
+  background: linear-gradient(top, #333, #222);
+
 
   /* 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);*/
@@ -169,12 +210,12 @@ so you can upgrade to newer versions easier. You can remove all these styles by
 
   /* 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%);
+  background: -moz-linear-gradient(top, #111, #262626);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#111), to(#262626));
+  background: -webkit-linear-gradient(top, #111, #262626);
+  background: -o-linear-gradient(top, #111, #262626);
+  background: -ms-linear-gradient(top, #111, #262626);
+  background: linear-gradient(top, #111, #262626);
 }
 .vjs-default-skin .vjs-progress-holder .vjs-play-progress,
 .vjs-default-skin .vjs-progress-holder .vjs-load-progress { /* Progress Bars */
@@ -186,18 +227,18 @@ so you can upgrade to newer versions easier. You can remove all these styles by
 }
 
 .vjs-default-skin .vjs-play-progress {
-  /* CSS Gradient. */ 
+  /* 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-gradient(linear, 0% 0%, 0% 100%, 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-gradient(linear, 0% 0%, 0% 100%, 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%);
@@ -209,25 +250,25 @@ so you can upgrade to newer versions easier. You can remove all these styles by
 
   /* 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%);
+  background: -moz-linear-gradient(top, #666, #333);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666), to(#333));
+  background: -webkit-linear-gradient(top, #666, #333);
+  background: -o-linear-gradient(top, #666, #333);
+  background: -ms-linear-gradient(top, #666, #333);
+  background: linear-gradient(top, #666, #333);
 }
 
 .vjs-default-skin div.vjs-seek-handle {
-  position: absolute; 
+  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;
+  background: url('video-js.png') 0 -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;
+  -webkit-box-shadow: 0 2px 4px 0 #000; -moz-box-shadow: 0 2px 4px 0 #000; box-shadow: 0 2px 4px 0 #000;
 }
 /* Time Display
 -------------------------------------------------------------------------------- */
@@ -241,14 +282,14 @@ so you can upgrade to newer versions easier. You can remove all these styles by
   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%);
+  background: -moz-linear-gradient(top, #222, #333);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#333));
+  background: -webkit-linear-gradient(top, #222, #333);
+  background: -o-linear-gradient(top, #333, #222);
+  background: -ms-linear-gradient(top, #333, #222);
+  background: linear-gradient(top, #333, #222);
 
   /* 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);*/
@@ -284,7 +325,7 @@ so you can upgrade to newer versions easier. You can remove all these styles by
 
   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-gradient(linear, 0% 0%, 0% 100%, 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%);
@@ -296,7 +337,7 @@ so you can upgrade to newer versions easier. You can remove all these styles by
 }
 
 .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;
+  -webkit-box-shadow: 0 0 80px #fff; -moz-box-shadow: 0 0 80px #fff; box-shadow: 0 0 80px #fff;
 }
 
 .vjs-default-skin div.vjs-big-play-button span {
@@ -304,4 +345,83 @@ so you can upgrade to newer versions easier. You can remove all these styles by
   display: block; width: 35px; height: 42px;
   margin: -20px 0 0 -15px; /* Using negative margin to center image. */
   background: url('video-js.png') -100px 0;
-}
+}
+
+/* Loading Spinner
+---------------------------------------------------------*/
+/* CSS Spinners by Kilian Valkhof - http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/ */
+.vjs-loading-spinner {
+  display: none;
+  position: absolute; top: 50%; left: 50%; width: 55px; height: 55px;
+  margin: -28px 0 0 -28px;
+  -webkit-animation-name: rotatethis;
+  -webkit-animation-duration:1s;
+  -webkit-animation-iteration-count:infinite;
+  -webkit-animation-timing-function:linear;
+  -moz-animation-name: rotatethis;
+  -moz-animation-duration:1s;
+  -moz-animation-iteration-count:infinite;
+  -moz-animation-timing-function:linear;
+}
+
+@-webkit-keyframes rotatethis {
+  0% {-webkit-transform:scale(0.6) rotate(0deg); }
+  12.5% {-webkit-transform:scale(0.6) rotate(0deg); }
+  12.51% {-webkit-transform:scale(0.6) rotate(45deg); }
+  25% {-webkit-transform:scale(0.6) rotate(45deg); }
+  25.01% {-webkit-transform:scale(0.6) rotate(90deg);}
+  37.5% {-webkit-transform:scale(0.6) rotate(90deg);}
+  37.51% {-webkit-transform:scale(0.6) rotate(135deg);}
+  50% {-webkit-transform:scale(0.6) rotate(135deg);}
+  50.01% {-webkit-transform:scale(0.6) rotate(180deg);}
+  62.5% {-webkit-transform:scale(0.6) rotate(180deg);}
+  62.51% {-webkit-transform:scale(0.6) rotate(225deg);}
+  75% {-webkit-transform:scale(0.6) rotate(225deg);}
+  75.01% {-webkit-transform:scale(0.6) rotate(270deg);}
+  87.5% {-webkit-transform:scale(0.6) rotate(270deg);}
+  87.51% {-webkit-transform:scale(0.6) rotate(315deg);}
+  100% {-webkit-transform:scale(0.6) rotate(315deg);}
+}
+
+@-moz-keyframes rotatethis {
+  0% {-moz-transform:scale(0.6) rotate(0deg);}
+  12.5% {-moz-transform:scale(0.6) rotate(0deg);}
+  12.51% {-moz-transform:scale(0.6) rotate(45deg);}
+  25% {-moz-transform:scale(0.6) rotate(45deg);}
+  25.01% {-moz-transform:scale(0.6) rotate(90deg);}
+  37.5% {-moz-transform:scale(0.6) rotate(90deg);}
+  37.51% {-moz-transform:scale(0.6) rotate(135deg);}
+  50% {-moz-transform:scale(0.6) rotate(135deg);}
+  50.01% {-moz-transform:scale(0.6) rotate(180deg);}
+  62.5% {-moz-transform:scale(0.6) rotate(180deg);}
+  62.51% {-moz-transform:scale(0.6) rotate(225deg);}
+  75% {-moz-transform:scale(0.6) rotate(225deg);}
+  75.01% {-moz-transform:scale(0.6) rotate(270deg);}
+  87.5% {-moz-transform:scale(0.6) rotate(270deg);}
+  87.51% {-moz-transform:scale(0.6) rotate(315deg);}
+  100% {-moz-transform:scale(0.6) rotate(315deg);}
+}
+/* Each circle */
+div.vjs-loading-spinner .ball1 { opacity: 0.12; position:absolute; left: 20px; top: 0px; width: 13px; height: 13px; background: #fff;
+  border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
+
+div.vjs-loading-spinner .ball2 { opacity: 0.25; position:absolute; left: 34px; top: 6px; width: 13px; height: 13px; background: #fff;
+  border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
+
+div.vjs-loading-spinner .ball3 { opacity: 0.37; position:absolute; left: 40px; top: 20px; width: 13px; height: 13px; background: #fff;
+  border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
+
+div.vjs-loading-spinner .ball4 { opacity: 0.50; position:absolute; left: 34px; top: 34px; width: 13px; height: 13px; background: #fff;
+  border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 15px; border: 1px solid #ccc; }
+
+div.vjs-loading-spinner .ball5 { opacity: 0.62; position:absolute; left: 20px; top: 40px; width: 13px; height: 13px; background: #fff;
+  border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
+
+div.vjs-loading-spinner .ball6 { opacity: 0.75; position:absolute; left: 6px; top: 34px; width: 13px; height: 13px; background: #fff;
+  border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
+
+div.vjs-loading-spinner .ball7 { opacity: 0.87; position:absolute; left: 0px; top: 20px; width: 13px; height: 13px; background: #fff;
+  border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
+
+div.vjs-loading-spinner .ball8 { opacity: 1.00; position:absolute; left: 6px; top: 6px; width: 13px; height: 13px; background: #fff;
+  border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }

dev.html.example

@@ -0,0 +1,51 @@
+<!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="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/component.js"></script>
+  <script src="src/player.js"></script>
+  <script src="src/tech.js"></script>
+  <script src="src/controls.js"></script>
+  <script src="src/events.js"></script>
+  <script src="src/tracks.js"></script>
+  
+  <script src="src/setup.js"></script>
+  
+  <script type="text/javascript" charset="utf-8">
+    // Easy access to test Flash over HTML5. Add ?flash to URL
+    if (window.location.href.indexOf("?flash") !== -1) {
+      _V_.options.techOrder = ["H5swf"]
+    }
+  </script>
+
+</head>
+<body>
+
+  <video id="vid1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264"
+      poster="http://video-js.zencoder.com/oceans-clip.png"
+      data-setup='{}'>
+    <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'>
+    <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
+    <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg'>
+    <p>Video Playback Not Supported</p>
+  </video>
+
+  <script>
+    vid = document.getElementById("vid1");
+  </script>
+
+</body>
+</html>

dev/build-source-list.rb

@@ -0,0 +1,17 @@
+#! /usr/bin/env ruby
+# Create javascript file with list of source files for easy inclusion in other development files.
+
+# puts ARGV[0]
+
+File.open("source-list.js", "w+") do |file|
+  file.puts "var vjsSourceList = [];"
+  
+  
+  Dir.foreach('../src') do |item|
+    next if item == '.' or item == '..' or item == '.DS_Store'
+
+    file.puts "vjsSourceList.push('src/#{item}')"
+
+  end
+
+end

dev/build/combine_sources.sh

@@ -1,36 +0,0 @@
-#! /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

dev/compare/compare.css

@@ -1,6 +0,0 @@
-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; }

dev/compare/compare.html

@@ -1,102 +0,0 @@
-<!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>

dev/compare/compare.js

@@ -1,55 +0,0 @@
-$(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);
-
-  };
-});

dev/dev.html

@@ -1,62 +0,0 @@
-<!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>

dev/require-list.js

@@ -0,0 +1,31 @@
+// Attempting to create a portable script that loads source files in order. So we can change which files are included and have it change multiple places.
+var vjsSourceList = ["require",
+  'order!../../src/core.js',
+  'order!../../src/lib.js',
+  'order!../../src/component.js',
+  'order!../../src/controls.js',
+  'order!../../src/ecma.js',
+  'order!../../src/events.js',
+  'order!../../src/json.js',
+  'order!../../src/player.js',
+  'order!../../src/tech.js',
+  'order!../../src/tracks.js',
+  'order!../../flash/swfobject.js',
+  'order!../../src/setup.js'
+];
+
+// Not going to be used in production, so eval ok.
+require([vjsSourceList])
+
+// var requireEval = '';
+// for (var i=0; i < vjsSourceList.length; i++) {
+//   requireEval += 'require(["order!'+vjsSourceList[i]+'"], function() { ';
+// }
+// 
+// requireEval += 'var libsLoaded = true;'
+// 
+// for (var i=0; i < vjsSourceList.length; i++) {
+//   requireEval += ' }); ';
+// }
+// 
+// eval(requireEval);

dev/source-list.js

@@ -0,0 +1,13 @@
+var vjsSourceList = [];
+vjsSourceList.push('src/core')
+vjsSourceList.push('src/lib')
+vjsSourceList.push('src/component')
+vjsSourceList.push('src/controls')
+vjsSourceList.push('src/ecma')
+vjsSourceList.push('src/events')
+vjsSourceList.push('src/json')
+vjsSourceList.push('src/player')
+vjsSourceList.push('src/tech')
+vjsSourceList.push('src/tracks')
+vjsSourceList.push('flash/swfobject')
+vjsSourceList.push('src/setup')

dev/src/_begin.js

@@ -1,4 +0,0 @@
-// Self-executing function to prevent global vars and help with minification
-;(function(window, undefined){
-  var document = window.document;
-

dev/src/api.js

@@ -1,294 +0,0 @@
-/* Player API
-================================================================================ */
-VideoJS.fn.extend({
-
-  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).");
-    }
-  },
-
-  /* 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.apiCall("setCurrentTime", seconds);
-      if (this.manualTimeUpdates) { this.triggerEvent("timeupdate"); }
-      return this;
-    }
-    return this.apiCall("currentTime");
-  },
-  duration: function(){
-    return this.apiCall("duration");
-  },
-  remainingTime: function(){
-    return this.duration() - this.currentTime();
-  },
-
-  buffered: function(){
-    var buffered = this.apiCall("buffered"),
-        start = 0, end = this.values.bufferEnd = this.values.bufferEnd || 0,
-        timeRange;
-
-    if (buffered && buffered.length > 0 && buffered.end(0) > end) {
-      end = buffered.end(0);
-      // Storing values allows them be overridden by setBufferedFromProgress
-      this.values.bufferEnd = end;
-    }
-
-    return _V_.createTimeRange(start, end);
-  },
-
-  // Calculates amount of buffer is full
-  bufferedPercent: function(){
-    return (this.duration()) ? this.buffered().end(0) / this.duration() : 0;
-  },
-
-  volume: function(percentAsDecimal){
-    if (percentAsDecimal !== undefined) {
-      var vol = Math.max(0, Math.min(1, parseFloat(percentAsDecimal))); // Force value to between 0 and 1
-      this.values.volume = vol;
-      this.apiCall("setVolume", vol);
-      this.setLocalStorage("volume", vol);
-      return this;
-    }
-    // if (this.values.volume) { return this.values.volume; }
-    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.box.width = width;
-      this.box.style.width = width+"px";
-      if (!skipListeners) { this.triggerEvent("resize"); }
-      return this;
-    }
-    return parseInt(this.box.getAttribute("width"));
-  },
-  height: function(height){
-    if (height !== undefined) {
-      this.box.height = height;
-      this.box.style.height = height+"px";
-      this.triggerEvent("resize");
-      return this;
-    }
-    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.apiCall("supportsFullScreen"); },
-
-  // Turn on fullscreen (or window) mode
-  enterFullScreen: function(){
-    if (false && this.supportsFullScreen()) {
-      this.api("enterFullScreen");
-    } else {
-      this.enterFullWindow();
-    }
-    this.triggerEvent("enterFullScreen");
-    return this;
-  },
-
-  exitFullScreen: function(){
-    if (true || !this.supportsFullScreen()) {
-      this.exitFullWindow();
-    }
-    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_.addEvent(document, "keydown", _V_.proxy(this, this.fullscreenOnEscKey));
-
-    // Add listener for a window resize
-    _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");
-
-    this.triggerEvent("enterFullWindow");
-  },
-
-  exitFullWindow: function(){
-    this.videoIsFullScreen = 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.triggerEvent("exitFullWindow");
-  },
-
-  // 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"); }
-});

dev/src/autoload.js

@@ -1,37 +0,0 @@
-_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

dev/src/behaviors/behaviors.js

@@ -1,310 +0,0 @@
-/* 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();
-      }
-    }
-  }
-);

dev/src/behaviors/seekBar.js

@@ -1,213 +0,0 @@
-/* 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) + "%"; }
-      });
-    }
-  }
-);

dev/src/behaviors/texttrackdisplays.js

@@ -1,43 +0,0 @@
-/* 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);
-});

dev/src/behaviors/volume.js

@@ -1,177 +0,0 @@
-/* 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));
-    // }
-  }
-);

dev/src/controls/bar.js

@@ -1,153 +0,0 @@
-_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");
-  }
-};

dev/src/controls/bigPlay.js

@@ -1,52 +0,0 @@
-_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";
-      });
-    }
-  }
-);

dev/src/controls/controls.html

@@ -1,157 +0,0 @@
-<!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>

dev/src/controls/main.js

@@ -1,133 +0,0 @@
-_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";
-      });
-    }
-  }
-);

dev/src/controls/subtitlesBox.js

@@ -1,22 +0,0 @@
-_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;
-  }
-};

dev/src/core.js

@@ -1,381 +0,0 @@
-// 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 = {};

dev/src/log.js

@@ -1,15 +0,0 @@
-// 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={};}})());

dev/src/tech/h5swf.js

@@ -1,152 +0,0 @@
-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

dev/src/tech/html5.js

@@ -1,157 +0,0 @@
-// 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" : "";
-    };
-  }
-}

docs/api.md

@@ -1,145 +1,232 @@
+---
+layout: docs
+title: API
+description: Video.JS API Docs - API settings based on the HTML5 video API
+body_id: api
+body_class: docs subpage
+---
+
 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).
+The Video.js API allows you to interact with the video through Javascript, whether the browser is playing the video through HTML5 video, Flash, or any other supported playback technologies.
 
 Referencing the Player
 ----------------------
-To use the API functions, you need access to the player object. Luckily this is easy to get. You just need to make sure your video tag has an ID. The example embed code has an ID of "example_video_1". If you have multiple videos on one page, make sure every video tag has a unique ID (example_video_2, example_video_3, etc.).
+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.
 
-    _V_("example_video_1")
+{% highlight javascript %}
 
+  var myPlayer = _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.
+{% endhighlight %}
+
+(If the player hasn't been initialized yet via the data-setup attribute or another method, this will also initialize the player.)
+
+Wait Until the Player is Ready
+------------------------------
+The time it takes Video.js to set up the video and API will vary depending on the playback technology being used (HTML5 will often be much faster to load than Flash). For that reason we want to use the player's 'ready' function to trigger any code that requires the player's API.
+
+{% highlight javascript %}
 
     _V_("example_video_1").ready(function(){
 
       var myPlayer = this;
 
+      // EXAMPLE: Start playing the video.
+      myPlayer.play();
+
     });
 
+{% endhighlight %}
 
 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); )
+Now that you have access to a ready player, you can control the video or respond to video events using the following functions. The Video.js API function names follow the [HTML5 media API](http://www.w3.org/TR/html5/video.html). The main difference is that attributes which you would get or set on a video element using the equals sign ( `myVideoElement.currentTime = "120";` ), you would use a function argument syntax for Video.js ( `myPlayer.currentTime(120);` )
 
 ### play()
-  Start video playback.
-  Returns the player object.
-  Example:
+  Start video playback. Returns the player object.
+
+{% highlight javascript %}
+
+  myPlayer.play();
+
+{% endhighlight %}
+
 
-    myPlayer.play();
 
 ### pause()
-  Pause the video playback.
-  Returns: the player object
-  Example:
+  Pause the video playback. Returns: the player object
 
-    myPlayer.pause();
+{% highlight javascript %}
+
+  myPlayer.pause();
+
+{% endhighlight %}
 
 ### currentTime()
   Returns the current time of the video in seconds.
-  Example:
 
-    var whereYouAt = myPlayer.currentTime();
+{% highlight javascript %}
+
+  var whereYouAt = myPlayer.currentTime();
+
+{% endhighlight %}
 
 ### 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
+{% highlight javascript %}
+
+  myPlayer.currentTime(120); // 2 minutes into the video
+
+{% endhighlight %}
 
 
 ### 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:
+  Returns the length in time of the video in seconds. NOTE: The video must have started loading before the duration can be known, and in the case of Flash, may not be known until the video starts playing.
 
-    var howLongIsThis = myPlayer.duration();
+
+{% highlight javascript %}
+
+  var howLongIsThis = myPlayer.duration();
+
+{% endhighlight %}
 
 ### 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:
+  Returns a [TimeRange](http://videojs.com/docs/glossary.html#timerange) with sections of the video that have been downloaded. If you just want the percent of the video that's been downloaded, use bufferedPercent.
 
-    var whatHasBeenBuffered = myPlayer.buffered();
+{% highlight javascript %}
+
+  var whatHasBeenBuffered = myPlayer.buffered();
+
+{% endhighlight %}
 
 ### bufferedPercent()
   Returns the percent (as a decimal) of the video that's been downloaded.
-  Example:
 
-    var howMuchIsDownloaded = myPlayer.bufferedPercent();
+{% highlight javascript %}
+
+  var howMuchIsDownloaded = myPlayer.bufferedPercent();
+
+{% endhighlight %}
 
 ### 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();
+{% highlight javascript %}
+
+  var howLoudIsIt = myPlayer.volume();
+
+{% endhighlight %}
 
 ### 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
+{% highlight javascript %}
+
+  myPlayer.volume(0.5); // Set volume to half
+
+{% endhighlight %}
 
 ### width()
   Returns the current width of the video in pixels.
-  Example:
-  
+
+{% highlight javascript %}
+
     var howWideIsIt = myPlayer.width();
 
+{% endhighlight %}
+
 ### width(pixels)
   Change the width of the video to the supplied width in pixels.
   Returns the player object
-  Example:
 
-    myPlayer.width(640);
+{% highlight javascript %}
+
+  myPlayer.width(640);
+
+{% endhighlight %}
+
 
 ### height()
   Returns the current height of the video in pixels.
-  Example:
 
-    var howTallIsIt = myPlayer.height();
+{% highlight javascript %}
+
+  var howTallIsIt = myPlayer.height();
+
+{% endhighlight %}
+
 
 ### height(pixels)
   Change the height of the video to the supplied height in pixels.
   Returns the player object
 
-    myPlayer.height(480);
+{% highlight javascript %}
+
+  myPlayer.height(480);
+
+{% endhighlight %}
+
 
 ### 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);
+  Changes the width and height of the video to the supplied width and height. This is more efficient if you're changing both width and height (only triggers the player's resize event once). Returns the player object.
 
-### 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.
+{% highlight javascript %}
+
+  myPlayer.size(640,480);
+
+{% endhighlight %}
+
+
+### requestFullScreen()
+  Increase the size of the video to full screen. In some browsers, full screen is not supported natively, so it enters full window mode, where the fills the browser window. In browsers that support native full screen, typically the browser's default controls will be shown, and not the Video.js custom skin. In full window mode, the Video.js controls and skin will always be used.
   Returns the player object.
 
-    myPlayer.enterFullScreen();
+{% highlight javascript %}
 
-### exitFullScreen()
+  myPlayer.requestFullScreen();
+
+{% endhighlight %}
+
+
+### cancelFullScreen()
   Return the video to its normal size after having been in full screen mode.
   Returns the player object.
 
-    myPlayer.exitFullScreen();
+{% highlight javascript %}
+
+  myPlayer.cancelFullScreen();
+
+{% endhighlight %}
 
 
 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);
+{% highlight javascript %}
+
+  var myFunc = function(){
+    // Do something when the event is fired
+  };
+  myPlayer.addEvent("eventName", myFunc);
+
+{% endhighlight %}
+
 
 You can also remove the listeners later.
 
-    myPlayer.removeEvent("eventName", myFunc);
+{% highlight javascript %}
+
+  myPlayer.removeEvent("eventName", myFunc);
+
+{% endhighlight %}
+
 
 ### Event Types
+List of player events you can add listeners for.
 
 <table border="0" cellspacing="5" cellpadding="5">
   <tr><th>Name</th><th>Description</th></tr>

docs/behaviors.md

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

docs/glossary.md

@@ -1,3 +1,12 @@
+---
+layout: docs
+title: VideoJS Glossary
+description: Video.JS Glossary
+body_id: glossary
+body_class: docs subpage
+---
+
+
 Glossary
 ========
 
@@ -6,4 +15,33 @@ The container of elements on the page that must be loaded before you can interac
 http://en.wikipedia.org/wiki/Document_Object_Model
 
 ### Flash Fallback
-The Flash video player (SWF) used to play a video when HTML5 isn't supported.
+The Flash video player (SWF) used to play a video when HTML5 isn't supported.
+
+<a name="timerange"></a>
+### TimeRange
+
+<a name="html5-video"></a>
+### HTML5 Video
+HTML is the markup language that makes up every page on the web. The newest version, HTML5, includes specifications for a video tag, that is meant to allow website developers to add a video to a page the same way they would add an image. In order for this to work, web browser developers (Mozilla, Apple, Microsoft, Google, Opera, etc.) have to build the video playback functionality into their browsers. The W3C has created directions on how video should work in browsers, and it’s up to browser developers to follow those directions, so that video works the same across all browsers. This doesn’t always happen thanks to technology, legal, and financial choices made by browser developers, but so far no one’s varying too far from the specifications. However the specifications are still being changed and refined, so browsers developers have to keep up with that as well.
+
+Playing video in a web page may not seem so special since you can already view video on a web page through plugins like Flash Player, Quicktime, Silverlight, and RealPlayer, however this is a big step forward for standardizing video playback across web browsers and devices. The goal is that in the future, developers will only need to use one method for embedding a video, that’s based on open standards (not controlled by one company), and it will work everywhere.
+
+A prime example of this is the iPhone and iPad. Apple has decided not to support Flash on their mobile devices, but they do support HTML5 video. Since Flash is currently the most common way video is added to web pages, most web video (aside from YouTube who has a special relationship with Apple) can’t be viewed on the iPhone or iPad. These devices are very popular, so many web sites are switching to hybrid HTML5/Flash player setups (like VideoJS).
+
+<a name="video-tag"></a>
+### 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)
+
+
+<a name="skin"></a>
+### Skin
+"Skin" refers to the design of the player's controls, also sometimes called the chrome. With VideoJS, new skins can be built simply by creating a new stylesheet.
+
+<a name="cdn"></a>
+### Content Delivery Network (CDN)
+A network of servers around the world that host copies of a file. When your browser requests one of these files, the CDN automatically determines which server is closest to your location and delivers the file from there. This drastically increases delivery time, especially internationally.

docs/index.md

@@ -0,0 +1,29 @@
+---
+layout: docs
+title: Docs
+description: Video.JS Docs
+body_id: docs
+body_class: docs subpage
+---
+
+<h1>Start</h1>
+
+The Video.js documentation is here to help you setup and use the player. These docs can be found and contributed to in the [Video.js library repository](https://github.com/zencoder/video-js/tree/master/docs).
+
+### [Setup](/docs/setup)
+Check out the [5 second setup](/#setup) if you're just getting started. The setup documentation gives a deeper view of the additional methods you can use to trigger the player setup.
+
+### [Options](/docs/options/)
+There are a number of options that can be used to change how the player behaves, starting with the HTML5 media options like autoplay and preload, and expanding to Video.JS specific options.
+
+### [API](/docs/api/)
+The Video.js API allows you to control the video through javascript or trigger event listeners, whether the video is playing through HTML5, flash, or another playback technology.
+
+### [Skins](/docs/skins/)
+You can change the look of the player across playback technologies just by editing a CSS file. The skins documentation gives you a intro to how the HTML and CSS of the default skin is put together.
+
+### [Tech](/docs/tech/)
+A 'playback technology' is the term we're using to represent HTML5 video, Flash, and other video plugins, as well as other players like the YouTube player. Basically anything that has a unique API to audio or video. Additional playback technologies can be added relatively easily.
+
+### [Glossary](/docs/glossary/)
+Some helpful definitions.

docs/options.md

@@ -1,2 +1,30 @@
+---
+layout: docs
+title: Options
+description: Player Options
+body_id: options
+body_class: docs subpage
+---
+
 Options
 =======
+
+The Video.js emebed code is simply an HTML5 video tag with the video.js classes. So for many of the options you can use the standard tag attributes to set video.js options.
+
+{% highlight html %}
+<video controls autoplay preload="auto" ...>
+{% endhighlight %}
+
+Alternatively, you can use the data-setup attribute to provide options in the JSON format. This is also how you would set options that aren't standard to the video tag.
+
+{% highlight html %}
+<video data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'...>
+{% endhighlight %}
+
+Finally, if you're not using the data-setup attribute to trigger the player setup, you can pass in an object with the player options as the second argument in the setup function.
+
+{% highlight javascript %}
+_V_("myVideoID", { "controls": true, "autoplay": false, "preload": "auto" });
+{% endhighlight %}
+
+(More options documentation coming soon.)

docs/setup.md

@@ -1,29 +1,50 @@
+---
+layout: docs
+title: Setup
+description: Setup
+body_id: setup
+body_class: docs subpage
+---
+
 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).
+Video.js is pretty easy to set up. It can take a matter of seconds to get the player up and working on your web page.
 
-    <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 1: Include the Video.js Javascript and CSS files in the head of your page.
+------------------------------------------------------------------------------
+You can download the Video.js source and host it on your own servers, or use the free CDN hosted version (thanks to Zencoder). It's often recommended now to put JavaScript before the end \</body\> tag instead of the head but Video.js includes an 'HTML5 Shiv', which needs to be in the \<head\> for older IE versions. If you 
+
+{% highlight html %}
+
+<script src="http://vjs.zencdn.net/c/video.js"></script>
+<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
+
+{% endhighlight %}
 
 
 Step 2: Add an HTML5 video tag to your page.
 --------------------------------------------
-Use the video tag as normal, with a few extra pieces for VideoJS:
+Use the video tag as normal, with a few extra pieces for Video.js:
 
-  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)).
+  1. The 'data-setup' Atrribute tells Video.js to automatically set up the video when the page is ready, and read any options (in JSON format) from the attribute (see ['options'](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.
+    - 'video-js' applies styles that are required for Video.js functionality, like fullscreen and subtitles.
     - 'vjs-default-skin' applies the default skin to the HTML controls, and can be removed or overridden to create your own controls design.
 
 Otherwise include/exclude attributes, settings, sources, and tracks exactly as you would for HTML5 video (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>
+{% highlight 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>
+
+{% endhighlight %}
+

docs/skins.md

@@ -0,0 +1,33 @@
+---
+layout: docs
+title: Skins
+description: Controls Skins, Chrome, Design, look-and-feel.
+body_id: skins
+body_class: docs subpage
+---
+
+Skins
+=====
+
+The default Video.js skin is made using HTML and CSS, so there's no need to learn a complicated skinning language to update colors or even create an entirely new skin. New in version 3.0 is the use of a sprites image file (video-js.png). The image allows for a little bit more classy design, as well as compatibility with older versions of IE now that the HTML skin also shows when Flash is used for those browsers.
+
+You can view the uncompressed CSS for the default skin by downloading the latest version of Video.js or viewing [the source version](https://github.com/zencoder/video-js/blob/master/design/video-js.css) on Github.
+
+You can either override styles in the default skin:
+
+{% highlight css %}
+
+.vjs-default-skin .vjs-play-progress { background: #900; }
+
+{% endhighlight %}
+
+Or remove the 'vjs-default-skin' class from the video tag and create your own skin.
+
+{% highlight html %}
+
+<video class="video-js my-custom-skin" ...>
+
+{% endhighlight %}
+
+More custom skins will be available for download soon. If you have one you'd like to contribute back, please email it to <script type="text/javascript">eval(decodeURIComponent('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%73%6b%69%6e%73%40%76%69%64%65%6f%6a%73%2e%63%6f%6d%22%3e%73%6b%69%6e%73%40%76%69%64%65%6f%6a%73%2e%63%6f%6d%3c%2f%61%3e%27%29%3b'))</script>.
+

docs/tech.md

@@ -1,18 +1,20 @@
+---
+layout: docs
+title: Playback Technology
+description: Video.js Playback Technology
+body_id: tech
+body_class: docs subpage
+---
+
 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
-------------------------
+Playback Technology refers to the specific browser or plugin technology used to play the video or audio. When using HTML5, the playback technology is the video or audio element. When using Flash, the playback technology is the specific Flash player used, e.g. Flowplayer, YouTube Player, video-js.swf, etc. (not just "Flash"). This could also include Silverlight, Quicktime, or any other plugin that will play back video in the browser, as long as there is an API wrapper written for it. 
 
+Essentially we're using HTML5 and plugins only as video decoders, and using HTML and JavaScript to create a consistent API and skinning experience across all of them.
 
 Building an API Wrapper
 -----------------------
-
-
+We'll write a more complete guide on writing a wrapper soon, but for now the best resource is the [Video.js](https://github.com/zencoder/video-js/tree/master/src) source where you can see how both the HTML5 and video-js.swf API wrappers were created.
 
 Required Methods
 ----------------

docs/timerange.md

@@ -1,2 +0,0 @@
-TimeRange
-=========

docs/video-tag.md

@@ -1,8 +0,0 @@
-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)

source-list.js

@@ -0,0 +1 @@
+var vjsSourceList = [];

src/_begin.js

@@ -0,0 +1,24 @@
+/*!
+Video.js - HTML5 Video Player
+Version GENERATED_AT_BUILD
+
+LGPL v3 LICENSE INFO
+This file is part of Video.js. Copyright 2011 Zencoder, Inc.
+
+Video.js 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.
+
+Video.js 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 Video.js.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+// Self-executing function to prevent global vars and help with minification
+;(function(window, undefined){
+  var document = window.document;

src/component.js

@@ -0,0 +1,201 @@
+// Using John Resig's Class implementation http://ejohn.org/blog/simple-javascript-inheritance/
+// (function(){var initializing=false, fnTest=/xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/; _V_.Class = function(){}; _V_.Class.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 Class() { if ( !initializing && this.init ) this.init.apply(this, arguments); } Class.prototype = prototype; Class.constructor = Class; Class.extend = arguments.callee; return Class;};})();
+(function(){
+  var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
+  _V_.Class = function(){};
+  _V_.Class.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 Class() {
+      if ( !initializing && this.init ) {
+        return this.init.apply(this, arguments);
+
+      // Attempting to recreate accessing function form of class.
+      } else if (!initializing) {
+        return arguments.callee.prototype.init()
+      }
+    }
+    Class.prototype = prototype;
+    Class.constructor = Class;
+    Class.extend = arguments.callee;
+    return Class;
+  };
+})();
+
+/* Player Component- Base class for all UI objects
+================================================================================ */
+_V_.Component = _V_.Class.extend({
+
+  init: function(player, options){
+    this.player = player;
+
+    // Allow for overridding default component options
+    options = this.options = _V_.merge(this.options || {}, options);
+
+    // Create element if one wasn't provided in options
+    if (options.el) {
+      this.el = options.el;
+    } else {
+      this.el = this.createElement();
+    }
+
+    // Add any components in options
+    this.initComponents();
+  },
+
+  destroy: function(){},
+
+  createElement: function(type, attrs){
+    return _V_.createElement(type || "div", attrs);
+  },
+
+  buildCSSClass: function(){
+    // Child classes can include a function that does:
+    // return "CLASS NAME" + this._super();
+    return "";
+  },
+
+  initComponents: function(){
+    var options = this.options;
+    if (options && options.components) {
+      // Loop through components and add them to the player
+      this.eachProp(options.components, function(name, opts){
+
+        // Allow waiting to add components until a specific event is called
+        var tempAdd = this.proxy(function(){
+          this.addComponent(name, opts);
+        });
+
+        if (opts.loadEvent) {
+          this.one(opts.loadEvent, tempAdd)
+        } else {
+          tempAdd();
+        }
+      });
+    }
+  },
+
+  // Add child components to this component.
+  // Will generate a new child component and then append child component's element to this component's element.
+  // Takes either the name of the UI component class, or an object that contains a name, UI Class, and options.
+  addComponent: function(name, options){
+    var componentClass, component;
+
+    // Make sure options is at least an empty object to protect against errors
+    options = options || {};
+
+    // Assume name of set is a lowercased name of the UI Class (PlayButton, etc.)
+    componentClass = options.componentClass || _V_.capitalize(name);
+
+    // Create a new object & element for this controls set
+    // If there's no .player, this is a player
+    component = new _V_[componentClass](this.player || this, options);
+
+    // Add the UI object's element to the container div (box)
+    this.el.appendChild(component.el);
+
+    // Set property name on player. Could cause conflicts with other prop names, but it's worth making refs easy.
+    this[name] = component;
+  },
+
+  /* Display
+  ================================================================================ */
+  show: function(){
+    this.el.style.display = "block";
+  },
+
+  hide: function(){
+    this.el.style.display = "none";
+  },
+  
+  fadeIn: function(){
+    this.removeClass("vjs-fade-out");
+    this.addClass("vjs-fade-in");
+  },
+
+  fadeOut: function(){
+    this.removeClass("vjs-fade-in");
+    this.addClass("vjs-fade-out");
+  },
+
+  addClass: function(classToAdd){
+    _V_.addClass(this.el, classToAdd);
+  },
+
+  removeClass: function(classToRemove){
+    _V_.removeClass(this.el, classToRemove);
+  },
+
+  /* Events
+  ================================================================================ */
+  addEvent: function(type, fn){
+    return _V_.addEvent(this.el, type, _V_.proxy(this, fn));
+  },
+  removeEvent: function(type, fn){
+    return _V_.removeEvent(this.el, type, fn);
+  },
+  triggerEvent: function(type, e){
+    return _V_.triggerEvent(this.el, type, e);
+  },
+  one: function(type, fn) {
+    _V_.one.call(this, this.el, type, fn);
+  },
+
+  /* Ready - Trigger functions when component is ready
+  ================================================================================ */
+  ready: function(fn){
+    if (!fn) return this;
+
+    if (this.isReady) {
+      fn.call(this);
+    } else {
+      if (this.readyQueue === undefined) {
+        this.readyQueue = [];
+      }
+      this.readyQueue.push(fn);
+    }
+
+    return this;
+  },
+
+  triggerReady: function(){
+    this.isReady = true;
+    if (this.readyQueue && this.readyQueue.length > 0) {
+      // Call all functions in ready queue
+      this.each(this.readyQueue, function(fn){
+        fn.call(this);
+      });
+
+      // Reset Ready Queue
+      this.readyQueue = [];
+    }
+  },
+
+  /* Utility
+  ================================================================================ */
+  each: function(arr, fn){ _V_.each.call(this, arr, fn); },
+
+  eachProp: function(obj, fn){ _V_.eachProp.call(this, obj, fn); },
+
+  extend: function(obj){ _V_.merge(this, obj) },
+
+  // More easily attach 'this' to functions
+  proxy: function(fn){  return _V_.proxy(this, fn); }
+
+});

src/controls.js

@@ -0,0 +1,838 @@
+/* Control - Base class for all control elements
+================================================================================ */
+_V_.Control = _V_.Component.extend({
+
+  buildCSSClass: function(){
+    return "vjs-control " + this._super();
+  }
+
+});
+
+/* Button - Base class for all buttons
+================================================================================ */
+_V_.Button = _V_.Control.extend({
+
+  init: function(player, options){
+    this._super(player, options);
+
+    this.addEvent("click", this.onClick);
+    this.addEvent("focus", this.onFocus);
+    this.addEvent("blur", this.onBlur);
+  },
+
+  createElement: function(type, attrs){
+    // Add standard Aria and Tabindex info
+    attrs = _V_.merge({
+      className: this.buildCSSClass(),
+      innerHTML: '<div><span class="vjs-control-text">' + (this.buttonText || "Need Text") + '</span></div>',
+      role: "button",
+      tabIndex: 0
+    }, attrs);
+
+    return this._super(type, attrs);
+  },
+
+  // Click - Override with specific functionality for button
+  onClick: function(){},
+
+  // Focus - Add keyboard functionality to element
+  onFocus: function(){
+    _V_.addEvent(document, "keyup", _V_.proxy(this, this.onKeyPress));
+  },
+
+  // KeyPress (document level) - Trigger click when keys are pressed
+  onKeyPress: function(event){
+    // Check for space bar (32) or enter (13) keys
+    if (event.which == 32 || event.which == 13) {
+      event.preventDefault();
+      this.onClick();
+    }
+  },
+
+  // Blur - Remove keyboard triggers
+  onBlur: function(){
+    _V_.removeEvent(document, "keyup", _V_.proxy(this, this.onKeyPress));
+  }
+
+});
+
+/* Play Button
+================================================================================ */
+_V_.PlayButton = _V_.Button.extend({
+
+  buttonText: "Play",
+
+  buildCSSClass: function(){
+    return "vjs-play-button " + this._super();
+  },
+
+  onClick: function(){
+    this.player.play();
+  }
+
+});
+
+/* Pause Button
+================================================================================ */
+_V_.PauseButton = _V_.Button.extend({
+
+  buttonText: "Pause",
+
+  buildCSSClass: function(){
+    return "vjs-pause-button " + this._super();
+  },
+
+  onClick: function(){
+    this.player.pause();
+  }
+
+});
+
+/* Play Toggle - Play or Pause Media
+================================================================================ */
+_V_.PlayToggle = _V_.Button.extend({
+
+  buttonText: "Play",
+
+  init: function(player, options){
+    this._super(player, options);
+
+    player.addEvent("play", _V_.proxy(this, this.onPlay));
+    player.addEvent("pause", _V_.proxy(this, this.onPause));
+  },
+
+  buildCSSClass: function(){
+    return "vjs-play-control " + this._super();
+  },
+
+  // OnClick - Toggle between play and pause
+  onClick: function(){
+    if (this.player.paused()) {
+      this.player.play();
+    } else {
+      this.player.pause();
+    }
+  },
+
+  // OnPlay - Add the vjs-playing class to the element so it can change appearance
+  onPlay: function(){
+    _V_.removeClass(this.el, "vjs-paused");
+    _V_.addClass(this.el, "vjs-playing");
+  },
+
+  // OnPause - Add the vjs-paused class to the element so it can change appearance
+  onPause: function(){
+    _V_.removeClass(this.el, "vjs-playing");
+    _V_.addClass(this.el, "vjs-paused");
+  }
+
+});
+
+
+/* Fullscreen Toggle Behaviors
+================================================================================ */
+_V_.FullscreenToggle = _V_.Button.extend({
+
+  buttonText: "Fullscreen",
+
+  buildCSSClass: function(){
+    return "vjs-fullscreen-control " + this._super();
+  },
+
+  onClick: function(){
+    if (!this.player.isFullScreen) {
+      this.player.requestFullScreen();
+    } else {
+      this.player.cancelFullScreen();
+    }
+  }
+
+});
+
+/* Big Play Button
+================================================================================ */
+_V_.BigPlayButton = _V_.Button.extend({
+  init: function(player, options){
+    this._super(player, options);
+
+    player.addEvent("play", _V_.proxy(this, this.hide));
+    player.addEvent("ended", _V_.proxy(this, this.show));
+  },
+
+  createElement: function(){
+    return this._super("div", {
+      className: "vjs-big-play-button",
+      innerHTML: "<span></span>"
+    });
+  },
+
+  onClick: function(){
+    // Go back to the beginning if big play button is showing at the end.
+    // Have to check for current time otherwise it might throw a 'not ready' error.
+    if(this.player.currentTime()) { 
+      this.player.currentTime(0);
+    }
+    this.player.play();
+  }
+});
+
+/* Loading Spinner
+================================================================================ */
+_V_.LoadingSpinner = _V_.Component.extend({
+  init: function(player, options){
+    this._super(player, options);
+
+    player.addEvent("canplay", _V_.proxy(this, this.hide));
+    player.addEvent("canplaythrough", _V_.proxy(this, this.hide));
+    player.addEvent("playing", _V_.proxy(this, this.hide));
+
+    player.addEvent("seeking", _V_.proxy(this, this.show));
+    player.addEvent("error", _V_.proxy(this, this.show));
+
+    // Not showing spinner on stalled any more. Browsers may stall and then not trigger any events that would remove the spinner.
+    // Checked in Chrome 16 and Safari 5.1.2. http://help.videojs.com/discussions/problems/883-why-is-the-download-progress-showing
+    // player.addEvent("stalled", _V_.proxy(this, this.show));
+
+    player.addEvent("waiting", _V_.proxy(this, this.show));
+  },
+
+  createElement: function(){
+
+    var classNameSpinner, innerHtmlSpinner;
+
+    if ( typeof this.player.el.style.WebkitBorderRadius == "string" 
+         || typeof this.player.el.style.MozBorderRadius == "string" 
+         || typeof this.player.el.style.KhtmlBorderRadius == "string" 
+         || typeof this.player.el.style.borderRadius == "string")
+      {
+        classNameSpinner = "vjs-loading-spinner";
+        innerHtmlSpinner = "<div class='ball1'></div><div class='ball2'></div><div class='ball3'></div><div class='ball4'></div><div class='ball5'></div><div class='ball6'></div><div class='ball7'></div><div class='ball8'></div>";
+      } else {
+        classNameSpinner = "vjs-loading-spinner-fallback";
+        innerHtmlSpinner = "";
+      }
+
+    return this._super("div", {
+      className: classNameSpinner,
+      innerHTML: innerHtmlSpinner
+    });
+  }
+});
+
+/* Control Bar
+================================================================================ */
+_V_.ControlBar = _V_.Component.extend({
+
+  options: {
+    loadEvent: "play",
+    components: {
+      "playToggle": {},
+      "fullscreenToggle": {},
+      "currentTimeDisplay": {},
+      "timeDivider": {},
+      "durationDisplay": {},
+      "remainingTimeDisplay": {},
+      "progressControl": {},
+      "volumeControl": {},
+      "muteToggle": {}
+    }
+  },
+
+  init: function(player, options){
+    this._super(player, options);
+
+    player.addEvent("play", this.proxy(function(){
+      this.fadeIn();
+      this.player.addEvent("mouseover", this.proxy(this.fadeIn));
+      this.player.addEvent("mouseout", this.proxy(this.fadeOut));
+    }));
+  },
+
+  createElement: function(){
+    return _V_.createElement("div", {
+      className: "vjs-controls"
+    });
+  },
+
+  fadeIn: function(){
+    this._super();
+    this.player.triggerEvent("controlsvisible");
+  },
+
+  fadeOut: function(){
+    this._super();
+    this.player.triggerEvent("controlshidden");
+  }
+});
+
+/* Time
+================================================================================ */
+_V_.CurrentTimeDisplay = _V_.Component.extend({
+
+  init: function(player, options){
+    this._super(player, options);
+
+    player.addEvent("timeupdate", _V_.proxy(this, this.updateContent));
+  },
+
+  createElement: function(){
+    var el = this._super("div", {
+      className: "vjs-current-time vjs-time-controls vjs-control"
+    });
+
+    this.content = _V_.createElement("div", {
+      className: "vjs-current-time-display",
+      innerHTML: '0:00'
+    });
+
+    el.appendChild(_V_.createElement("div").appendChild(this.content));
+    return el;
+  },
+
+  updateContent: function(){
+    // Allows for smooth scrubbing, when player can't keep up.
+    var time = (this.player.scrubbing) ? this.player.values.currentTime : this.player.currentTime();
+    this.content.innerHTML = _V_.formatTime(time, this.player.duration());
+  }
+
+});
+
+_V_.DurationDisplay = _V_.Component.extend({
+
+  init: function(player, options){
+    this._super(player, options);
+
+    player.addEvent("timeupdate", _V_.proxy(this, this.updateContent));
+  },
+
+  createElement: function(){
+    var el = this._super("div", {
+      className: "vjs-duration vjs-time-controls vjs-control"
+    });
+
+    this.content = _V_.createElement("div", {
+      className: "vjs-duration-display",
+      innerHTML: '0:00'
+    });
+
+    el.appendChild(_V_.createElement("div").appendChild(this.content));
+    return el;
+  },
+
+  updateContent: function(){
+    if (this.player.duration()) { this.content.innerHTML = _V_.formatTime(this.player.duration()); }
+  }
+
+});
+
+// Time Separator (Not used in main skin, but still available, and could be used as a 'spare element')
+_V_.TimeDivider = _V_.Component.extend({
+
+  createElement: function(){
+    return this._super("div", {
+      className: "vjs-time-divider",
+      innerHTML: '<div><span>/</span></div>'
+    });
+  }
+
+});
+
+_V_.RemainingTimeDisplay = _V_.Component.extend({
+
+  init: function(player, options){
+    this._super(player, options);
+
+    player.addEvent("timeupdate", _V_.proxy(this, this.updateContent));
+  },
+
+  createElement: function(){
+    var el = this._super("div", {
+      className: "vjs-remaining-time vjs-time-controls vjs-control"
+    });
+
+    this.content = _V_.createElement("div", {
+      className: "vjs-remaining-time-display",
+      innerHTML: '-0:00'
+    });
+
+    el.appendChild(_V_.createElement("div").appendChild(this.content));
+    return el;
+  },
+
+  updateContent: function(){
+    if (this.player.duration()) { this.content.innerHTML = "-"+_V_.formatTime(this.player.remainingTime()); }
+
+    // Allows for smooth scrubbing, when player can't keep up.
+    // var time = (this.player.scrubbing) ? this.player.values.currentTime : this.player.currentTime();
+    // this.content.innerHTML = _V_.formatTime(time, this.player.duration());
+  }
+
+});
+
+/* Slider - Parent for seek bar and volume slider
+================================================================================ */
+_V_.Slider = _V_.Component.extend({
+
+  init: function(player, options){
+    this._super(player, options);
+
+    player.addEvent(this.playerEvent, _V_.proxy(this, this.update));
+
+    this.addEvent("mousedown", this.onMouseDown);
+    this.addEvent("focus", this.onFocus);
+    this.addEvent("blur", this.onBlur);
+
+    this.player.addEvent("controlsvisible", this.proxy(this.update));
+
+    // This is actually to fix the volume handle position. http://twitter.com/#!/gerritvanaaken/status/159046254519787520
+    // this.player.one("timeupdate", this.proxy(this.update));
+
+    this.update();
+  },
+
+  createElement: function(type, attrs) {
+    attrs = _V_.merge({
+      role: "slider",
+      "aria-valuenow": 0,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      tabIndex: 0
+    }, attrs);
+
+    return this._super(type, attrs);
+  },
+
+  onMouseDown: function(event){
+    event.preventDefault();
+    _V_.blockTextSelection();
+
+    _V_.addEvent(document, "mousemove", _V_.proxy(this, this.onMouseMove));
+    _V_.addEvent(document, "mouseup", _V_.proxy(this, this.onMouseUp));
+
+    this.onMouseMove(event);
+  },
+
+  onMouseUp: function(event) {
+    _V_.unblockTextSelection();
+    _V_.removeEvent(document, "mousemove", this.onMouseMove, false);
+    _V_.removeEvent(document, "mouseup", this.onMouseUp, false);
+
+    this.update();
+  },
+
+  update: function(){
+    // If scrubbing, we could use a cached value to make the handle keep up with the user's mouse.
+    // On HTML5 browsers scrubbing is really smooth, but some flash players are slow, so we might want to utilize this later.
+    // var progress =  (this.player.scrubbing) ? this.player.values.currentTime / this.player.duration() : this.player.currentTime() / this.player.duration();
+
+    var barProgress,
+        progress = this.getPercent();
+        handle = this.handle,
+        bar = this.bar;
+
+    // Protect against no duration and other division issues
+    if (isNaN(progress)) { progress = 0; }
+
+    barProgress = progress;
+
+    // If there is a handle, we need to account for the handle in our calculation for progress bar
+    // so that it doesn't fall short of or extend past the handle.
+    if (handle) {
+
+      var box = this.el,
+          boxWidth = box.offsetWidth,
+
+          handleWidth = handle.el.offsetWidth,
+
+          // The width of the handle in percent of the containing box
+          // In IE, widths may not be ready yet causing NaN
+          handlePercent = (handleWidth) ? handleWidth / boxWidth : 0,
+
+          // Get the adjusted size of the box, considering that the handle's center never touches the left or right side.
+          // There is a margin of half the handle's width on both sides.
+          boxAdjustedPercent = 1 - handlePercent;
+
+          // Adjust the progress that we'll use to set widths to the new adjusted box width
+          adjustedProgress = progress * boxAdjustedPercent,
+
+          // The bar does reach the left side, so we need to account for this in the bar's width
+          barProgress = adjustedProgress + (handlePercent / 2);
+
+      // Move the handle from the left based on the adjected progress
+      handle.el.style.left = _V_.round(adjustedProgress * 100, 2) + "%";
+    }
+
+    // Set the new bar width
+    bar.el.style.width = _V_.round(barProgress * 100, 2) + "%";
+  },
+
+  calculateDistance: function(event){
+    var box = this.el,
+        boxX = _V_.findPosX(box),
+        boxW = box.offsetWidth,
+        handle = this.handle;
+
+    if (handle) {
+      var handleW = handle.el.offsetWidth;
+
+      // Adjusted X and Width, so handle doesn't go outside the bar
+      boxX = boxX + (handleW / 2);
+      boxW = boxW - handleW;
+    }
+
+    // Percent that the click is through the adjusted area
+    return Math.max(0, Math.min(1, (event.pageX - boxX) / boxW));
+  },
+
+  onFocus: function(event){
+    _V_.addEvent(document, "keyup", _V_.proxy(this, this.onKeyPress));
+  },
+
+  onKeyPress: function(event){
+    if (event.which == 37) { // Left Arrow
+      event.preventDefault();
+      this.stepBack();
+    } else if (event.which == 39) { // Right Arrow
+      event.preventDefault();
+      this.stepForward();
+    }
+  },
+
+  onBlur: function(event){
+    _V_.removeEvent(document, "keyup", _V_.proxy(this, this.onKeyPress));
+  }
+});
+
+
+/* Progress
+================================================================================ */
+
+// Progress Control: Seek, Load Progress, and Play Progress
+_V_.ProgressControl = _V_.Component.extend({
+
+  options: {
+    components: {
+      "seekBar": {}
+    }
+  },
+
+  createElement: function(){
+    return this._super("div", {
+      className: "vjs-progress-control vjs-control"
+    });
+  }
+
+});
+
+// Seek Bar and holder for the progress bars
+_V_.SeekBar = _V_.Slider.extend({
+
+  options: {
+    components: {
+      "loadProgressBar": {},
+
+      // Set property names to bar and handle to match with the parent Slider class is looking for
+      "bar": { componentClass: "PlayProgressBar" },
+      "handle": { componentClass: "SeekHandle" }
+    }
+  },
+
+  playerEvent: "timeupdate",
+
+  init: function(player, options){
+    this._super(player, options);
+  },
+
+  createElement: function(){
+    return this._super("div", {
+      className: "vjs-progress-holder"
+    });
+  },
+
+  getPercent: function(){
+    return this.player.currentTime() / this.player.duration();
+  },
+
+  onMouseDown: function(event){
+    this._super(event);
+
+    this.player.scrubbing = true;
+
+    this.videoWasPlaying = !this.player.paused();
+    this.player.pause();
+  },
+
+  onMouseMove: function(event){
+    var newTime = this.calculateDistance(event) * this.player.duration();
+
+    // Don't let video end while scrubbing.
+    if (newTime == this.player.duration()) { newTime = newTime - 0.1; }
+
+    // Set new time (tell player to seek to new time)
+    this.player.currentTime(newTime);
+  },
+
+  onMouseUp: function(event){
+    this._super(event);
+
+    this.player.scrubbing = false;
+    if (this.videoWasPlaying) {
+      this.player.play();
+    }
+  },
+
+  stepForward: function(){
+    this.player.currentTime(this.player.currentTime() + 1);
+  },
+
+  stepBack: function(){
+    this.player.currentTime(this.player.currentTime() - 1);
+  }
+
+});
+
+// Load Progress Bar
+_V_.LoadProgressBar = _V_.Component.extend({
+
+  init: function(player, options){
+    this._super(player, options);
+    player.addEvent("progress", _V_.proxy(this, this.update));
+  },
+
+  createElement: function(){
+    return this._super("div", {
+      className: "vjs-load-progress",
+      innerHTML: '<span class="vjs-control-text">Loaded: 0%</span>'
+    });
+  },
+
+  update: function(){
+    if (this.el.style) { this.el.style.width = _V_.round(this.player.bufferedPercent() * 100, 2) + "%"; }
+  }
+
+});
+
+// Play Progress Bar
+_V_.PlayProgressBar = _V_.Component.extend({
+
+  createElement: function(){
+    return this._super("div", {
+      className: "vjs-play-progress",
+      innerHTML: '<span class="vjs-control-text">Progress: 0%</span>'
+    });
+  }
+
+});
+
+// Seek Handle
+// SeekBar Behavior includes play progress bar, and seek handle
+// Needed so it can determine seek position based on handle position/size
+_V_.SeekHandle = _V_.Component.extend({
+
+  createElement: function(){
+    return this._super("div", {
+      className: "vjs-seek-handle",
+      innerHTML: '<span class="vjs-control-text">00:00</span>'
+    });
+  }
+
+});
+
+/* Volume Scrubber
+================================================================================ */
+// Progress Control: Seek, Load Progress, and Play Progress
+_V_.VolumeControl = _V_.Component.extend({
+
+  options: {
+    components: {
+      "volumeBar": {}
+    }
+  },
+
+  createElement: function(){
+    return this._super("div", {
+      className: "vjs-volume-control vjs-control"
+    });
+  }
+
+});
+
+_V_.VolumeBar = _V_.Slider.extend({
+
+  options: {
+    components: {
+      "bar": { componentClass: "VolumeLevel" },
+      "handle": { componentClass: "VolumeHandle" }
+    }
+  },
+
+  playerEvent: "volumechange",
+
+  createElement: function(){
+    return this._super("div", {
+      className: "vjs-volume-bar"
+    });
+  },
+
+  onMouseMove: function(event) {
+    this.player.volume(this.calculateDistance(event));
+  },
+
+  getPercent: function(){
+   return this.player.volume();
+  },
+
+  stepForward: function(){
+    this.player.volume(this.player.volume() + 0.1);
+  },
+
+  stepBack: function(){
+    this.player.volume(this.player.volume() - 0.1);
+  }
+});
+
+_V_.VolumeLevel = _V_.Component.extend({
+
+  createElement: function(){
+    return this._super("div", {
+      className: "vjs-volume-level",
+      innerHTML: '<span class="vjs-control-text"></span>'
+    });
+  }
+
+});
+
+_V_.VolumeHandle = _V_.Component.extend({
+
+  createElement: function(){
+    return this._super("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
+    });
+  }
+
+});
+
+_V_.MuteToggle = _V_.Button.extend({
+
+  init: function(player, options){
+    this._super(player, options);
+
+    player.addEvent("volumechange", _V_.proxy(this, this.update));
+  },
+
+  createElement: function(){
+    return this._super("div", {
+      className: "vjs-mute-control vjs-control",
+      innerHTML: '<div><span class="vjs-control-text">Mute</span></div>'
+    });
+  },
+
+  onClick: function(event){
+    this.player.muted( this.player.muted() ? false : true );
+  },
+
+  update: function(event){
+    var vol = this.player.volume(),
+        level = 3;
+
+    if (vol == 0 || this.player.muted()) {
+      level = 0;
+    } else if (vol < 0.33) {
+      level = 1;
+    } else if (vol < 0.67) {
+      level = 2;
+    }
+
+    /* TODO improve muted icon classes */
+    _V_.each.call(this, [0,1,2,3], function(i){
+      _V_.removeClass(this.el, "vjs-vol-"+i);
+    });
+    _V_.addClass(this.el, "vjs-vol-"+level);
+  }
+
+});
+
+
+/* Poster Image
+================================================================================ */
+_V_.Poster = _V_.Button.extend({
+  init: function(player, options){
+    this._super(player, options);
+
+    if (!this.player.options.poster) {
+      this.hide();
+    }
+
+    player.addEvent("play", _V_.proxy(this, this.hide));
+  },
+
+  createElement: function(){
+    return _V_.createElement("img", {
+      className: "vjs-poster",
+      src: this.player.options.poster,
+
+      // Don't want poster to be tabbable.
+      tabIndex: -1
+    });
+  },
+
+  onClick: function(){
+    this.player.play();
+  }
+});
+
+
+/* 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.
+
+// Base class for all track displays. Should not be instantiated on its own.
+_V_.TextTrackDisplay = _V_.Component.extend({
+
+  init: function(player, options){
+    this._super(player, options);
+
+    player.addEvent(this.trackType + "update", _V_.proxy(this, this.update));
+  },
+
+  createElement: function(){
+    return this._super("div", {
+      className: "vjs-" + this.trackType
+    });
+  },
+
+  update: function(){
+    this.el.innerHTML = this.player.textTrackValue(this.trackType);
+  }
+
+});
+
+_V_.SubtitlesDisplay = _V_.TextTrackDisplay.extend({
+
+  trackType: "subtitles"
+
+});
+
+_V_.CaptionsDisplay = _V_.TextTrackDisplay.extend({
+
+  trackType: "captions"
+
+});
+
+_V_.ChaptersDisplay = _V_.TextTrackDisplay.extend({
+
+  trackType: "chapters"
+
+});
+
+_V_.DescriptionsDisplay = _V_.TextTrackDisplay.extend({
+
+  trackType: "descriptions"
+
+});

src/core.js

@@ -0,0 +1,166 @@
+// HTML5 Shiv. Must be in <head> to support older browsers.
+document.createElement("video");document.createElement("audio");
+
+var VideoJS = function(id, addOptions, ready){
+  var tag; // Element of ID
+
+  // Allow for element or ID to be passed in
+  // String ID
+  if (typeof id == "string") {
+
+    // Adjust for jQuery ID syntax
+    if (id.indexOf("#") === 0) {
+      id = id.slice(1);
+    }
+
+    // If a player instance has already been created for this ID return it.
+    if (_V_.players[id]) {
+      return _V_.players[id];
+
+    // Otherwise get element for ID
+    } else {
+      tag = _V_.el(id)
+    }
+
+  // ID is a media element
+  } else {
+    tag = id;
+  }
+
+  // Check for a useable element
+  if (!tag || !tag.nodeName) { // re: nodeName, could be a box div also
+    throw new TypeError("The element or ID supplied is not valid. (VideoJS)"); // Returns
+  }
+
+  // Element may have a player attr referring to an already created player instance.
+  // If not, set up a new player and return the instance.
+  return tag.player || new _V_.Player(tag, addOptions, ready);
+},
+
+// Shortcut
+_V_ = VideoJS,
+
+// CDN Version. Used to target right flash swf.
+CDN_VERSION = "GENERATED_CDN_VSN";
+
+VideoJS.players = {};
+
+VideoJS.options = {
+
+  // Default order of fallback technology
+  techOrder: ["html5","flash"],
+  // techOrder: ["flash","html5"],
+
+  html5: {},
+  flash: { swf: "http://vjs.zencdn.net/c/video-js.swf" },
+
+  // Default of web browser is 300x150. Should rely on source width/height.
+  width: "auto",
+  height: "auto",
+  
+  // defaultVolume: 0.85,
+  defaultVolume: 0.00, // The freakin seaguls are driving me crazy!
+
+  // Included control sets
+  components: {
+    "poster": {},
+    "loadingSpinner": {},
+    "bigPlayButton": {},
+    "controlBar": {},
+    "subtitlesDisplay": {}
+  }
+
+  // components: [
+  //   "poster",
+  //   "loadingSpinner",
+  //   "bigPlayButton",
+  //   { name: "controlBar", options: {
+  //     components: [
+  //       "playToggle",
+  //       "fullscreenToggle",
+  //       "currentTimeDisplay",
+  //       "timeDivider",
+  //       "durationDisplay",
+  //       "remainingTimeDisplay",
+  //       { name: "progressControl", options: {
+  //         components: [
+  //           { name: "seekBar", options: {
+  //             components: [
+  //               "loadProgressBar",
+  //               "playProgressBar",
+  //               "seekHandle"
+  //             ]}
+  //           }
+  //         ]}
+  //       },
+  //       { name: "volumeControl", options: {
+  //         components: [
+  //           { name: "volumeBar", options: {
+  //             components: [
+  //               "volumeLevel",
+  //               "volumeHandle"
+  //             ]}
+  //           }
+  //         ]}
+  //       },
+  //       "muteToggle"
+  //     ]
+  //   }},
+  //   "subtitlesDisplay"/*, "replay"*/
+  // ]
+};
+
+// Set CDN Version of swf
+if (CDN_VERSION != "GENERATED_CDN_VSN") {
+  _V_.options.flash.swf = "http://vjs.zencdn.net/"+CDN_VERSION+"/video-js.swf"
+}
+
+// Automatically set up any tags that have a data-setup attribute
+_V_.autoSetup = function(){
+  var options, vid, player,
+      vids = document.getElementsByTagName("video");
+
+  // Check if any media elements exist
+  if (vids && vids.length > 0) {
+
+    for (var i=0,j=vids.length; i<j; i++) {
+      vid = vids[i];
+
+      // Check if element exists, has getAttribute func.
+      // IE seems to consider typeof el.getAttribute == "object" instead of "function" like expected, at least when loading the player immediately.
+      if (vid && vid.getAttribute) {
+
+        // Make sure this player hasn't already been set up.
+        if (vid.player === undefined) {
+          options = vid.getAttribute("data-setup");
+
+          // Check if data-setup attr exists. 
+          // We only auto-setup if they've added the data-setup attr.
+          if (options !== null) {
+
+            // Parse options JSON
+            // If empty string, make it a parsable json object.
+            options = JSON.parse(options || "{}");
+
+            // Create new video.js instance.
+            player = _V_(vid, options);
+          }
+        }
+
+      // If getAttribute isn't defined, we need to wait for the DOM.
+      } else {
+        _V_.autoSetupTimeout(1);
+        break;
+      }
+    }
+
+  // No videos were found, so keep looping unless page is finisehd loading.
+  } else if (!_V_.windowLoaded) {
+    _V_.autoSetupTimeout(1);
+  }
+};
+
+// Pause to let the DOM keep processing
+_V_.autoSetupTimeout = function(wait){
+  setTimeout(_V_.autoSetup, wait);
+};

src/events.js

@@ -1,4 +1,4 @@
-// Event System (J.Resig - Secrets of a JS Ninja http://jsninja.com/ [Go buy it, really])
+// Event System (J.Resig - Secrets of a JS Ninja http://jsninja.com/ [Go read 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
@@ -26,8 +26,15 @@ _V_.extend({
         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
+          
+          // Copy handlers so if handlers are added/removed during the process it doesn't throw everything off.
+          var handlersCopy = [];
+          _V_.each(handlers, function(handler, i){
+            handlersCopy[i] = handler;
+          })
+          
+          for (var i = 0, l = handlersCopy.length; i < l; i++) {
+            handlersCopy[i].call(elem, event);
           }
         }
       };
@@ -219,6 +226,13 @@ _V_.extend({
     //     }
     //   }
     // }
+  },
+  
+  one: function(elem, type, fn) {
+    _V_.addEvent(elem, type, function(){
+      _V_.removeEvent(elem, type, arguments.callee)
+      fn.apply(this, arguments);
+    });
   }
 });
 
@@ -281,7 +295,8 @@ _V_.Event.prototype = {
   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(" ");
+_V_.Event.props = "altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode 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; }
+

src/lib.js

@@ -1,4 +1,7 @@
 _V_.merge = function(obj1, obj2, safe){
+  // Make sure second object exists
+  if (!obj2) { obj2 = {}; };
+
   for (var attrname in obj2){
     if (obj2.hasOwnProperty(attrname) && (!safe || !obj1.hasOwnProperty(attrname))) { obj1[attrname]=obj2[attrname]; }
   }
@@ -10,21 +13,9 @@ _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"; },
+  isFF: function(){ return !!_V_.ua.match("Firefox") },
   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(); },
@@ -37,7 +28,10 @@ _V_.extend({
     var match = navigator.userAgent.match(/Android (\d+)\./i);
     if (match && match[1]) { return match[1]; }
   },
-  //isAndroidBrowser
+
+  testVid: document.createElement("video"),
+  ua: navigator.userAgent,
+  support: {},
 
   each: function(arr, fn){
     if (!arr || arr.length === 0) { return; }
@@ -46,6 +40,15 @@ _V_.extend({
     }
   },
 
+  eachProp: function(obj, fn){
+    if (!obj) { return; }
+    for (var name in obj) {
+      if (obj.hasOwnProperty(name)) {
+        fn.call(this, name, obj[name]);
+      }
+    }
+  },
+
   el: function(id){ return document.getElementById(id); },
   createElement: function(tagName, attributes){
     var el = document.createElement(tagName),
@@ -61,18 +64,21 @@ _V_.extend({
     }
     return el;
   },
+
   insertFirst: function(node, parent){
     if (parent.firstChild) {
-      parent.insertBefore(parent.firstChild, node);
+      parent.insertBefore(node, parent.firstChild);
     } else {
       parent.appendChild(node);
     }
   },
+
   addClass: function(element, classToAdd){
     if ((" "+element.className+" ").indexOf(" "+classToAdd+" ") == -1) {
       element.className = element.className === "" ? classToAdd : element.className + " " + classToAdd;
     }
   },
+
   removeClass: function(element, classToRemove){
     if (element.className.indexOf(classToRemove) == -1) { return; }
     var classNames = element.className.split(" ");
@@ -119,18 +125,15 @@ _V_.extend({
     return h + m + s;
   },
 
+  capitalize: function(string){
+    return string.charAt(0).toUpperCase() + string.slice(1);
+  },
+
   // 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 - _V_.findPosX(relativeElement)) / relativeElement.offsetWidth));
   },
-  // Get an objects position on the page
-  findPosX: function(obj) {
-    var curleft = obj.offsetLeft;
-    while(obj = obj.offsetParent) {
-      curleft += obj.offsetLeft;
-    }
-    return curleft;
-  },
+  
   getComputedStyleValue: function(element, style){
     return window.getComputedStyle(element, null).getPropertyValue(style);
   },
@@ -232,7 +235,7 @@ _V_.extend({
     try {
       request.open("GET", url);
     } catch(e) {
-      _V_.log(e);
+      _V_.log("VideoJS XMLHttpRequest (open)", e);
       // onError(e);
       return false;
     }
@@ -242,7 +245,9 @@ _V_.extend({
         if (request.status == 200 || local && request.status == 0) {
           onSuccess(request.responseText);
         } else {
-          onError();
+          if (onError) {
+            onError();
+          }
         }
       }
     });
@@ -250,19 +255,81 @@ _V_.extend({
     try {
       request.send();
     } catch(e) {
-      _V_.log(e);
-      onError(e);
+      _V_.log("VideoJS XMLHttpRequest (send)", e);
+      if (onError) {
+        onError(e);
+      }
+    }
+  },
+
+  /* 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
+        _V_.log("LocalStorage Full (VideoJS)", e);
+      } else {
+        _V_.log("LocalStorage Error (VideoJS)", e);
+      }
     }
   }
 
 });
 
-// /* 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;
-// };
+// 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={};}})());
+
+// Offset Left
+// getBoundingClientRect technique from John Resig http://ejohn.org/blog/getboundingclientrect-is-awesome/
+if ("getBoundingClientRect" in document.documentElement) {
+  _V_.findPosX = function(el) {
+    var box;
+
+    try {
+      box = el.getBoundingClientRect();
+    } catch(e) {}
+
+    if (!box) { return 0; }
+
+    var docEl = document.documentElement,
+        body = document.body,
+        clientLeft = docEl.clientLeft || body.clientLeft || 0,
+        scrollLeft = window.pageXOffset || body.scrollLeft,
+        left = box.left + scrollLeft - clientLeft;
+
+    return left;
+  };
+} else {
+  _V_.findPosX = function(el) {
+    var curleft = el.offsetLeft;
+    // _V_.log(obj.className, obj.offsetLeft)
+    while(el = obj.offsetParent) {
+      if (el.className.indexOf("video-js") == -1) {
+        // _V_.log(el.offsetParent, "OFFSETLEFT", el.offsetLeft)
+        // _V_.log("-webkit-full-screen", el.webkitMatchesSelector("-webkit-full-screen"));
+        // _V_.log("-webkit-full-screen", el.querySelectorAll(".video-js:-webkit-full-screen"));
+      } else {
+      }
+      curleft += el.offsetLeft;
+    }
+    return curleft;
+  };
+}

src/player.js

@@ -0,0 +1,782 @@
+/* UI Component- Base class for all UI objects
+================================================================================ */
+_V_.Player = _V_.Component.extend({
+
+  init: function(tag, addOptions, ready){
+
+    this.tag = tag; // Store the original tag used to set options
+
+    var el = this.el = _V_.createElement("div"), // Div to contain video and controls
+        options = this.options = {},
+        width = options.width = tag.getAttribute('width'),
+        height = options.height = tag.getAttribute('height'),
+
+        // Browsers default to 300x150 if there's no width/height or video size data.
+        initWidth = width || 300,
+        initHeight = height || 150;
+
+    // Make player findable on elements
+    tag.player = el.player = this;
+
+    // Add callback to ready queue
+    this.ready(ready);
+
+    // Wrap video tag in div (el/box) container
+    tag.parentNode.insertBefore(el, tag);
+    el.appendChild(tag); // Breaks iPhone, fixed in HTML5 setup.
+
+    // Give video tag properties to box
+    el.id = this.id = tag.id; // ID will now reference box, not the video tag
+    el.className = tag.className;
+    // Update tag id/class for use as HTML5 playback tech
+    tag.id += "_html5_api";
+    tag.className = "vjs-tech";
+
+    // Make player easily findable by ID
+    _V_.players[el.id] = this;
+
+    // Make box use width/height of tag, or default 300x150
+    el.setAttribute("width", initWidth);
+    el.setAttribute("height", initHeight);
+    // Enforce with CSS since width/height attrs don't work on divs
+    el.style.width = initWidth+"px";
+    el.style.height = initHeight+"px";
+    // Remove width/height attrs from tag so CSS can make it 100% width/height
+    tag.removeAttribute("width");
+    tag.removeAttribute("height");
+
+    // Set Options
+    _V_.merge(options, _V_.options); // Copy Global Defaults
+    _V_.merge(options, this.getVideoTagSettings()); // Override with Video Tag Options
+    _V_.merge(options, addOptions); // Override/extend with options from setup call
+
+    // Store controls setting, and then remove immediately so native controls don't flash.
+    tag.removeAttribute("controls");
+
+    // Poster will be handled by a manual <img>
+    tag.removeAttribute("poster");
+
+    // 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]);
+        }
+      }
+    }
+
+    // Holder for playback tech components
+    this.techs = {};
+
+    // Cache for video property values.
+    this.values = {};
+
+    this.addClass("vjs-paused");
+
+    this.addEvent("ended", this.onEnded);
+    this.addEvent("play", this.onPlay);
+    this.addEvent("pause", this.onPause);
+    this.addEvent("error", this.onError);
+
+    // When the API is ready, loop through the components and add to the player.
+    if (options.controls) {
+      this.ready(function(){
+        this.initComponents();
+      });
+    }
+
+    // If there are no sources when the player is initialized,
+    // load the first supported playback technology.
+    if (!options.sources || options.sources.length == 0) {
+      for (var i=0,j=options.techOrder; i<j.length; i++) {
+        var techName = j[i],
+            tech = _V_[techName];
+
+        // Check if the browser supports this technology
+        if (tech.isSupported()) {
+          this.loadTech(techName);
+          break;
+        }
+      }
+    } else {
+      // Loop through playback technologies (HTML5, Flash) and check for support
+      // Then load the best source.
+      this.src(options.sources);
+    }
+  },
+
+  // Cache for video property values.
+  values: {},
+
+  destroy: function(){
+    // Ensure that tracking progress and time progress will stop and plater deleted
+    this.stopTrackingProgress();
+    this.stopTrackingCurrentTime();
+    delete _V_.players[this.id]
+  },
+
+  createElement: function(type, options){
+
+  },
+
+  getVideoTagSettings: function(){
+    var options = {
+      sources: [],
+      tracks: []
+    };
+
+    options.src = this.tag.getAttribute("src");
+    options.controls = this.tag.getAttribute("controls") !== null;
+    options.poster = this.tag.getAttribute("poster");
+    options.preload = this.tag.getAttribute("preload");
+    options.autoplay = this.tag.getAttribute("autoplay") !== null; // hasAttribute not IE <8 compatible
+    options.loop = this.tag.getAttribute("loop") !== null;
+    options.muted = this.tag.getAttribute("muted") !== null;
+
+    if (this.tag.hasChildNodes()) {
+      for (var c,i=0,j=this.tag.childNodes;i<j.length;i++) {
+        c = j[i];
+        if (c.nodeName == "SOURCE") {
+          options.sources.push({
+            src: c.getAttribute('src'),
+            type: c.getAttribute('type'),
+            media: c.getAttribute('media'),
+            title: c.getAttribute('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)
+  ================================================================================ */
+  // Load/Create an instance of playback technlogy including element and API methods
+  // And append playback element in player div.
+  loadTech: function(techName, source){
+
+    // Pause and remove current playback technology
+    if (this.tech) {
+      this.unloadTech();
+
+    // 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 (techName != "html5" && this.tag) {
+      this.el.removeChild(this.tag);
+      this.tag = false;
+    }
+
+    this.techName = techName;
+
+    // Turn off API access because we're loading a new tech that might load asynchronously
+    this.isReady = false;
+
+    var techReady = function(){
+      this.player.triggerReady();
+
+      // Manually track progress in cases where the browser/flash player doesn't report it.
+      if (!this.support.progressEvent) {
+        this.player.manualProgressOn();
+      }
+
+      // Manually track timeudpates in cases where the browser/flash player doesn't report it.
+      if (!this.support.timeupdateEvent) {
+        this.player.manualTimeUpdatesOn();
+      }
+    }
+
+    // Grab tech-specific options from player options and add source and parent element to use.
+    var techOptions = _V_.merge({ source: source, parentEl: this.el }, this.options[techName])
+
+    if (source) {
+      if (source.src == this.values.src && this.values.currentTime > 0) {
+        techOptions.startTime = this.values.currentTime;
+      }
+
+      this.values.src = source.src;
+    }
+
+    // Initialize tech instance
+    this.tech = new _V_[techName](this, techOptions);
+    this.tech.ready(techReady);
+  },
+
+  unloadTech: function(){
+    this.tech.destroy();
+
+    // Turn off any manual progress or timeupdate tracking
+    if (this.manualProgress) { this.manualProgressOff(); }
+
+    if (this.manualTimeUpdates) { this.manualTimeUpdatesOff(); }
+
+    this.tech = false;
+  },
+
+  // There's many issues around changing the size of a Flash (or other plugin) object.
+  // First is a plugin reload issue in Firefox that has been around for 11 years: https://bugzilla.mozilla.org/show_bug.cgi?id=90268
+  // Then with the new fullscreen API, Mozilla and webkit browsers will reload the flash object after going to fullscreen.
+  // To get around this, we're unloading the tech, caching source and currentTime values, and reloading the tech once the plugin is resized.
+  // reloadTech: function(betweenFn){
+  //   _V_.log("unloadingTech")
+  //   this.unloadTech();
+  //   _V_.log("unloadedTech")
+  //   if (betweenFn) { betweenFn.call(); }
+  //   _V_.log("LoadingTech")
+  //   this.loadTech(this.techName, { src: this.values.src })
+  //   _V_.log("loadedTech")
+  // },
+
+  /* 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.trackProgress();
+
+    // Watch for a native progress event call on the tech element
+    // In HTML5, some older versions don't support the progress event
+    // So we're assuming they don't, and turning off manual progress if they do.
+    this.tech.addEvent("progress", function(){
+
+      // Remove this listener from the element
+      this.removeEvent("progress", arguments.callee);
+
+      // Update known progress support for this playback technology
+      this.support.progressEvent = true;
+
+      // Turn off manual progress tracking
+      this.player.manualProgressOff();
+    });
+  },
+
+  manualProgressOff: function(){
+    this.manualProgress = false;
+    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
+
+    // Watch for native timeupdate event
+    this.tech.addEvent("timeupdate", function(){
+
+      // Remove this listener from the element
+      this.removeEvent("timeupdate", arguments.callee);
+
+      // Update known progress support for this playback technology
+      this.support.timeupdateEvent = true;
+
+      // Turn off manual progress tracking
+      this.player.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)
+  ================================================================================ */
+  onEnded: function(){
+    if (this.options.loop) {
+      this.currentTime(0);
+      this.play();
+    } else {
+      this.pause();
+      this.currentTime(0);
+      this.pause();
+    }
+  },
+
+  onPlay: function(){
+    _V_.removeClass(this.el, "vjs-paused");
+    _V_.addClass(this.el, "vjs-playing");
+  },
+
+  onPause: function(){
+    _V_.removeClass(this.el, "vjs-playing");
+    _V_.addClass(this.el, "vjs-paused");
+  },
+
+  onError: function(e) {
+    _V_.log("Video Error", e);
+  },
+
+/* Player API
+================================================================================ */
+
+  apiCall: function(method, arg){
+    if (this.isReady) {
+      return this.tech[method](arg);
+    } else {
+      _V_.log("The playback technology API is not ready yet. Use player.ready(myFunction)."+" ["+method+"]", arguments.callee.caller.arguments.callee.caller.arguments.callee.caller)
+      return false;
+      // throw new Error("The playback technology API is not ready yet. Use player.ready(myFunction)."+" ["+method+"]");
+    }
+  },
+
+  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) {
+
+      // Cache the last set value for smoother scrubbing.
+      this.values.lastSetCurrentTime = seconds;
+
+      this.apiCall("setCurrentTime", seconds);
+
+      if (this.manualTimeUpdates) {
+        this.triggerEvent("timeupdate");
+      }
+      return this;
+    }
+
+    // Cache last currentTime and return
+    return this.values.currentTime = this.apiCall("currentTime");
+  },
+  duration: function(){
+    return this.apiCall("duration");
+  },
+  remainingTime: function(){
+    return this.duration() - this.currentTime();
+  },
+
+  buffered: function(){
+    var buffered = this.apiCall("buffered"),
+        start = 0, end = this.values.bufferEnd = this.values.bufferEnd || 0,
+        timeRange;
+
+    if (buffered && buffered.length > 0 && buffered.end(0) !== end) {
+      end = buffered.end(0);
+      // Storing values allows them be overridden by setBufferedFromProgress
+      this.values.bufferEnd = end;
+    }
+
+    return _V_.createTimeRange(start, end);
+  },
+
+  // Calculates amount of buffer is full
+  bufferedPercent: function(){
+    return (this.duration()) ? this.buffered().end(0) / this.duration() : 0;
+  },
+
+  volume: function(percentAsDecimal){
+    if (percentAsDecimal !== undefined) {
+      var vol = Math.max(0, Math.min(1, parseFloat(percentAsDecimal))); // Force value to between 0 and 1
+      this.values.volume = vol;
+      this.apiCall("setVolume", vol);
+      _V_.setLocalStorage("volume", vol);
+      return this;
+    }
+    // if (this.values.volume) { return this.values.volume; }
+    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.el.width = width;
+      this.el.style.width = width+"px";
+      if (!skipListeners) { this.triggerEvent("resize"); }
+      return this;
+    }
+    return parseInt(this.el.getAttribute("width"));
+  },
+  height: function(height){
+    if (height !== undefined) {
+      this.el.height = height;
+      this.el.style.height = height+"px";
+      this.triggerEvent("resize");
+      return this;
+    }
+    return parseInt(this.el.getAttribute("height"));
+  },
+  size: function(width, height){
+    // Skip resize listeners on width for optimization
+    return this.width(width, true).height(height);
+  },
+
+  supportsFullScreen: function(){ return this.apiCall("supportsFullScreen"); },
+
+  // Turn on fullscreen (or window) mode
+  requestFullScreen: function(){
+    var requestFullScreen = _V_.support.requestFullScreen;
+
+    this.isFullScreen = true;
+
+    // Check for browser element fullscreen support
+    if (requestFullScreen) {
+
+      // Flash and other plugins get reloaded when you take their parent to fullscreen.
+      // To fix that we'll remove the tech, and reload it after the resize has finished.
+      if (this.tech.support.fullscreenResize === false && this.options.flash.iFrameMode != true) {
+
+        this.pause();
+        this.unloadTech();
+
+        _V_.addEvent(document, requestFullScreen.eventName, this.proxy(function(){
+          _V_.removeEvent(document, requestFullScreen.eventName, arguments.callee);
+          this.loadTech(this.techName, { src: this.values.src });
+        }));
+
+        this.el[requestFullScreen.requestFn]();
+
+      } else {
+        this.el[requestFullScreen.requestFn]();
+      }
+
+      // In case the user presses escape to exit fullscreen, we need to update fullscreen status
+      _V_.addEvent(document, requestFullScreen.eventName, this.proxy(function(){
+        this.isFullScreen = document[requestFullScreen.isFullScreen];
+      }));
+
+    } else if (this.tech.supportsFullScreen()) {
+      this.apiCall("enterFullScreen");
+
+    } else {
+      this.enterFullWindow();
+    }
+
+     this.triggerEvent("fullscreenchange");
+
+     return this;
+   },
+
+   cancelFullScreen: function(){
+    var requestFullScreen = _V_.support.requestFullScreen;
+
+    // Check for browser element fullscreen support
+    if (requestFullScreen) {
+
+     // Flash and other plugins get reloaded when you take their parent to fullscreen.
+     // To fix that we'll remove the tech, and reload it after the resize has finished.
+     if (this.tech.support.fullscreenResize === false && this.options.flash.iFrameMode != true) {
+
+       this.pause();
+       this.unloadTech();
+
+       _V_.addEvent(document, requestFullScreen.eventName, this.proxy(function(){
+         _V_.removeEvent(document, requestFullScreen.eventName, arguments.callee);
+         this.loadTech(this.techName, { src: this.values.src })
+       }));
+
+       document[requestFullScreen.cancelFn]();
+
+     } else {
+       document[requestFullScreen.cancelFn]();
+     }
+
+    } else if (this.tech.supportsFullScreen()) {
+     this.apiCall("exitFullScreen");
+
+    } else {
+     this.exitFullWindow();
+    }
+
+    this.isFullScreen = false;
+    this.triggerEvent("fullscreenchange");
+
+    return this;
+  },
+
+  enterFullWindow: function(){
+    this.isFullWindow = 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_.addEvent(document, "keydown", _V_.proxy(this, this.fullWindowOnEscKey));
+
+    // Hide any scroll bars
+    document.documentElement.style.overflow = 'hidden';
+
+    // Apply fullscreen styles
+    _V_.addClass(document.body, "vjs-full-window");
+    _V_.addClass(this.el, "vjs-fullscreen");
+
+    this.triggerEvent("enterFullWindow");
+  },
+
+  fullWindowOnEscKey: function(event){
+    if (event.keyCode == 27) {
+      if (this.isFullScreen == true) {
+        this.cancelFullScreen();
+      } else {
+        this.exitFullWindow();
+      }
+    }
+  },
+
+  exitFullWindow: function(){
+    this.isFullWindow = false;
+    _V_.removeEvent(document, "keydown", this.fullWindowOnEscKey);
+
+    // Unhide scroll bars.
+    document.documentElement.style.overflow = this.docOrigOverflow;
+
+    // Remove fullscreen styles
+    _V_.removeClass(document.body, "vjs-full-window");
+    _V_.removeClass(this.el, "vjs-fullscreen");
+
+    // Resize the box, controller, and poster to original sizes
+    // this.positionAll();
+    this.triggerEvent("exitFullWindow");
+  },
+
+  // 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) {
+
+      var sources = source;
+
+      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_[techName];
+            // tech = _V_.tech[techName];
+
+        // Check if the browser supports this technology
+        if (tech.isSupported()) {
+
+          // Loop through each source object
+          for (var a=0,b=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.techName) {
+                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) {
+      if (_V_[this.techName].canPlaySource(source)) {
+        this.src(source.src);
+      } else {
+        // Send through tech loop to check for a compatible technology.
+        this.src([source]);
+      }
+    // Case: URL String (http://myvideo...)
+    } else {
+      // Cache for getting last set source
+      this.values.src = source;
+
+      if (!this.isReady) {
+        this.ready(function(){
+          this.src(source);
+        });
+      } else {
+        this.apiCall("src", source);
+        if (this.options.preload == "auto") {
+          this.load();
+        }
+        if (this.options.autoplay) {
+          this.play();
+        }
+      }
+    }
+    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; },
+  poster: function(){ return this.apiCall("poster"); },
+
+  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"); }
+});
+
+// RequestFullscreen API
+(function(){
+  var requestFn,
+      cancelFn,
+      eventName,
+      isFullScreen,
+      playerProto = _V_.Player.prototype;
+
+  // Current W3C Spec
+  // http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api
+  // Mozilla Draft: https://wiki.mozilla.org/Gecko:FullScreenAPI#fullscreenchange_event
+  if (document.cancelFullscreen !== undefined) {
+    requestFn = "requestFullscreen";
+    cancelFn = "exitFullscreen";
+    eventName = "fullscreenchange";
+    isFullScreen = "fullScreen";
+
+  // Webkit (Chrome/Safari) and Mozilla (Firefox) have working implementaitons
+  // that use prefixes and vary slightly from the new W3C spec. Specifically, using 'exit' instead of 'cancel',
+  // and lowercasing the 'S' in Fullscreen.
+  // Other browsers don't have any hints of which version they might follow yet, so not going to try to predict by loopeing through all prefixes.
+  } else {
+
+    _V_.each(["moz", "webkit"], function(prefix){
+
+      // https://github.com/zencoder/video-js/pull/128
+      if ((prefix != "moz" || document.mozFullScreenEnabled) && document[prefix + "CancelFullScreen"] !== undefined) {
+        requestFn = prefix + "RequestFullScreen";
+        cancelFn = prefix + "CancelFullScreen";
+        eventName = prefix + "fullscreenchange";
+
+        if (prefix == "webkit") {
+          isFullScreen = prefix + "IsFullScreen";
+        } else {
+          _V_.log("moz here")
+          isFullScreen = prefix + "FullScreen";
+        }
+      }
+
+    });
+
+  }
+
+  if (requestFn) {
+    _V_.support.requestFullScreen = {
+      requestFn: requestFn,
+      cancelFn: cancelFn,
+      eventName: eventName,
+      isFullScreen: isFullScreen
+    };
+  }
+
+})();

src/setup.js

@@ -0,0 +1,6 @@
+_V_.addEvent(window, "load", function(){
+  _V_.windowLoaded = true;
+});
+
+// Run Auto-load players
+_V_.autoSetup();

src/tech.js

@@ -0,0 +1,687 @@
+/* Playback Technology - Base class for playback technologies
+================================================================================ */
+_V_.PlaybackTech = _V_.Component.extend({
+  init: function(player, options){
+    // this._super(player, options);
+
+    // Make playback element clickable
+    // _V_.addEvent(this.el, "click", _V_.proxy(this, _V_.PlayToggle.prototype.onClick));
+
+    // this.addEvent("click", this.proxy(this.onClick));
+
+    // player.triggerEvent("techready");
+  },
+  // destroy: function(){},
+  // createElement: function(){},
+  onClick: function(){
+    if (this.player.options.controls) {
+      _V_.PlayToggle.prototype.onClick.call(this);
+    }
+  }
+});
+
+// Create placeholder methods for each that warn when a method isn't supported by the current playback technology
+_V_.apiMethods = "play,pause,paused,currentTime,setCurrentTime,duration,buffered,volume,setVolume,muted,setMuted,width,height,supportsFullScreen,enterFullScreen,src,load,currentSrc,preload,setPreload,autoplay,setAutoplay,loop,setLoop,error,networkState,readyState,seeking,initialTime,startOffsetTime,played,seekable,ended,videoTracks,audioTracks,videoWidth,videoHeight,textTracks,defaultPlaybackRate,playbackRate,mediaGroup,controller,controls,defaultMuted".split(",");
+_V_.each(_V_.apiMethods, function(methodName){
+  _V_.PlaybackTech.prototype[methodName] = function(){
+    throw new Error("The '"+method+"' method is not available on the playback technology's API");
+  }
+});
+
+/* HTML5 Playback Technology - Wrapper for HTML5 Media API
+================================================================================ */
+_V_.html5 = _V_.PlaybackTech.extend({
+
+  init: function(player, options, ready){
+    this.player = player;
+    this.el = this.createElement();
+    this.ready(ready);
+
+    this.addEvent("click", this.proxy(this.onClick));
+
+    var source = options.source;
+
+    // If the element source is already set, we may have missed the loadstart event, and want to trigger it.
+    // We don't want to set the source again and interrupt playback.
+    if (source && this.el.currentSrc == source.src) {
+      player.triggerEvent("loadstart");
+
+    // Otherwise set the source if one was provided.
+    } else if (source) {
+      this.el.src = source.src;
+    }
+
+    // Chrome and Safari both have issues with autoplay.
+    // In Safari (5.1.1), when we move the video element into the container div, autoplay doesn't work.
+    // In Chrome (15), if you have autoplay + a poster + no controls, the video gets hidden (but audio plays)
+    // This fixes both issues. Need to wait for API, so it updates displays correctly
+    player.ready(function(){
+      if (this.options.autoplay && this.paused()) {
+        this.tag.poster = null; // Chrome Fix. Fixed in Chrome v16.
+        this.play();
+      }
+    });
+
+    this.setupTriggers();
+
+    this.triggerReady();
+  },
+
+  destroy: function(){
+    this.player.tag = false;
+    this.removeTriggers();
+    this.el.parentNode.removeChild(this.el);
+  },
+
+  createElement: function(){
+    var html5 = _V_.html5,
+        player = this.player,
+
+        // If possible, reuse original tag for HTML5 playback technology element
+        el = player.tag,
+        newEl;
+
+    // Check if this browser supports moving the element into the box.
+    // On the iPhone video will break if you move the element,
+    // So we have to create a brand new element.
+    if (!el || this.support.movingElementInDOM === false) {
+
+      // If the original tag is still there, remove it.
+      if (el) {
+        player.el.removeChild(el);
+      }
+
+      newEl = _V_.createElement("video", {
+        id: el.id || player.el.id + "_html5_api",
+        className: el.className || "vjs-tech"
+      });
+
+      el = newEl;
+      _V_.insertFirst(el, player.el);
+    }
+
+    // Update tag settings, in case they were overridden
+    _V_.each(["autoplay","preload","loop","muted"], function(attr){ // ,"poster"
+      el[attr] = player.options[attr];
+    }, this);
+
+    return el;
+  },
+
+  // Make video events trigger player events
+  // May seem verbose here, but makes other APIs possible.
+  setupTriggers: function(){
+    _V_.each.call(this, _V_.html5.events, function(type){
+      _V_.addEvent(this.el, type, _V_.proxy(this.player, this.eventHandler));
+    });
+  },
+  removeTriggers: function(){
+    _V_.each.call(this, _V_.html5.events, function(type){
+      _V_.removeEvent(this.el, type, _V_.proxy(this.player, this.eventHandler));
+    });
+  },
+  eventHandler: function(e){
+    e.stopPropagation();
+    this.triggerEvent(e);
+  },
+
+  play: function(){ this.el.play(); },
+  pause: function(){ this.el.pause(); },
+  paused: function(){ return this.el.paused; },
+
+  currentTime: function(){ return this.el.currentTime; },
+  setCurrentTime: function(seconds){
+    try {
+      this.el.currentTime = seconds;
+      } catch(e) {
+        _V_.log(e, "Video isn't ready. (VideoJS)");
+      // this.warning(VideoJS.warnings.videoNotReady);
+    }
+  },
+
+  duration: function(){ return this.el.duration || 0; },
+  buffered: function(){ return this.el.buffered; },
+
+  volume: function(){ return this.el.volume; },
+  setVolume: function(percentAsDecimal){ this.el.volume = percentAsDecimal; },
+  muted: function(){ return this.el.muted; },
+  setMuted: function(muted){ this.el.muted = muted },
+
+  width: function(){ return this.el.offsetWidth; },
+  height: function(){ return this.el.offsetHeight; },
+
+  supportsFullScreen: function(){
+    if (typeof this.el.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.el.webkitEnterFullScreen();
+      } catch (e) {
+        if (e.code == 11) {
+          // this.warning(VideoJS.warnings.videoNotReady);
+          _V_.log("VideoJS: Video not ready.")
+        }
+      }
+  },
+  src: function(src){ this.el.src = src; },
+  load: function(){ this.el.load(); },
+  currentSrc: function(){ return this.el.currentSrc; },
+
+  preload: function(){ return this.el.preload; },
+  setPreload: function(val){ this.el.preload = val; },
+  autoplay: function(){ return this.el.autoplay; },
+  setAutoplay: function(val){ this.el.autoplay = val; },
+  loop: function(){ return this.el.loop; },
+  setLoop: function(val){ this.el.loop = val; },
+
+  error: function(){ return this.el.error; },
+  // networkState: function(){ return this.el.networkState; },
+  // readyState: function(){ return this.el.readyState; },
+  seeking: function(){ return this.el.seeking; },
+  // initialTime: function(){ return this.el.initialTime; },
+  // startOffsetTime: function(){ return this.el.startOffsetTime; },
+  // played: function(){ return this.el.played; },
+  // seekable: function(){ return this.el.seekable; },
+  ended: function(){ return this.el.ended; },
+  // videoTracks: function(){ return this.el.videoTracks; },
+  // audioTracks: function(){ return this.el.audioTracks; },
+  // videoWidth: function(){ return this.el.videoWidth; },
+  // videoHeight: function(){ return this.el.videoHeight; },
+  // textTracks: function(){ return this.el.textTracks; },
+  // defaultPlaybackRate: function(){ return this.el.defaultPlaybackRate; },
+  // playbackRate: function(){ return this.el.playbackRate; },
+  // mediaGroup: function(){ return this.el.mediaGroup; },
+  // controller: function(){ return this.el.controller; },
+  controls: function(){ return this.player.options.controls; },
+  defaultMuted: function(){ return this.el.defaultMuted; }
+});
+
+/* HTML5 Support Testing -------------------------------------------------------- */
+
+_V_.html5.isSupported = function(){
+  return !!document.createElement("video").canPlayType;
+};
+
+_V_.html5.canPlaySource = function(srcObj){
+  return !!document.createElement("video").canPlayType(srcObj.type);
+  // TODO: Check Type
+  // If no Type, check ext
+  // Check Media Type
+};
+
+// List of all HTML5 events (various uses).
+_V_.html5.events = "loadstart,suspend,abort,error,emptied,stalled,loadedmetadata,loadeddata,canplay,canplaythrough,playing,waiting,seeking,seeked,ended,durationchange,timeupdate,progress,play,pause,ratechange,volumechange".split(",");
+
+/* HTML5 Device Fixes ---------------------------------------------------------- */
+
+_V_.html5.prototype.support = {
+
+  // Support for tech specific full screen. (webkitEnterFullScreen, not requestFullscreen)
+  // http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/HTMLVideoElementClassReference/HTMLVideoElement/HTMLVideoElement.html
+  // Seems to be broken in Chromium/Chrome && Safari in Leopard
+  fullscreen: (typeof _V_.testVid.webkitEnterFullScreen !== undefined) ? (!_V_.ua.match("Chrome") && !_V_.ua.match("Mac OS X 10.5") ? true : false) : false,
+
+  // In iOS, if you move a video element in the DOM, it breaks video playback.
+  movingElementInDOM: !_V_.isIOS()
+
+};
+
+// 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" : "";
+    };
+  }
+}
+
+
+/* VideoJS-SWF - Custom Flash Player with HTML5-ish API - https://github.com/zencoder/video-js-swf
+================================================================================ */
+_V_.flash = _V_.PlaybackTech.extend({
+
+  init: function(player, options){
+    this.player = player;
+
+    var source = options.source,
+
+        // Which element to embed in
+        parentEl = options.parentEl,
+
+        // Create a temporary element to be replaced by swf object
+        placeHolder = this.el = _V_.createElement("div", { id: parentEl.id + "_temp_flash" }),
+
+        // Generate ID for swf object
+        objId = player.el.id+"_flash_api",
+
+        // Store player options in local var for optimization
+        playerOptions = player.options,
+
+        // Merge default flashvars with ones passed in to init
+        flashVars = _V_.merge({
+
+          // SWF Callback Functions
+          readyFunction: "_V_.flash.onReady",
+          eventProxyFunction: "_V_.flash.onEvent",
+          errorEventProxyFunction: "_V_.flash.onError",
+
+          // Player Settings
+          autoplay: playerOptions.autoplay,
+          preload: playerOptions.preload,
+          loop: playerOptions.loop,
+          muted: playerOptions.muted
+
+        }, options.flashVars),
+
+        // Merge default parames with ones passed in
+        params = _V_.merge({
+          wmode: "opaque", // Opaque is needed to overlay controls, but can affect playback performance
+          bgcolor: "#000000" // Using bgcolor prevents a white flash when the object is loading
+        }, options.params),
+
+        // Merge default attributes with ones passed in
+        attributes = _V_.merge({
+          id: objId,
+          name: objId, // Both ID and Name needed or swf to identifty itself
+          'class': 'vjs-tech'
+        }, options.attributes)
+    ;
+
+    // If source was supplied pass as a flash var.
+    if (source) {
+      flashVars.src = encodeURIComponent(source.src);
+    }
+
+    // Add placeholder to player div
+    _V_.insertFirst(placeHolder, parentEl);
+
+    // Having issues with Flash reloading on certain page actions (hide/resize/fullscreen) in certain browsers
+    // This allows resetting the playhead when we catch the reload
+    if (options.startTime) {
+      this.ready(function(){
+        this.load();
+        this.play();
+        this.currentTime(options.startTime);
+      });
+    }
+
+    // Flash iFrame Mode
+    // In web browsers there are multiple instances where changing the parent element or visibility of a plugin causes the plugin to reload.
+    // - Firefox just about always. https://bugzilla.mozilla.org/show_bug.cgi?id=90268 (might be fixed by version 13)
+    // - Webkit when hiding the plugin
+    // - Webkit and Firefox when using requestFullScreen on a parent element
+    // Loading the flash plugin into a dynamically generated iFrame gets around most of these issues.
+    // Issues that remain include hiding the element and requestFullScreen in Firefox specifically
+
+    // There's on particularly annoying issue with this method which is that Firefox throws a security error on an offsite Flash object loaded into a dynamically created iFrame.
+    // Even though the iframe was inserted into a page on the web, Firefox + Flash considers it a local app trying to access an internet file.
+    // I tried mulitple ways of setting the iframe src attribute but couldn't find a src that worked well. Tried a real/fake source, in/out of domain.
+    // Also tried a method from stackoverflow that caused a security error in all browsers. http://stackoverflow.com/questions/2486901/how-to-set-document-domain-for-a-dynamically-generated-iframe
+    // In the end the solution I found to work was setting the iframe window.location.href right before doing a document.write of the Flash object.
+    // The only downside of this it seems to trigger another http request to the original page (no matter what's put in the href). Not sure why that is.
+
+    // NOTE (2012-01-29): Cannot get Firefox to load the remote hosted SWF into a dynamically created iFrame
+    // Firefox 9 throws a security error, unleess you call location.href right before doc.write.
+    //    Not sure why that even works, but it causes the browser to look like it's continuously trying to load the page.
+    // Firefox 3.6 keeps calling the iframe onload function anytime I write to it, causing an endless loop.
+
+    if (options.iFrameMode == true && !_V_.isFF) {
+
+      // Create iFrame with vjs-tech class so it's 100% width/height
+      var iFrm = _V_.createElement("iframe", {
+        id: objId + "_iframe",
+        name: objId + "_iframe",
+        className: "vjs-tech",
+        scrolling: "no",
+        marginWidth: 0,
+        marginHeight: 0,
+        frameBorder: 0
+      });
+
+      // Update ready function names in flash vars for iframe window
+      flashVars.readyFunction = "ready";
+      flashVars.eventProxyFunction = "events";
+      flashVars.errorEventProxyFunction = "errors";
+
+      // Tried multiple methods to get this to work in all browsers
+
+      // Tried embedding the flash object in the page first, and then adding a place holder to the iframe, then replacing the placeholder with the page object.
+      // The goal here was to try to load the swf URL in the parent page first and hope that got around the firefox security error
+      // var newObj = _V_.flash.embed(options.swf, placeHolder, flashVars, params, attributes);
+      // (in onload)
+      //  var temp = _V_.createElement("a", { id:"asdf", innerHTML: "asdf" } );
+      //  iDoc.body.appendChild(temp);
+
+      // Tried embedding the flash object through javascript in the iframe source.
+      // This works in webkit but still triggers the firefox security error
+      // iFrm.src = "javascript: document.write('"+_V_.flash.getEmbedCode(options.swf, flashVars, params, attributes)+"');";
+
+      // Tried an actual local iframe just to make sure that works, but it kills the easiness of the CDN version if you require the user to host an iframe
+      // We should add an option to host the iframe locally though, because it could help a lot of issues.
+      // iFrm.src = "iframe.html";
+
+      // Wait until iFrame has loaded to write into it.
+      _V_.addEvent(iFrm, "load", _V_.proxy(this, function(){
+
+        var iDoc, objTag, swfLoc,
+            iWin = iFrm.contentWindow,
+            varString = "";
+
+
+        // The one working method I found was to use the iframe's document.write() to create the swf object
+        // This got around the security issue in all browsers except firefox.
+        // I did find a hack where if I call the iframe's window.location.href="", it would get around the security error
+        // However, the main page would look like it was loading indefinitely (URL bar loading spinner would never stop)
+        // Plus Firefox 3.6 didn't work no matter what I tried.
+        // if (_V_.ua.match("Firefox")) {
+        //   iWin.location.href = "";
+        // }
+
+        // Get the iFrame's document depending on what the browser supports
+        iDoc = iFrm.contentDocument ? iFrm.contentDocument : iFrm.contentWindow.document;
+
+        // Tried ensuring both document domains were the same, but they already were, so that wasn't the issue.
+        // Even tried adding /. that was mentioned in a browser security writeup
+        // document.domain = document.domain+"/.";
+        // iDoc.domain = document.domain+"/.";
+
+        // Tried adding the object to the iframe doc's innerHTML. Security error in all browsers.
+        // iDoc.body.innerHTML = swfObjectHTML;
+
+        // Tried appending the object to the iframe doc's body. Security error in all browsers.
+        // iDoc.body.appendChild(swfObject);
+
+        // Using document.write actually got around the security error that browsers were throwing.
+        // Again, it's a dynamically generated (same domain) iframe, loading an external Flash swf.
+        // Not sure why that's a security issue, but apparently it is.
+        iDoc.write(_V_.flash.getEmbedCode(options.swf, flashVars, params, attributes));
+
+        // Setting variables on the window needs to come after the doc write because otherwise they can get reset in some browsers
+        // So far no issues with swf ready event being called before it's set on the window.
+        iWin.player = this.player;
+
+        // Create swf ready function for iFrame window
+        iWin.ready = _V_.proxy(this.player, function(currSwf){
+          var el = iDoc.getElementById(currSwf),
+              player = this,
+              tech = player.tech;
+
+          // Update reference to playback technology element
+          tech.el = el;
+
+          // Now that the element is ready, make a click on the swf play the video
+          _V_.addEvent(el, "click", tech.proxy(tech.onClick));
+
+          // Make sure swf is actually ready. Sometimes the API isn't actually yet.
+          _V_.flash.checkReady(tech);
+        });
+
+        // Create event listener for all swf events
+        iWin.events = _V_.proxy(this.player, function(swfID, eventName, other){
+          var player = this;
+          if (player && player.techName == "flash") {
+            player.triggerEvent(eventName);
+          }
+        });
+
+        // Create error listener for all swf errors
+        iWin.errors = _V_.proxy(this.player, function(swfID, eventName){
+          _V_.log("Flash Error", eventName);
+        });
+
+      }));
+
+      // Replace placeholder with iFrame (it will load now)
+      placeHolder.parentNode.replaceChild(iFrm, placeHolder);
+
+    // If not using iFrame mode, embed as normal object
+    } else {
+      _V_.flash.embed(options.swf, placeHolder, flashVars, params, attributes);
+    }
+  },
+
+  destroy: function(){
+    this.el.parentNode.removeChild(this.el);
+  },
+
+  // setupTriggers: function(){}, // Using global onEvent func to distribute events
+
+  play: function(){ this.el.vjs_play(); },
+  pause: function(){ this.el.vjs_pause(); },
+  src: function(src){
+    this.el.vjs_src(src);
+
+    // Currently the SWF doesn't autoplay if you load a source later.
+    // e.g. Load player w/ no source, wait 2s, set src.
+    if (this.player.autoplay) {
+      var tech = this;
+      setTimeout(function(){ tech.play(); }, 0);
+    }
+  },
+  load: function(){ this.el.vjs_load(); },
+  poster: function(){ this.el.vjs_getProperty("poster"); },
+
+  buffered: function(){
+    return _V_.createTimeRange(0, this.el.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 = _V_.flash.prototype,
+      readWrite = "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.el.vjs_setProperty(attr, val); };
+      },
+
+      createGetter = function(attr){
+        api[attr] = function(){ return this.el.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);
+  });
+
+})();
+
+/* Flash Support Testing -------------------------------------------------------- */
+
+_V_.flash.isSupported = function(){
+  return _V_.flash.version()[0] >= 10;
+  // return swfobject.hasFlashPlayerVersion("10");
+};
+
+_V_.flash.canPlaySource = function(srcObj){
+  if (srcObj.type in _V_.flash.prototype.support.formats) { return "maybe"; }
+};
+
+_V_.flash.prototype.support = {
+  formats: {
+    "video/flv": "FLV",
+    "video/x-flv": "FLV",
+    "video/mp4": "MP4",
+    "video/m4v": "MP4"
+  },
+
+  // Optional events that we can manually mimic with timers
+  progressEvent: false,
+  timeupdateEvent: false,
+
+  // Resizing plugins using request fullscreen reloads the plugin
+  fullscreenResize: false,
+
+  // Resizing plugins in Firefox always reloads the plugin (e.g. full window mode)
+  parentResize: !(_V_.ua.match("Firefox"))
+};
+
+_V_.flash.onReady = function(currSwf){
+
+  var el = _V_.el(currSwf);
+
+  // Get player from box
+  // On firefox reloads, el might already have a player
+  var player = el.player || el.parentNode.player,
+      tech = player.tech;
+
+  // Reference player on tech element
+  el.player = player;
+
+  // Update reference to playback technology element
+  tech.el = el;
+
+  // Now that the element is ready, make a click on the swf play the video
+  tech.addEvent("click", tech.onClick);
+
+  _V_.flash.checkReady(tech);
+};
+
+// The SWF isn't alwasy ready when it says it is. Sometimes the API functions still need to be added to the object.
+// If it's not ready, we set a timeout to check again shortly.
+_V_.flash.checkReady = function(tech){
+
+  // Check if API property exists
+  if (tech.el.vjs_getProperty) {
+
+    // If so, tell tech it's ready
+    tech.triggerReady();
+
+  // Otherwise wait longer.
+  } else {
+
+    setTimeout(function(){
+      _V_.flash.checkReady(tech);
+    }, 50);
+
+  }
+};
+
+// Trigger events from the swf on the player
+_V_.flash.onEvent = function(swfID, eventName){
+  var player = _V_.el(swfID).player;
+  player.triggerEvent(eventName);
+};
+
+// Log errors from the swf
+_V_.flash.onError = function(swfID, err){
+  _V_.log("Flash Error", err, swfID);
+};
+
+// Flash Version Check
+_V_.flash.version = function(){
+  var version = '0,0,0'
+
+  // IE
+  try {
+    version = new ActiveXObject('ShockwaveFlash.ShockwaveFlash').GetVariable('$version').replace(/\D+/g, ',').match(/^,?(.+),?$/)[1];
+
+  // other browsers
+  } catch(e) {
+    try {
+      if (navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin){
+        version = (navigator.plugins["Shockwave Flash 2.0"] || navigator.plugins["Shockwave Flash"]).description.replace(/\D+/g, ",").match(/^,?(.+),?$/)[1];
+      }
+    } catch(e) {}
+  }
+  return version.split(",");
+}
+
+// Flash embedding method. Only used in non-iframe mode
+_V_.flash.embed = function(swf, placeHolder, flashVars, params, attributes){
+  var code = _V_.flash.getEmbedCode(swf, flashVars, params, attributes),
+
+      // Get element by embedding code and retrieving created element
+      obj = _V_.createElement("div", { innerHTML: code }).childNodes[0],
+
+      par = placeHolder.parentNode
+  ;
+
+  placeHolder.parentNode.replaceChild(obj, placeHolder);
+
+  // IE6 seems to have an issue where it won't initialize the swf object after injecting it.
+  // This is a dumb temporary fix
+  if (_V_.isIE()) {
+    var newObj = par.childNodes[0];
+    setTimeout(function(){
+      newObj.style.display = "block";
+    }, 1000);
+  }
+
+  return obj;
+
+};
+
+_V_.flash.getEmbedCode = function(swf, flashVars, params, attributes){
+
+  var objTag = '<object type="application/x-shockwave-flash"',
+      flashVarsString = '',
+      paramsString = ''
+      attrsString = '';
+
+  // Convert flash vars to string
+  if (flashVars) {
+    _V_.eachProp(flashVars, function(key, val){
+      flashVarsString += (key + "=" + val + "&amp;");
+    });
+  }
+
+  // Add swf, flashVars, and other default params
+  params = _V_.merge({
+    movie: swf,
+    flashvars: flashVarsString,
+    allowScriptAccess: "always", // Required to talk to swf
+    allowNetworking: "all" // All should be default, but having security issues.
+  }, params);
+
+  // Create param tags string
+  _V_.eachProp(params, function(key, val){
+    paramsString += '<param name="'+key+'" value="'+val+'" />';
+  });
+
+  attributes = _V_.merge({
+    // Add swf to attributes (need both for IE and Others to work)
+    data: swf,
+
+    // Default to 100% width/height
+    width: "100%",
+    height: "100%"
+
+  }, attributes);
+
+  // Create Attributes string
+  _V_.eachProp(attributes, function(key, val){
+    attrsString += (key + '="' + val + '" ');
+  });
+
+  return objTag + attrsString + '>' + paramsString + '</object>';
+}

src/tracks.js

@@ -6,7 +6,7 @@ _V_.Track = function(attributes, player){
   this.kind = attributes.kind;
   this.srclang = attributes.srclang;
   this.label = attributes.label;
-  this["default"] = attributes["default"];
+  this["default"] = attributes["default"]; // 'default' is reserved-ish
   this.title = attributes.title;
 
   this.cues = [];
@@ -14,7 +14,8 @@ _V_.Track = function(attributes, player){
   this.lastCueIndex = 0;
 
   // Update current cue on timeupdate
-  player.addEvent("timeupdate", _V_.proxy(this, this.update))
+  player.addEvent("timeupdate", _V_.proxy(this, this.update));
+
   // Reset cue time on media end
   player.addEvent("ended", _V_.proxy(this, function() { this.lastCueIndex = 0; }));
 
@@ -87,7 +88,7 @@ _V_.Track.prototype = {
           // 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;
+          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)

tech/flowplayer.js

@@ -1,5 +1,7 @@
 // Flowplayer API Connector
 VideoJS.tech.flowplayer = {
+  name: "Flowplayer",
+  
   supported: function(){
     if (flowplayer) { 
       return true;

tech/youtube.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>VideoJS | HTML5 Video Player</title>
+
+  <link href="video-js.css" rel="stylesheet" type="text/css">
+
+  <!-- video.js must be in the <head> for older IEs to work. -->
+  <script src="video.js"></script>
+
+</head>
+<body>
+
+  <video id="example_video_1" class="video-js vjs-default-skin" controls width="640" height="264" data-setup='{"techOrder":["youtube","html5"]}'>
+    <source src="http://www.youtube.com/watch?v=YjaZNYSt7o0" type='video/youtube'>
+  </video>
+
+</body>
+</html>
+    

tech/youtube.js

@@ -0,0 +1,147 @@
+// Flowplayer API Connector
+VideoJS.tech.youtube = {
+  name: "YouTube",
+  
+  supported: function(){
+    // Flash Player 8 or higher
+    return true;
+  },
+  canPlaySource: function(sourceObj){
+    return sourceObj.type == "video/youtube";
+  },
+  supports: {
+    format: {},
+    event: {
+      progress: false,
+      timeupdate: false
+    }
+  },
+  init: function(sourceObj){
+    var player = this,
+        placeHolder = _V_.createElement("div", { id: player.box.id + "_temp_ytswf" }),
+        objId = player.box.id+"_youtube_api";
+
+        flashvars = {
+        },
+
+        params = {
+          allowScriptAccess: "always",
+          wmode: "opaque",
+          bgcolor: "#000000"
+        },
+
+        attributes = {
+          id: objId,
+          name: objId,
+          'class': 'vjs-tech'
+        };
+
+    this.addEvent("techready", function(){
+      var url = sourceObj.src;
+
+      if (url.indexOf("http://") == 0) {
+        // Get Youtube ID from URL
+        url = url.match(/v=([^&]+)/)[1];
+      }
+      this.tels.youtube.cueVideoById(url);
+    });
+
+    player.box.appendChild(placeHolder);
+
+    swfobject.embedSWF("http://www.youtube.com/apiplayer?" +
+                       "version=3&enablejsapi=1&playerapiid=" + objId,
+                       placeHolder.id, "480", "295", "9", null, null, params, attributes);
+  },
+  stateChange: function(id, state){
+    var player = _V_(id);
+
+    if (state == 0) {
+      player.triggerEvent("ended");
+    } else if (state == 1) {
+      player.triggerEvent("play");
+      player.triggerEvent("playing");
+    } else if (state == 2) {
+      player.triggerEvent("pause");
+    }
+  },
+  
+  error: function(id, errorCode){
+    _V_.log(id, errorCode);
+  },
+
+  api: {
+    setupTriggers: function(){
+      this.tels.youtube.addEventListener("onStateChange", 
+        "(function(state){ _V_.tech.youtube.stateChange('"+this.id+"',state); })");
+
+      this.tels.youtube.addEventListener("onError", 
+        "(function(errorCode){ _V_.tech.youtube.error('"+this.id+"',errorCode); })");
+
+    },
+
+    play: function(){ this.tels.youtube.playVideo(); },
+    pause: function(){ this.tels.youtube.pauseVideo(); },
+    paused: function(){
+      return this.tels.youtube.getPlayerState() !== 1; // More accurate than isPaused
+    },
+
+    currentTime: function(){ return this.tels.youtube.getCurrentTime(); },
+    setCurrentTime: function(seconds){
+      // False blocks seek-ahead.
+      this.tels.youtube.seekTo(seconds, true);
+    },
+
+    duration: function(){
+      return this.tels.youtube.getDuration();
+    },
+
+    buffered: function(){
+      var percent = this.tels.youtube.getVideoBytesLoaded() / this.tels.youtube.getVideoBytesTotal(),
+          seconds = this.duration() * percent;
+      return _V_.createTimeRange(0, seconds);
+    },
+
+    volume: function(){ return _V_.round(this.tels.youtube.getVolume() / 100, 2); },
+    setVolume: function(percentAsDecimal){
+      this.tels.youtube.setVolume(parseInt(percentAsDecimal * 100));
+
+      // Youtube Doesn't support VolumeChange Events
+      this.triggerEvent("volumechange");
+    },
+    muted: function(){ return this.tels.youtube.isMuted(); },
+    setMuted: function(bool){
+      if (bool) {
+        this.tels.youtube.mute()
+      } else {
+        this.tels.youtube.unMute()
+      }
+    },
+
+    supportsFullScreen: function(){
+      return false; // Flash does not allow fullscreen through javascript
+      // Maybe at click listener, and say "click screen".
+    },
+    enterFullScreen: function(){ this.tels.flowplayer.api.toggleFullscreen(); },
+
+    src: function(src){
+      this.tels.youtube.cueVideoById(src);
+    },
+    load: function(){
+      // Youtube will autoload?
+    }
+  }
+};
+
+// YouTube Defined Player Ready Callback
+window.onYouTubePlayerReady = function(playerId) {
+  var el = _V_.el(playerId),
+      player = el.parentNode.player; // Get player from box
+
+  el.player = player;
+
+  // Update reference to playback technology element
+  player.tels.youtube = el;
+
+  player.triggerEvent("techready");
+}
+