Added poster image fix thanks to dz0ny

video-js.css

@@ -6,6 +6,9 @@ video.video-js { background-color: #000; }
 
 .vjs-controls { display: none; position: absolute; margin: 0; padding: 0; border: none; }
 
+img.vjs-poster { display: block; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; }
+
+
 /* DEFAULT SKIN */
 /* Using all CSS to draw the controls. Images could be used to simplify the CSS if desired.
 
@@ -27,12 +30,12 @@ video.video-js { background-color: #000; }
 .vjs-controls > li:last-child { margin-right: 0; }
 
 /* Play/Pause */
-.vjs-play-control span { display: block; font-size: 0px; line-height: 0; text-decoration: none; cursor:pointer!important;}
+.vjs-play-control span { display: block; font-size: 0px; line-height: 0; text-decoration: none; cursor: pointer !important; }
 .vjs-play-control.vjs-play span { width: 0; height: 0; margin: 8px 0 0 8px; border-top: 5px solid #273F3E; border-left: 10px solid #fff; border-bottom: 5px solid #112129; }
 .vjs-play-control.vjs-pause span { width: 3px; height: 10px; margin: 8px auto 0; border-top: 0px; border-left: 3px solid #fff; border-bottom: 0px; border-right: 3px solid #fff; }
 
 /* Progress */
-.vjs-progress-control ul { list-style: none; margin: 0; padding: 0; cursor:pointer!important;}
+.vjs-progress-control ul { list-style: none; margin: 0; padding: 0; cursor: pointer !important; }
 .vjs-progress-control .vjs-progress-holder { list-style: none; position: relative; float: left; height: 9px; border: 1px solid #777; margin: 7px 0 0 5px; padding: 0; background-color: #112129; overflow:hidden; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
 .vjs-progress-control .vjs-play-progress { position: absolute; display: block; width: 0px; height: 9px; background: #fff; 
   -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
@@ -43,7 +46,7 @@ video.video-js { background-color: #000; }
 .vjs-progress-control .vjs-progress-time { list-style: none; float: left; margin: 7px 0 0 5px; padding: 0; font-size: 10px; line-height: 1; font-weight: normal; font-family: Helvetica, Arial, sans-serif;  }
 
 /* Volume */
-.vjs-volume-control { width: 50px !important; cursor:pointer!important;}
+.vjs-volume-control { width: 50px !important; cursor: pointer !important; }
 .vjs-volume-control ul { display: block; margin: 0; padding: 4px 0 0 5px; list-style: none; }
 .vjs-volume-control ul li { float: left; margin: 0; padding: 0; list-style: none; width: 5px; margin-right: 2px; height: 0px; border-bottom: 18px solid #555; }
 .vjs-volume-control ul li:nth-child(1) { border-bottom-width: 2px; height: 16px; }
@@ -53,7 +56,7 @@ video.video-js { background-color: #000; }
 .vjs-volume-control ul li:nth-child(5) { border-bottom-width: 14px; height: 4px; }
 
 /* Fullscreen */
-.vjs-fullscreen-control ul { list-style: none; margin: 5px 0 0 5px; padding: 0; width: 20px; height: 20px; text-align: left; vertical-align: top; cursor:pointer!important; }
+.vjs-fullscreen-control ul { list-style: none; margin: 5px 0 0 5px; padding: 0; width: 20px; height: 20px; text-align: left; vertical-align: top; cursor: pointer !important; }
 .vjs-fullscreen-control ul li { list-style: none; float: left; margin: 0; padding: 0; font-size: 0; line-height: 0; width: 0; text-align: left; vertical-align: top; }
 .vjs-fullscreen-control ul li:nth-child(1) { margin: 0 3px 3px 0; border: none; border-top: 6px solid #fff; border-right: 6px solid #273F3E; }
 .vjs-fullscreen-control ul li:nth-child(2) { border: none; border-top: 6px solid #fff; border-left: 6px solid #273F3E; }

video.js

@@ -32,9 +32,14 @@ var VideoJS = Class.extend({
     this.num = num;
     this.box = element.parentNode;
 
+    this.showPoster();
+
     this.buildController();
     this.showController();
 
+    // Position & show controls when data is loaded
+    this.video.addEventListener("loadeddata", this.onLoadedData.context(this), false);
+
     // Listen for when the video is played
     this.video.addEventListener("play", this.onPlay.context(this), false);
     // Listen for when the video is paused
@@ -70,6 +75,12 @@ var VideoJS = Class.extend({
     this.video.addEventListener("mousemove", this.onVideoMouseMove.context(this), false);
     // Listen for the mouse moving out of the video. Used to hide the controller.
     this.video.addEventListener("mouseout", this.onVideoMouseOut.context(this), false);
+
+    // Listen for the mouse move the poster image. Used to reveal the controller.
+    this.poster.addEventListener("mousemove", this.onVideoMouseMove.context(this), false);
+    // Listen for the mouse moving out of the poster image. Used to hide the controller.
+    this.poster.addEventListener("mouseout", this.onVideoMouseOut.context(this), false);
+
     // Have to add the mouseout to the controller too or it may not hide.
     // For some reason the same isn't needed for mouseover
     this.controls.addEventListener("mouseout", this.onVideoMouseOut.context(this), false);
@@ -105,8 +116,6 @@ var VideoJS = Class.extend({
       </ul>
     */
 
-    
-
     // Create a list element to hold the different controls
     this.controls = document.createElement("ul");
 
@@ -201,6 +210,26 @@ var VideoJS = Class.extend({
     this.sizeProgressBar();
   },
 
+  // Add the video poster to the video's container, to fix autobuffer/preload bug
+  showPoster: function(){
+    this.poster = document.createElement("img");
+    this.video.parentNode.appendChild(this.poster);
+
+    // Add image data and style it correctly
+    this.poster.src = this.video.poster;
+    this.poster.className = "vjs-poster";
+
+    this.positionPoster();
+  },
+
+  // Size the poster image
+  positionPoster: function(){
+    // Only if the poster is visible
+    if (this.poster.style.display == 'none') return;
+    this.poster.style.height = this.video.offsetHeight + "px";
+    this.poster.style.width = this.video.offsetWidth + "px";
+  },
+
   // Hide the controller
   hideController: function(){
     this.controls.style.display = "none";
@@ -209,6 +238,7 @@ var VideoJS = Class.extend({
   // When the video is played
   onPlay: function(event){
     this.playControl.className = "vjs-play-control vjs-pause";
+    this.poster.style.display = "none";
     this.trackPlayProgress();
   },
 
@@ -233,6 +263,10 @@ var VideoJS = Class.extend({
     console.log(this.video.error);
   },
 
+  onLoadedData: function(event){
+    this.showController();
+  },
+
   // React to clicks on the play/pause button
   onPlayControlClick: function(event){
     if (this.video.paused) {
@@ -386,15 +420,19 @@ var VideoJS = Class.extend({
   // Real fullscreen isn't available in browsers quite yet.
   fullscreenOn: function(){
     this.videoIsFullScreen = true;
+
+    // Storing original doc overflow value to return to when fullscreen is off
     this.docOrigOverflow = document.documentElement.style.overflow;
 
     // Hide any scroll bars
     document.documentElement.style.overflow = 'hidden';
-    this.fullscreenControl.className = "vjs-fullscreen-control vjs-fs-active";
+
+    // Apply fullscreen styles
     this.box.className = "video-js-box vjs-fullscreen";
-    
+
-    // Resize the video to the window
+    // Resize the controller and poster
     this.positionController();
+    this.positionPoster();
   },
 
   // Turn off fullscreen (window) mode
@@ -404,15 +442,12 @@ var VideoJS = Class.extend({
     // Unhide scroll bars.
     document.documentElement.style.overflow = this.docOrigOverflow;
 
-    // Remove window resizing event listener
+    // Remove fullscreen styles
-    window.removeEventListener('resize', this.fullWindowResize, false);
+    this.box.className = "video-js-box";
 
     // Resize to original settings
-    this.video.style.position = "static";
-    this.controls.style.position = "absolute";
     this.positionController();
-    this.fullscreenControl.className = "vjs-fullscreen-control";
+    this.positionPoster();
-    this.box.className = "video-js-box";
   },
 
   // Attempt to block the ability to select text while dragging controls