Updated to latest version.

index.html

@@ -131,7 +131,7 @@
 
         <p id="issues_link">Submit any bugs in the <a href="http://github.com/zencoder/video-js/issues">Issue Tracker</a> or update the <a href="http://wiki.github.com/zencoder/video-js/browser-device-compatibility">Compatibility Table</a></p>
 
-        <div id="disqus_thread"></div>
+        <!-- <div id="disqus_thread"></div>
         <script type="text/javascript">
           /**
             * var disqus_identifier; [Optional but recommended: Define a unique identifier (e.g. post id or slug) for this thread]
@@ -143,7 +143,7 @@
           })();
         </script>
         <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript=videojs">comments powered by Disqus.</a></noscript>
-        <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
+        <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a> -->
 
       </div>
     </div>

video-js/README.markdown

@@ -1,3 +1,9 @@
-video.js
+VideoJS
 --------
+[HTML5 Video Player](http://videojs.com)
+
+View [VideoJS.com](http://videojs.com) for a demo and overview.
+
+View demo.html for an example of how to use it.
+
 Based on the tutorial at http://blog.steveheffernan.com/2010/04/how-to-build-an-html5-video-player/

video-js/demo.html

@@ -35,23 +35,23 @@
   <!-- Begin VideoJS -->
   <div class="video-js-box">
     <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
-    <video id="video" class="video-js" width="640" height="264" poster="http://video-js.s3.amazonaws.com/oceans-clip.png" preload>
+    <video class="video-js" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" preload>
-      <source src="http://video-js.s3.amazonaws.com/oceans-clip.mp4" type="video/mp4">
+      <source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4">
-      <source src="http://video-js.s3.amazonaws.com/oceans-clip.webm" type="video/webm">
+      <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm">
-      <source src="http://video-js.s3.amazonaws.com/oceans-clip.ogg" type="video/ogg">
+      <source src="http://video-js.zencoder.com/oceans-clip.ogg" type="video/ogg">
       <object 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.s3.amazonaws.com/oceans-clip.mp4"}' />
+        <param name="flashvars" value='config={"clip":"http://video-js.zencoder.com/oceans-clip.mp4"}' />
-        <img src="http://video-js.s3.amazonaws.com/oceans-clip.png" width="640" height="264" alt="Poster Image" 
+        <img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
           title="No video playback capabilities." />
       </object>
     </video>
     <p class="vjs-no-video"><strong>Download Video:</strong>
-      <a href="http://video-js.s3.amazonaws.com/oceans-clip.mp4">MP4</a>,
+      <a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
-      <a href="http://video-js.s3.amazonaws.com/oceans-clip.webm">WebM</a>,
+      <a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
-      <a href="http://video-js.s3.amazonaws.com/oceans-clip.ogg">Ogg</a><br>
+      <a href="http://video-js.zencoder.com/oceans-clip.ogg">Ogg</a><br>
       <a href="http://videojs.com">HTML5 Video Player</a> by <a href="http://videojs.com">VideoJS</a>
     </p>
   </div>

video-js/video-js.css

@@ -1,7 +1,7 @@
-.video-js-box { text-align: left; position: relative; z-index: 1000; }
+.video-js-box { text-align: left; position: relative; }
 video.video-js { background-color: #000; }
 
-.video-js-box.vjs-fullscreen { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; }
+.video-js-box.vjs-fullscreen { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: 1000; }
 .video-js-box.vjs-fullscreen video.video-js { position: absolute; width: 100%; height: 100%; }
 
 .vjs-controls { display: none; position: absolute; margin: 0; padding: 0; border: none; }
@@ -43,7 +43,11 @@ img.vjs-poster { display: block; position: absolute; left: 0px; top: 0px; width:
   background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#777));
   background: -moz-linear-gradient(top,  #fff,  #777);
 }
-.vjs-progress-control .vjs-load-progress { position: absolute; display: block; width: 0px; height: 9px; background-color: #777; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
+.vjs-progress-control .vjs-load-progress { position: absolute; display: block; width: 0px; height: 9px; background-color: #777; opacity: 0.5;
+  -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; 
+  background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#ccc));
+  background: -moz-linear-gradient(top,  #999,  #ccc);
+}
 .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 */

