More reorg.

Switched spinner to use CSS for centering instead of JS.
Created some device checks.
Modularized some device fixes.

test/test.html

@@ -10,7 +10,7 @@
   <script src="../video.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript">
     VideoJS.DOMReady(function(){
-      // var myPlayer = VideoJS.setup("example_video_1", { controlsHiding: false });
+      var myPlayer = VideoJS.setup("example_video_1", { controlsHiding: false });
       var vid = document.getElementById("example_video_1"),
           attrTable = document.getElementById("attributes"),
           attrNames = ["error", "networkState", "readyState", "preload", "buffered",

video-js.css

@@ -70,7 +70,7 @@ so you can upgrade to newer versions easier. */
 /* Placement of Control Items */
 ul.vjs-controls > li.vjs-play-control       { width: 25px; left: 5px; }
 ul.vjs-controls > li.vjs-progress-control   { width: 100%; position: relative; }
-ul.vjs-controls > li.vjs-time-control       { width: 75px; right: 90px; }
+ul.vjs-controls > li.vjs-time-control       { width: 75px; right: 90px; } /* Time control and progress bar are combined to look like one */
 ul.vjs-controls > li.vjs-volume-control     { width: 50px; right: 35px; }
 ul.vjs-controls > li.vjs-fullscreen-control { width: 25px; right: 5px; }
 
@@ -212,7 +212,7 @@ div.vjs-big-play-button span {
 ---------------------------------------------------------*/
 /* CSS Spinners by Kilian Valkhof - http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/ */
 
-.vjs-spinner { display: none; position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; z-index: 1;
+.vjs-spinner { display: none; position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; z-index: 1; margin: -50px 0 0 -50px;
   transform: scale(0.5); -webkit-transform:scale(0.5); -moz-transform:scale(0.5);
 /*  -webkit-animation-name: rotateThis;
   -webkit-animation-duration:2s;

video.js

@@ -75,51 +75,56 @@ var VideoJS = JRClass.extend({
   },
 
   html5Init: function(){
-    // Force the video source
-    // Helps fix loading bugs in a handful of devices, like the iPad/iPhone poster bug
-    // And iPad/iPhone javascript include location bug
-    // And Android type attribute bug
-    this.video.src = this.firstPlayableSource.src; // From canPlaySource()
-
-    if (VideoJS.isIpad() || VideoJS.isIphone() || VideoJS.isAndroid()) {
-      this.video.load(); // 2nd step of forcing the source
-      return; // Use the devices default controls
-    }
-
-    if (!this.options.useBrowserControls) { this.video.controls = false; }
-    if (this.options.controlsBelow) { _V_.addClass(this.box, "vjs-controls-below"); }
     this.fixPreloading(); // Support older browsers that used autobuffer
-    this.percentLoaded = 0; // Store amount of video loaded
     
-    // Build Interface
-    this.buildStylesCheckDiv(); // Used to check if style are loaded
-    this.buildPoster();
-    this.buildBigPlayButton();
-    this.buildSpinner();
-    this.buildControlBar();
-    this.loadInterface(); // Show everything once styles are loaded
-
-    /* Initialize Subtitles
-    ================================================================================ */
-    // Load subtitles. Based on http://matroska.org/technical/specs/subtitles/srt.html
-    this.subtitlesSource = this.video.getAttribute("data-subtitles");
-    if (this.subtitlesSource !== null) {
-      this.loadSubtitles();
-      this.buildSubtitles();
+    if (VideoJS.isIOS() && VideoJS.iOSVersion < 4) {
+      this.forceTheSource();
+      this.options.useBrowserControls = true;
     }
 
-    /* Removeable Event Listeners with Context
-    ================================================================================ */
-    // These event listeners are attached to global elements like document/window.
-    // They are also temporary, which means they need to be removed.
-    // They also need context (this) so they can call functions on their specific player.
-    // Adding context on initialization allows them to referenced and removed after being attached.
-    this.onEscKey = this.onEscKey.context(this);
-    this.onWindowResize = this.onWindowResize.context(this);
-    this.onProgressMouseMove = this.onProgressMouseMove.context(this);
-    this.onProgressMouseUp = this.onProgressMouseUp.context(this);
-    this.onVolumeMouseMove = this.onVolumeMouseMove.context(this);
-    this.onVolumeMouseUp = this.onVolumeMouseUp.context(this);
+    if (VideoJS.isAndroid()) {
+      this.forceTheSource();
+      this.options.useBrowserControls = true;
+      this.video.addEventListener("click", function(){ this.play(); }, false);
+    }
+
+    // Add VideoJS Controls
+    if (!this.options.useBrowserControls) { 
+      this.video.controls = false; 
+
+      if (this.options.controlsBelow) { _V_.addClass(this.box, "vjs-controls-below"); }
+      this.percentLoaded = 0; // Store amount of video loaded
+
+      // Build Interface
+      this.buildStylesCheckDiv(); // Used to check if style are loaded
+      this.buildPoster();
+      this.buildBigPlayButton();
+      this.buildSpinner();
+      this.buildControlBar();
+      this.loadInterface(); // Show everything once styles are loaded
+
+      /* Initialize Subtitles
+      ================================================================================ */
+      // Load subtitles. Based on http://matroska.org/technical/specs/subtitles/srt.html
+      this.subtitlesSource = this.video.getAttribute("data-subtitles");
+      if (this.subtitlesSource !== null) {
+        this.loadSubtitles();
+        this.buildSubtitles();
+      }
+
+      /* Removeable Event Listeners with Context
+      ================================================================================ */
+      // These event listeners are attached to global elements like document/window.
+      // They are also temporary, which means they need to be removed.
+      // They also need context (this) so they can call functions on their specific player.
+      // Adding context on initialization allows them to referenced and removed after being attached.
+      this.onEscKey = this.onEscKey.context(this);
+      this.onWindowResize = this.onWindowResize.context(this);
+      this.onProgressMouseMove = this.onProgressMouseMove.context(this);
+      this.onProgressMouseUp = this.onProgressMouseUp.context(this);
+      this.onVolumeMouseMove = this.onVolumeMouseMove.context(this);
+      this.onVolumeMouseUp = this.onVolumeMouseUp.context(this);
+    }
   },
 
   canPlaySource: function(){
@@ -142,6 +147,13 @@ var VideoJS = JRClass.extend({
     return false;
   },
 
+  // Force the video source - Helps fix loading bugs in a handful of devices, like the iPad/iPhone poster bug
+  // And iPad/iPhone javascript include location bug. And Android type attribute bug
+  forceTheSource: function(){
+    this.video.src = this.firstPlayableSource.src; // From canPlaySource()
+    this.video.load();
+  },
+
   loadInterface: function(){
     if(!this.stylesHaveLoaded()) {
       // Don't want to create an endless loop either.
@@ -152,10 +164,10 @@ var VideoJS = JRClass.extend({
       }
     }
     this.hideStylesCheckDiv();
-    this.positionBox();
     this.showPoster();
     if (this.video.paused !== false) { this.showBigPlayButton(); }
     if (this.options.showControlsAtStart) { this.showControlBar(); }
+    this.positionBox();
   },
 
   /* VideoJS Box - Holds all elements
@@ -671,8 +683,6 @@ var VideoJS = JRClass.extend({
       className: "vjs-spinner",
       innerHTML: "<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>"
     });
-    this.spinner.style.left = (this.video.offsetWidth-100)/2 +"px";
-    this.spinner.style.top= (this.video.offsetHeight-100)/2 +"px";
     this.video.parentNode.appendChild(this.spinner);
     this.initializeSpinner();
   },
@@ -1259,9 +1269,18 @@ VideoJS.getFlashVersion = function(){
 
 // Browser & Device Checks
 VideoJS.isIE = function(){ return !+"\v1"; };
-VideoJS.isIpad = function(){ return navigator.userAgent.match(/iPad/i) !== null; };
-VideoJS.isIphone = function(){ return navigator.userAgent.match(/iPhone/i) !== null; };
+VideoJS.isIPad = function(){ return navigator.userAgent.match(/iPad/i) !== null; };
+VideoJS.isIPhone = function(){ return navigator.userAgent.match(/iPhone/i) !== null; };
+VideoJS.isIOS = function(){ return VideoJS.isIPhone || VideoJS.isIPad };
+VideoJS.iOSVersion = function() { 
+  var match = navigator.userAgent.match(/OS (\d+)_/i);
+  if (match && match[1]) { return match[1] };
+};
 VideoJS.isAndroid = function(){ return navigator.userAgent.match(/Android/i) !== null; };
+VideoJS.androidVersion = function() { 
+  var match = navigator.userAgent.match(/Android (\d+)\./i);
+  if (match && match[1]) { return match[1] };
+};
 
 VideoJS.errorCodes = {
   // Safari errors if you call functions on a video that hasn't loaded yet
@@ -1270,14 +1289,18 @@ VideoJS.errorCodes = {
 
 // Allows for binding context to functions
 // when using in event listeners and timeouts
-Function.prototype.context = function(obj) {
+Function.prototype.context = function(obj){
   var method = this, temp;
-  temp = function() {
+  temp = function(){
     return method.apply(obj, arguments);
   };
   return temp;
 };
 
+_V_.merge(VideoJS, {
+  asdf: function(){ alert("hi") }
+});
+
 // Shim to make Video tag valid in IE
 if(VideoJS.isIE()) { document.createElement("video"); }