From 0451dd394aba46949ca1071b7b494b41210249e7 Mon Sep 17 00:00:00 2001
From: Steve Heffernan <steve@sevenwire.com>
Date: Mon, 20 Sep 2010 19:05:17 -0700
Subject: [PATCH] Added iphone/ipad poster fix. Bumped to 1.1.2.

---
 README.markdown |  5 +++-
 demo.html       |  2 +-
 video.js        | 68 ++++++++++++++++++++++++++++++++-----------------
 3 files changed, 50 insertions(+), 25 deletions(-)

diff --git a/README.markdown b/README.markdown
index 109a4d52b..9383f3e15 100644
--- a/README.markdown
+++ b/README.markdown
@@ -1,6 +1,6 @@
 VideoJS - [HTML5 Video Player](http://videojs.com)
 ==================================================
-Version 1.1.1
+Version 1.1.2
 
 View [VideoJS.com](http://videojs.com) for a demo and overview.
 
@@ -129,6 +129,9 @@ Set options when setting up the videos. The defaults are shown here.
 
 Changelog
 ---------
+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
diff --git a/demo.html b/demo.html
index b5766fdb1..f2751fd55 100644
--- a/demo.html
+++ b/demo.html
@@ -71,7 +71,7 @@
   <!-- Begin VideoJS -->
   <div class="video-js-box">
     <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
-    <video id="example_video_1" class="video-js" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload>
+    <video id="example_video_1" class="video-js" width="640" height="264" preload poster="http://video-js.zencoder.com/oceans-clip.png" controls>
       <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
       <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"'>
       <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"'>
diff --git a/video.js b/video.js
index 9014f4f8b..18f183841 100644
--- a/video.js
+++ b/video.js
@@ -32,9 +32,6 @@ var VideoJS = JRClass.extend({
       this.video = element;
     }
 
-    // Hide default controls
-    this.video.controls = false;
-
     // Store reference to player on the video element.
     // So you can acess the player later: document.getElementById("video_id").player.play();
     this.video.player = this;
@@ -46,7 +43,8 @@ var VideoJS = JRClass.extend({
       defaultVolume: 0.85, // Will be overridden by localStorage volume if available
       flashVersion: 9, // Required flash version for fallback
       linksHiding: true, // Hide download links when video is supported
-      flashIsDominant: false // Always use Flash when available
+      flashIsDominant: false, // Always use Flash when available
+      useBrowserControls: false // Dont' use the video JS controls (iPhone)
     };
 
     // Override default options with global options
@@ -55,11 +53,13 @@ var VideoJS = JRClass.extend({
     // Override global options with options specific to this video
     if (typeof setOptions == "object") { _V_.merge(this.options, setOptions); }
 
+    // Store reference to embed code pieces
     this.box = this.video.parentNode;
     this.flashFallback = this.getFlashFallback();
     this.linksFallback = this.getLinksFallback();
 
     // Hide download links if video can play
+    // Flash fallback can't be found in IE. Maybe add video as an element like modernizr so it can contain elements.
     if(VideoJS.browserSupportsVideo() || ((this.flashFallback || VideoJS.isIE()) && this.flashVersionSupported())) {
       this.hideLinksFallback();
     }
@@ -67,7 +67,7 @@ var VideoJS = JRClass.extend({
     // Check if browser can play HTML5 video
     if (VideoJS.browserSupportsVideo()) {
       // Force flash fallback when there's no supported source, or flash is dominant
-      if (!this.canPlaySource() || this.options.flashIsDominant) {
+      if (!this.canPlaySource() || (this.options.flashIsDominant && this.flashVersionSupported())) {
         this.replaceWithFlash();
         return;
       }
@@ -75,8 +75,24 @@ var VideoJS = JRClass.extend({
       return;
     }
 
-    if (VideoJS.isIpad()) { this.iPadFix(); }
-    if (VideoJS.isAndroid()) { this.androidFix(); }
+    // 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 == false) {
+      // Hide default controls
+      this.video.controls = false;
+    }
+
+    // Support older browsers that used autobuffer
+    this.fixPreloading();
 
     if (this.options.controlsBelow) {
       _V_.addClass(this.box, "vjs-controls-below");
@@ -164,9 +180,6 @@ var VideoJS = JRClass.extend({
       this.positionController();
     }.context(this);
 
-    // Support older browsers that used autobuffer
-    this.fixPreloading();
-
     // Load subtitles. Based on http://matroska.org/technical/specs/subtitles/srt.html
     this.subtitlesSource = this.video.getAttribute("data-subtitles");
     if (this.subtitlesSource !== null) {
@@ -180,6 +193,10 @@ var VideoJS = JRClass.extend({
   fixPreloading: function(){
     if (typeof this.video.hasAttribute == "function" && this.video.hasAttribute("preload")) {
       this.video.autobuffer = true;
+      this.video.load();
+    } else {
+      this.video.preload = false;
+      this.video.autobuffer = false;
     }
   },
 
@@ -406,6 +423,7 @@ var VideoJS = JRClass.extend({
       if (children[i].tagName.toUpperCase() == "SOURCE") {
         var canPlay = this.video.canPlayType(children[i].type);
         if(canPlay == "probably" || canPlay == "maybe") {
+          this.firstPlayableSource = children[i];
           return true;
         }
       }
@@ -827,22 +845,25 @@ var VideoJS = JRClass.extend({
   /* Device Fixes
   ================================================================================ */
 
+  /* Using Default Controls for iPad now. Can't do native fullscreen through the iPad API */
   // For iPads, controls need to always show because there's no hover
   // The controls also have to be below for the full-window mode to work.
-  iPadFix: function(){
-    this.options.controlsBelow = true;
-    this.options.controlsHiding = false;
-  },
-  
+  // iPadFix: function(){
+  //   this.options.controlsBelow = true;
+  //   this.options.controlsHiding = false;
+  // },
+
+  /* The "force the source" fix should hopefully fix this as well now. 
+     Not sure if canPlayType works on Android though. */
   // For Androids, add the MP4 source directly to the video tag otherwise it will not play
-  androidFix: function() {
-    var children = this.video.children;
-    for (var i=0,j=children.length; i<j; i++) {
-      if (children[i].tagName.toUpperCase() == "SOURCE" && children[i].src.match(/\.mp4$/i)) {
-        this.video.src = children[i].src;
-      }
-    }
-  }
+  // androidFix: function() {
+  //   var children = this.video.children;
+  //   for (var i=0,j=children.length; i<j; i++) {
+  //     if (children[i].tagName.toUpperCase() == "SOURCE" && children[i].src.match(/\.mp4$/i)) {
+  //       this.video.src = children[i].src;
+  //     }
+  //   }
+  // }
 
 });
 
@@ -1060,6 +1081,7 @@ VideoJS.getFlashVersion = function(){
   return VideoJS.flashVersion;
 };
 
+// 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; };