Forcing fallback to flash when source isn't supported

demo.html

@@ -26,9 +26,6 @@
     }
 
   </script>
-
-
-
   <!-- Include the VideoJS Stylesheet -->
   <link rel="stylesheet" href="video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
 </head>
@@ -40,12 +37,12 @@
     <video class="video-js" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload>
       <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
       <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"'>
-      <source src="http://video-js.zencoder.com/oceans-clip.ogg" type='video/ogg; codecs="theora, vorbis"'>
+      <!-- <source src="http://video-js.zencoder.com/oceans-clip.ogg" type='video/ogg; codecs="theora, vorbis"'> -->
-      <object width="640" height="264" type="application/x-shockwave-flash"
+      <object class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
         data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
         <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
         <param name="allowfullscreen" value="true" />
-        <param name="flashvars" value='config={"clip":"http://video-js.zencoder.com/oceans-clip.mp4"}' />
+        <param name="flashvars" value='config={"clip":{"url":"http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}}' />
         <img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
           title="No video playback capabilities." />
       </object>

video.js

@@ -29,8 +29,6 @@ var VideoJS = Class.extend({
   // num: the current player's position in the videoJSPlayers array
   init: function(element, setOptions){
 
-    if(!VideoJS.browserSupportsVideo()) return;
-
     this.video = element;
 
     // Default Options
@@ -38,20 +36,31 @@ var VideoJS = Class.extend({
       num: 0, // Optional tracking of videoJSPLayers position
       controlsBelow: false, // Display control bar below video vs. on top
       controlsHiding: true, // Hide controls when not over the video
-      defaultVolume: 0.85 // Will be overridden by localStorage volume if available
+      defaultVolume: 0.85, // Will be overridden by localStorage volume if available
+      flashVersion: 9
     };
-
     // Override default options with set options
     if (typeof setOptions == "object") _V_.merge(this.options, setOptions);
 
     this.box = this.video.parentNode;
+    this.flashFallback = this.getFlashFallback();
+    this.linksFallback = this.getLinksFallback();
     this.percentLoaded = 0;
 
-    // if (this.canPlaySource()) {
+    if (VideoJS.browserSupportsVideo()) {
-    //
+      if (this.canPlaySource() == false) {
-    // }
+        this.hideLinksFallback();
+        this.replaceWithFlash();
+        return;
+      }
+    } else if (VideoJS.browserFlashVersion() >= this.options.flashVersion) {
+      this.hideLinksFallback();
+      return;
+    } else {
+      return;
+    }
 
-    this.hideDownloadLinks();
+    this.hideLinksFallback();
 
     if (VideoJS.isIpad()) {
       this.options.controlsBelow = true;
@@ -235,14 +244,32 @@ var VideoJS = Class.extend({
     this.controls.appendChild(this.fullscreenControl);
   },
 
+  // Get the download links block element
+  getLinksFallback: function(){
+    return this.box.getElementsByTagName("P")[0];
+  },
+
   // Hide no-video download paragraph
-  hideDownloadLinks: function(){
+  hideLinksFallback: function(){
-    var children = this.box.children;
+    if (this.linksFallback) this.linksFallback.style.display = "none";
-    for(var i=0; i<children.length; i++){
+  },
-      if(children[i].className == "vjs-no-video") children[i].style.display = "none";
+
+  getFlashFallback: function(){
+    if (VideoJS.isIE()) return;
+    var children = this.box.getElementsByClassName("vjs-flash-fallback");
+    for (var i=0; i<children.length; i++) {
+      if (children[i].tagName.toUpperCase() == "OBJECT") {
+        return children[i];
+      }
     }
   },
 
+  replaceWithFlash: function(){
+    // this.flashFallback = this.video.removeChild(this.flashFallback);
+    this.box.appendChild(this.flashFallback);
+    this.video.style.display = "none"; // Removing it was breaking later players
+  },
+
   // Show the controller
   showController: function(){
     this.controls.style.display = "block";
@@ -331,6 +358,7 @@ var VideoJS = Class.extend({
         }
       }
     }
+    return false;
   },
 
   // When the video is played
@@ -602,12 +630,11 @@ var VideoJS = Class.extend({
 
 // Add video-js to any video tag with the class
 VideoJS.setup = function(){
-  if (VideoJS.browserSupportsVideo()) {
+  var videoCount = document.getElementsByTagName("video").length
-    var videoTags = document.getElementsByTagName("video");
+  for (var i=0;i<videoCount;i++) {
-    for (var i=0;i<videoTags.length;i++) {
+    videoTag = document.getElementsByTagName("video")[i];
-      if (videoTags[i].className.indexOf("video-js") != -1) {
+    if (videoTag.className.indexOf("video-js") != -1) {
-        videoJSPlayers[i] = new VideoJS(videoTags[i], { num: i });
+      videoJSPlayers[i] = new VideoJS(videoTag, { num: i });
-      }
     }
   }
 }
@@ -621,12 +648,26 @@ VideoJS.isIpad = function(){
   return navigator.userAgent.match(/iPad/i) != null;
 }
 
-VideoJS.browserSupportsFlash = function(){
+VideoJS.browserFlashVersion = function(){
-  if (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"]) {
+  if (typeof navigator.plugins != "undefined" && typeof navigator.plugins["Shockwave Flash"] == "object") {
-    return 1
+    desc = navigator.plugins["Shockwave Flash"].description;
-  } else {
+    if (desc && !(typeof navigator.mimeTypes != "undefined" && navigator.mimeTypes["application/x-shockwave-flash"] && !navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin)) {
-    return 0
+      return parseInt(desc.match(/^.*\s+([^\s]+)\.[^\s]+\s+[^\s]+$/)[1]);
+    }
+  } else if (typeof window.ActiveXObject != "undefined") {
+    try {
+      var testObject = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
+      if (testObject) {
+        return parseInt(testObject.GetVariable("$version").match(/^[^\s]+\s(\d+)/)[1]);
+      }
+    }
+    catch(e) { return false; }
   }
+  return 0;
+}
+
+VideoJS.isIE = function(){
+  return !+"\v1"
 }
 
 // Convenience Functions (mini library)
@@ -651,7 +692,7 @@ var _V_ = {
   createElement: function(tagName, attributes){
     return _V_.merge(document.createElement(tagName), attributes);
   },
-  
+
   // Attempt to block the ability to select text while dragging controls
   blockTextSelection: function(){
     document.body.focus();
@@ -677,7 +718,7 @@ var _V_ = {
   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;