Updated to latest version

video-js/LICENSE.txt

@@ -1,21 +1,165 @@
-The MIT License
+                   GNU LESSER GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
 
-Copyright (c) 2010 Zencoder, Inc.
+ Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
 
-The above copyright notice and this permission notice shall be included in
+  This version of the GNU Lesser General Public License incorporates
-all copies or substantial portions of the Software.
+the terms and conditions of version 3 of the GNU General Public
+License, supplemented by the additional permissions listed below.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  0. Additional Definitions.
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  As used herein, "this License" refers to version 3 of the GNU Lesser
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+General Public License, and the "GNU GPL" refers to version 3 of the GNU
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+General Public License.
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+
-THE SOFTWARE.
+  "The Library" refers to a covered work governed by this License,
+other than an Application or a Combined Work as defined below.
+
+  An "Application" is any work that makes use of an interface provided
+by the Library, but which is not otherwise based on the Library.
+Defining a subclass of a class defined by the Library is deemed a mode
+of using an interface provided by the Library.
+
+  A "Combined Work" is a work produced by combining or linking an
+Application with the Library.  The particular version of the Library
+with which the Combined Work was made is also called the "Linked
+Version".
+
+  The "Minimal Corresponding Source" for a Combined Work means the
+Corresponding Source for the Combined Work, excluding any source code
+for portions of the Combined Work that, considered in isolation, are
+based on the Application, and not on the Linked Version.
+
+  The "Corresponding Application Code" for a Combined Work means the
+object code and/or source code for the Application, including any data
+and utility programs needed for reproducing the Combined Work from the
+Application, but excluding the System Libraries of the Combined Work.
+
+  1. Exception to Section 3 of the GNU GPL.
+
+  You may convey a covered work under sections 3 and 4 of this License
+without being bound by section 3 of the GNU GPL.
+
+  2. Conveying Modified Versions.
+
+  If you modify a copy of the Library, and, in your modifications, a
+facility refers to a function or data to be supplied by an Application
+that uses the facility (other than as an argument passed when the
+facility is invoked), then you may convey a copy of the modified
+version:
+
+   a) under this License, provided that you make a good faith effort to
+   ensure that, in the event an Application does not supply the
+   function or data, the facility still operates, and performs
+   whatever part of its purpose remains meaningful, or
+
+   b) under the GNU GPL, with none of the additional permissions of
+   this License applicable to that copy.
+
+  3. Object Code Incorporating Material from Library Header Files.
+
+  The object code form of an Application may incorporate material from
+a header file that is part of the Library.  You may convey such object
+code under terms of your choice, provided that, if the incorporated
+material is not limited to numerical parameters, data structure
+layouts and accessors, or small macros, inline functions and templates
+(ten or fewer lines in length), you do both of the following:
+
+   a) Give prominent notice with each copy of the object code that the
+   Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the object code with a copy of the GNU GPL and this license
+   document.
+
+  4. Combined Works.
+
+  You may convey a Combined Work under terms of your choice that,
+taken together, effectively do not restrict modification of the
+portions of the Library contained in the Combined Work and reverse
+engineering for debugging such modifications, if you also do each of
+the following:
+
+   a) Give prominent notice with each copy of the Combined Work that
+   the Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the Combined Work with a copy of the GNU GPL and this license
+   document.
+
+   c) For a Combined Work that displays copyright notices during
+   execution, include the copyright notice for the Library among
+   these notices, as well as a reference directing the user to the
+   copies of the GNU GPL and this license document.
+
+   d) Do one of the following:
+
+       0) Convey the Minimal Corresponding Source under the terms of this
+       License, and the Corresponding Application Code in a form
+       suitable for, and under terms that permit, the user to
+       recombine or relink the Application with a modified version of
+       the Linked Version to produce a modified Combined Work, in the
+       manner specified by section 6 of the GNU GPL for conveying
+       Corresponding Source.
+
+       1) Use a suitable shared library mechanism for linking with the
+       Library.  A suitable mechanism is one that (a) uses at run time
+       a copy of the Library already present on the user's computer
+       system, and (b) will operate properly with a modified version
+       of the Library that is interface-compatible with the Linked
+       Version.
+
+   e) Provide Installation Information, but only if you would otherwise
+   be required to provide such information under section 6 of the
+   GNU GPL, and only to the extent that such information is
+   necessary to install and execute a modified version of the
+   Combined Work produced by recombining or relinking the
+   Application with a modified version of the Linked Version. (If
+   you use option 4d0, the Installation Information must accompany
+   the Minimal Corresponding Source and Corresponding Application
+   Code. If you use option 4d1, you must provide the Installation
+   Information in the manner specified by section 6 of the GNU GPL
+   for conveying Corresponding Source.)
+
+  5. Combined Libraries.
+
+  You may place library facilities that are a work based on the
+Library side by side in a single library together with other library
+facilities that are not Applications and are not covered by this
+License, and convey such a combined library under terms of your
+choice, if you do both of the following:
+
+   a) Accompany the combined library with a copy of the same work based
+   on the Library, uncombined with any other library facilities,
+   conveyed under the terms of this License.
+
+   b) Give prominent notice with the combined library that part of it
+   is a work based on the Library, and explaining where to find the
+   accompanying uncombined form of the same work.
+
+  6. Revised Versions of the GNU Lesser General Public License.
+
+  The Free Software Foundation may publish revised and/or new versions
+of the GNU Lesser General Public License from time to time. Such new
+versions will be similar in spirit to the present version, but may
+differ in detail to address new problems or concerns.
+
+  Each version is given a distinguishing version number. If the
+Library as you received it specifies that a certain numbered version
+of the GNU Lesser General Public License "or any later version"
+applies to it, you have the option of following the terms and
+conditions either of that published version or of any later version
+published by the Free Software Foundation. If the Library as you
+received it does not specify a version number of the GNU Lesser
+General Public License, you may choose any version of the GNU Lesser
+General Public License ever published by the Free Software Foundation.
+
+  If the Library as you received it specifies that a proxy can decide
+whether future versions of the GNU Lesser General Public License shall
+apply, that proxy's public statement of acceptance of any version is
+permanent authorization for you to choose that version for the
+Library.