video-js/video.js

@@ -38,6 +38,14 @@ var VideoJS = Class.extend({
     this.buildPoster();
     this.showPoster();
 
+    this.propertyInterval
+
+    this.video.preload = true;
+    this.video.autobuffer = true;
+
+    // Hide default controls
+    this.video.controls = false;
+
     this.buildController();
     this.showController();
 
@@ -54,6 +62,10 @@ var VideoJS = Class.extend({
     this.video.addEventListener('volumechange',this.onVolumeChange.context(this),false);
     // Listen for video errors
     this.video.addEventListener('error',this.onError.context(this),false);
+    // Listen for Video Load Progress (currently does not if html file is local)
+    this.video.addEventListener('progress', this.onProgress.context(this), false);
+    // Sometimes the 'progress' event doesn't fire the final (finished) progress notice.
+    this.watchBuffer = setInterval(this.updateBufferedTotal.context(this), 500);
 
     // Listen for clicks on the play/pause button
     this.playControl.addEventListener("click", this.onPlayControlClick.context(this), false);
@@ -68,7 +80,7 @@ var VideoJS = Class.extend({
     this.progressHolder.addEventListener("mouseup", this.onProgressHolderMouseUp.context(this), false);
 
     // Set to stored volume OR 85%
-    this.setVolume(localStorage["volume"] || 0.85);
+    this.setVolume(localStorage.volume || 0.85);
     // Listen for a drag on the volume control
     this.volumeControl.addEventListener("mousedown", this.onVolumeControlMouseDown.context(this), false);
     // Listen for a release on the volume control
@@ -92,6 +104,9 @@ var VideoJS = Class.extend({
     // 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);
+
+    // Support older browsers that used autobuffer
+    if (this.video.preload) this.video.autobuffer = true;
   },
 
   buildController: function(){
@@ -281,6 +296,14 @@ var VideoJS = Class.extend({
     this.updateVolumeDisplay();
   },
 
+  // When the video's load progress is updated
+  // Safari 5 seems have lost this functionality
+  onProgress: function(event){
+    if(event.total > 0) {
+      this.updateLoadProgress(event.loaded / event.total);
+    }
+  },
+
   onError: function(event){
     console.log(event);
     console.log(this.video.error);
@@ -290,6 +313,17 @@ var VideoJS = Class.extend({
     this.showController();
   },
 
+  updateBufferedTotal: function(){
+    if (this.video.buffered && this.video.buffered.length >= 1) {
+      if (this.video.buffered.end(0) == this.video.duration) {
+        this.updateLoadProgress(1);
+        clearInterval(this.watchBuffer);
+      }
+    } else {
+      clearInterval(this.watchBuffer);
+    }
+  },
+
   // React to clicks on the play/pause button
   onPlayControlClick: function(event){
     if (this.video.paused) {
@@ -401,6 +435,11 @@ var VideoJS = Class.extend({
     this.updateTimeDisplay();
   },
 
+  updateLoadProgress: function(decimal){
+    if (this.controls.style.display == 'none') return;
+    this.loadProgress.style.width = (decimal * (this.progressHolder.offsetWidth - 2)) + "px";
+  },
+
   // Update the play position based on where the user clicked on the progresss bar
   setPlayProgress: function(newProgress){
     this.video.currentTime = newProgress * this.video.duration;
@@ -421,8 +460,8 @@ var VideoJS = Class.extend({
 
   // Set a new volume based on where the user clicked on the volume control
   setVolume: function(newVol){
-    this.video.volume = newVol;
+    this.video.volume = parseFloat(newVol);
-    localStorage["volume"] = this.video.volume;
+    localStorage.volume = this.video.volume;
   },
 
   setVolumeWithEvent: function(event){