mirror of
https://github.com/videojs/video.js.git
synced 2024-12-21 01:39:04 +02:00
Updated to latest version
This commit is contained in:
Steve Heffernan
parent
c1fba2401f
commit
b50054fbb8
@ -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
|
||||
all copies or substantial portions of the Software.
|
||||
This version of the GNU Lesser General Public License incorporates
|
||||
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
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
0. Additional Definitions.
|
||||
|
||||
As used herein, "this License" refers to version 3 of the GNU Lesser
|
||||
General Public License, and the "GNU GPL" refers to version 3 of the GNU
|
||||
General Public License.
|
||||
|
||||
"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.
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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; }
|
||||
|
||||
@ -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.
|
||||
this.video.addEventListener("mouseover", this.onVideoMouseOver.context(this), false);
|
||||
// Listen for the mouse move the video. Used to reveal the controller.
|
||||
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
|
||||
window.removeEventListener('resize', this.fullWindowResize, false);
|
||||
// Remove fullscreen styles
|
||||
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.box.className = "video-js-box";
|
||||
this.positionPoster();
|
||||
},
|
||||
|
||||
// Attempt to block the ability to select text while dragging controls
|
||||
|
||||
Loading…
Reference in New Issue
Block a user