video-js/demo.html

@@ -22,7 +22,7 @@
 
   <div class="video-js-box">
     <!-- Using the Video for Everybody Embed Code (modified for VP8/WebM) 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" autobuffer>
+    <video id="video" class="video-js" width="640" height="264" poster="http://video-js.s3.amazonaws.com/oceans-clip.png" preload>
       <source src="http://video-js.s3.amazonaws.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.s3.amazonaws.com/oceans-clip.ogg" type="video/ogg">

video-js/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; }
+.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; }
+.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; }
+.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; }
+.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/video.js

@@ -1,9 +1,26 @@
+/*
+This file is part of VideoJS. Copyright 2010 Zencoder, Inc.
+
+VideoJS is free software: you can redistribute it and/or modify
+it under the terms of the GNU Lesser General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+VideoJS is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Lesser General Public License for more details.
+
+You should have received a copy of the GNU Lesser General Public License
+along with VideoJS.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+// Store a list of players on the page for reference
+var videoJSPlayers = new Array();
+
 // Using jresig's Class implementation http://ejohn.org/blog/simple-javascript-inheritance/
 (function(){var initializing=false, fnTest=/xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/; this.Class = function(){}; Class.extend = function(prop) { var _super = this.prototype; initializing = true; var prototype = new this(); initializing = false; for (var name in prop) { prototype[name] = typeof prop[name] == "function" && typeof _super[name] == "function" && fnTest.test(prop[name]) ? (function(name, fn){ return function() { var tmp = this._super; this._super = _super[name]; var ret = fn.apply(this, arguments); this._super = tmp; return ret; }; })(name, prop[name]) : prop[name]; } function Class() { if ( !initializing && this.init ) this.init.apply(this, arguments); } Class.prototype = prototype; Class.constructor = Class; Class.extend = arguments.callee; return Class;};})();
 
-// Store a list of players on the page for reference by event listeners
-var videoJSPlayers = new Array();
-
 // Video JS Player Class
 var VideoJS = Class.extend({
 
@@ -15,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
@@ -49,10 +71,16 @@ var VideoJS = Class.extend({
     // Listen for clicks on the button
     this.fullscreenControl.addEventListener("click", this.onFullscreenControlClick.context(this), false);
 
-    // Listen for the mouse over the video. Used to reveal the controller.
+    // Listen for the mouse move the video. Used to reveal the controller.
-    this.video.addEventListener("mouseover", this.onVideoMouseOver.context(this), false);
+    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);
@@ -88,8 +116,6 @@ var VideoJS = Class.extend({
       </ul>
     */
 
-    
-
     // Create a list element to hold the different controls
     this.controls = document.createElement("ul");
 
@@ -184,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";
@@ -192,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();
   },
 
@@ -216,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) {
@@ -286,8 +337,10 @@ var VideoJS = Class.extend({
     }
   },
 
-  onVideoMouseOver: function(event){
+  onVideoMouseMove: function(event){
     this.showController();
+    clearInterval(this.mouseMoveTimeout);
+    this.mouseMoveTimeout = setTimeout(function(){this.hideController(); }.context(this), 4000);
   },
 
   onVideoMouseOut: function(event){
@@ -367,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
@@ -385,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