mirror of
https://github.com/videojs/video.js.git
synced 2025-01-17 10:46:00 +02:00
1659 lines
63 KiB
JavaScript
1659 lines
63 KiB
JavaScript
/*
|
|
VideoJS - HTML5 Video Player
|
|
v1.2.0
|
|
|
|
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/>.
|
|
*/
|
|
|
|
// Self-executing function to prevent global vars and help with minification
|
|
(function(window, undefined){
|
|
var document = window.document;
|
|
|
|
// 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.JRClass = function(){}; JRClass.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 JRClass() { if ( !initializing && this.init ) this.init.apply(this, arguments); } JRClass.prototype = prototype; JRClass.constructor = JRClass; JRClass.extend = arguments.callee; return JRClass;};})();
|
|
|
|
// Video JS Player Class
|
|
var VideoJS = JRClass.extend({
|
|
|
|
// Initialize the player for the supplied video tag element
|
|
// element: video tag
|
|
init: function(element, setOptions){
|
|
|
|
// Allow an ID string or an element
|
|
if (typeof element == 'string') {
|
|
this.video = document.getElementById(element);
|
|
} else {
|
|
this.video = element;
|
|
}
|
|
// Store reference to player on the video element.
|
|
// So you can acess the player later: document.getElementById("video_id").player.play();
|
|
this.video.player = this;
|
|
|
|
// Default Options
|
|
this.options = {
|
|
autoplay: false,
|
|
preload: true,
|
|
useBuiltInControls: false, // Use the browser's controls (iPhone)
|
|
controlsBelow: false, // Display control bar below video vs. in front of
|
|
controlsAtStart: false, // Make controls visible when page loads
|
|
controlsHiding: true, // Hide controls when not over the video
|
|
defaultVolume: 0.85, // Will be overridden by localStorage volume if available
|
|
playerFallbackOrder: ["html5", "flash", "links"], // Players and order to use them
|
|
flashPlayer: "htmlObject",
|
|
flashPlayerVersion: false // Required flash version for fallback
|
|
};
|
|
// Override default options with global options
|
|
if (typeof VideoJS.options == "object") { _V_.merge(this.options, VideoJS.options); }
|
|
// Override default & global options with options specific to this player
|
|
if (typeof setOptions == "object") { _V_.merge(this.options, setOptions); }
|
|
// Override preload & autoplay with video attributes
|
|
if (this.getPreloadAttribute() !== undefined) { this.options.preload = this.getPreloadAttribute(); }
|
|
if (this.getAutoplayAttribute() !== undefined) { this.options.autoplay = this.getAutoplayAttribute(); }
|
|
|
|
// Store reference to embed code pieces
|
|
this.box = this.video.parentNode;
|
|
this.linksFallback = this.getLinksFallback();
|
|
this.hideLinksFallback(); // Will be shown again if "links" player is used
|
|
|
|
// Loop through the player names list in options, "html5" etc.
|
|
// For each player name, initialize the player with that name under VideoJS.players
|
|
// If the player successfully initializes, we're done
|
|
// If not, try the next player in the list
|
|
this.each(this.options.playerFallbackOrder, function(playerType){
|
|
if (this[playerType+"Supported"]()) { // Check if player type is supported
|
|
this[playerType+"Init"](); // Initialize player type
|
|
return true; // Stop looping though players
|
|
}
|
|
});
|
|
|
|
// Start Global Listeners - API doesn't exist before now
|
|
this.activateElement(this, "player");
|
|
this.activateElement(this.box, "box");
|
|
},
|
|
/* Behaviors
|
|
================================================================================ */
|
|
behaviors: {},
|
|
elements: {},
|
|
newBehavior: function(name, activate, functions){
|
|
this.behaviors[name] = activate;
|
|
this.extend(functions);
|
|
},
|
|
activateElement: function(element, behavior){
|
|
this.behaviors[behavior].call(this, element);
|
|
},
|
|
/* Errors/Warnings
|
|
================================================================================ */
|
|
errors: [], // Array to track errors
|
|
warnings: [],
|
|
warning: function(warning){
|
|
this.warnings.push(warning);
|
|
this.log(warning);
|
|
},
|
|
/* History of errors/events (not quite there yet)
|
|
================================================================================ */
|
|
history: [],
|
|
log: function(event){
|
|
if (!event) { return; }
|
|
if (typeof event == "string") { event = { type: event }; }
|
|
if (event.type) { this.history.push(event.type); }
|
|
if (this.history.length >= 50) { this.history.shift(); }
|
|
try { console.log(event.type); } catch(e) { try { opera.postError(event.type); } catch(e){} }
|
|
},
|
|
/* Local Storage
|
|
================================================================================ */
|
|
setLocalStorage: function(key, value){
|
|
try { localStorage[key] = value; }
|
|
catch(e) {
|
|
if (e.code == 22 || e.code == 1014) { // Webkit == 22 / Firefox == 1014
|
|
this.warning(VideoJS.warnings.localStorageFull);
|
|
}
|
|
}
|
|
},
|
|
/* Helpers
|
|
================================================================================ */
|
|
getPreloadAttribute: function(){
|
|
if (typeof this.video.hasAttribute == "function" && this.video.hasAttribute("preload")) {
|
|
var preload = this.video.getAttribute("preload");
|
|
// Only included the attribute, thinking it was boolean
|
|
if (preload === "" || preload === "true") { return "auto"; }
|
|
if (preload === "false") { return "none"; }
|
|
return preload;
|
|
}
|
|
},
|
|
getAutoplayAttribute: function(){
|
|
if (typeof this.video.hasAttribute == "function" && this.video.hasAttribute("autoplay")) {
|
|
var autoplay = this.video.getAttribute("autoplay");
|
|
if (autoplay === "false") { return false; }
|
|
return true;
|
|
}
|
|
},
|
|
// Calculates amoutn of buffer is full
|
|
bufferedPercent: function(){ return (this.duration()) ? this.buffered()[1] / this.duration() : 0; },
|
|
// Each that maintains player as context
|
|
// Break if true is returned
|
|
each: function(arr, fn){
|
|
if (!arr || arr.length === 0) { return; }
|
|
for (var i=0,j=arr.length; i<j; i++) {
|
|
if (fn.call(this, arr[i], i)) { break; }
|
|
}
|
|
},
|
|
extend: function(obj){
|
|
for (var attrname in obj) {
|
|
if (obj.hasOwnProperty(attrname)) { this[attrname]=obj[attrname]; }
|
|
}
|
|
}
|
|
});
|
|
VideoJS.player = VideoJS.prototype;
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Player Types
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
|
|
/* Flash Object Fallback (Player Type)
|
|
================================================================================ */
|
|
VideoJS.player.extend({
|
|
flashSupported: function(){
|
|
if (!this.flashElement) { this.flashElement = this.getFlashElement(); }
|
|
// Check if object exists & Flash Player version is supported
|
|
if (this.flashElement && this.flashPlayerVersionSupported()) {
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
},
|
|
flashInit: function(){
|
|
this.replaceWithFlash();
|
|
this.element = this.flashElement;
|
|
this.video.src = ""; // Stop video from downloading if HTML5 is still supported
|
|
var flashPlayerType = VideoJS.flashPlayers[this.options.flashPlayer];
|
|
this.extend(VideoJS.flashPlayers[this.options.flashPlayer].api);
|
|
(flashPlayerType.init.context(this))();
|
|
},
|
|
// Get Flash Fallback object element from Embed Code
|
|
getFlashElement: function(){
|
|
var children = this.video.children;
|
|
for (var i=0,j=children.length; i<j; i++) {
|
|
if (children[i].className == "vjs-flash-fallback") {
|
|
return children[i];
|
|
}
|
|
}
|
|
},
|
|
// Used to force a browser to fall back when it's an HTML5 browser but there's no supported sources
|
|
replaceWithFlash: function(){
|
|
// this.flashElement = this.video.removeChild(this.flashElement);
|
|
if (this.flashElement) {
|
|
this.box.insertBefore(this.flashElement, this.video);
|
|
this.video.style.display = "none"; // Removing it was breaking later players
|
|
}
|
|
},
|
|
// Check if browser can use this flash player
|
|
flashPlayerVersionSupported: function(){
|
|
var playerVersion = (this.options.flashPlayerVersion) ? this.options.flashPlayerVersion : VideoJS.flashPlayers[this.options.flashPlayer].flashPlayerVersion;
|
|
return VideoJS.getFlashVersion() >= playerVersion;
|
|
}
|
|
});
|
|
VideoJS.flashPlayers = {};
|
|
VideoJS.flashPlayers.htmlObject = {
|
|
flashPlayerVersion: 9,
|
|
init: function() { return true; },
|
|
api: { // No video API available with HTML Object embed method
|
|
width: function(width){
|
|
if (width !== undefined) {
|
|
this.element.width = width;
|
|
this.box.style.width = width+"px";
|
|
this.triggerResizeListeners();
|
|
return this;
|
|
}
|
|
return this.element.offsetWidth;
|
|
},
|
|
height: function(height){
|
|
if (height !== undefined) {
|
|
this.element.height = height;
|
|
this.box.style.height = height+"px";
|
|
this.triggerResizeListeners();
|
|
return this;
|
|
}
|
|
return this.element.offsetHeight;
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
/* Download Links Fallback (Player Type)
|
|
================================================================================ */
|
|
VideoJS.player.extend({
|
|
linksSupported: function(){ return true; },
|
|
linksInit: function(){
|
|
this.showLinksFallback();
|
|
this.element = this.video;
|
|
},
|
|
// Get the download links block element
|
|
getLinksFallback: function(){ return this.box.getElementsByTagName("P")[0]; },
|
|
// Hide no-video download paragraph
|
|
hideLinksFallback: function(){
|
|
if (this.linksFallback) { this.linksFallback.style.display = "none"; }
|
|
},
|
|
// Hide no-video download paragraph
|
|
showLinksFallback: function(){
|
|
if (this.linksFallback) { this.linksFallback.style.display = "block"; }
|
|
}
|
|
});
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
// Class Methods
|
|
// Functions that don't apply to individual videos.
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
|
|
// Combine Objects - Use "safe" to protect from overwriting existing items
|
|
VideoJS.merge = function(obj1, obj2, safe){
|
|
for (var attrname in obj2){
|
|
if (obj2.hasOwnProperty(attrname) && (!safe || !obj1.hasOwnProperty(attrname))) { obj1[attrname]=obj2[attrname]; }
|
|
}
|
|
return obj1;
|
|
};
|
|
VideoJS.extend = function(obj){ this.merge(this, obj, true); };
|
|
|
|
VideoJS.extend({
|
|
// Add VideoJS to all video tags with the video-js class when the DOM is ready
|
|
setupAllWhenReady: function(options){
|
|
// Options is stored globally, and added ot any new player on init
|
|
VideoJS.options = options;
|
|
VideoJS.DOMReady(VideoJS.setup);
|
|
},
|
|
|
|
// Run the supplied function when the DOM is ready
|
|
DOMReady: function(fn){
|
|
VideoJS.addToDOMReady(fn);
|
|
},
|
|
|
|
// Set up a specific video or array of video elements
|
|
// "video" can be:
|
|
// false, undefined, or "All": set up all videos with the video-js class
|
|
// A video tag ID or video tag element: set up one video and return one player
|
|
// An array of video tag elements/IDs: set up each and return an array of players
|
|
setup: function(videos, options){
|
|
var returnSingular = false,
|
|
playerList = [],
|
|
videoElement;
|
|
|
|
// If videos is undefined or "All", set up all videos with the video-js class
|
|
if (!videos || videos == "All") {
|
|
videos = VideoJS.getVideoJSTags();
|
|
// If videos is not an array, add to an array
|
|
} else if (typeof videos != 'object' || videos.nodeType == 1) {
|
|
videos = [videos];
|
|
returnSingular = true;
|
|
}
|
|
|
|
// Loop through videos and create players for them
|
|
for (var i=0; i<videos.length; i++) {
|
|
if (typeof videos[i] == 'string') {
|
|
videoElement = document.getElementById(videos[i]);
|
|
} else { // assume DOM object
|
|
videoElement = videos[i];
|
|
}
|
|
playerList.push(new VideoJS(videoElement, options));
|
|
}
|
|
|
|
// Return one or all depending on what was passed in
|
|
return (returnSingular) ? playerList[0] : playerList;
|
|
},
|
|
|
|
// Find video tags with the video-js class
|
|
getVideoJSTags: function() {
|
|
var videoTags = document.getElementsByTagName("video"),
|
|
videoJSTags = [], videoTag;
|
|
|
|
for (var i=0,j=videoTags.length; i<j; i++) {
|
|
videoTag = videoTags[i];
|
|
if (videoTag.className.indexOf("video-js") != -1) {
|
|
videoJSTags.push(videoTag);
|
|
}
|
|
}
|
|
return videoJSTags;
|
|
},
|
|
|
|
// Check if the browser supports video.
|
|
browserSupportsVideo: function() {
|
|
if (typeof VideoJS.videoSupport != "undefined") { return VideoJS.videoSupport; }
|
|
VideoJS.videoSupport = !!document.createElement('video').canPlayType;
|
|
return VideoJS.videoSupport;
|
|
},
|
|
|
|
getFlashVersion: function(){
|
|
// Cache Version
|
|
if (typeof VideoJS.flashVersion != "undefined") { return VideoJS.flashVersion; }
|
|
var version = 0, desc;
|
|
if (typeof navigator.plugins != "undefined" && typeof navigator.plugins["Shockwave Flash"] == "object") {
|
|
desc = navigator.plugins["Shockwave Flash"].description;
|
|
if (desc && !(typeof navigator.mimeTypes != "undefined" && navigator.mimeTypes["application/x-shockwave-flash"] && !navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin)) {
|
|
version = parseInt(desc.match(/^.*\s+([^\s]+)\.[^\s]+\s+[^\s]+$/)[1], 10);
|
|
}
|
|
} else if (typeof window.ActiveXObject != "undefined") {
|
|
try {
|
|
var testObject = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
|
|
if (testObject) {
|
|
version = parseInt(testObject.GetVariable("$version").match(/^[^\s]+\s(\d+)/)[1], 10);
|
|
}
|
|
}
|
|
catch(e) {}
|
|
}
|
|
VideoJS.flashVersion = version;
|
|
return VideoJS.flashVersion;
|
|
},
|
|
|
|
// Browser & Device Checks
|
|
isIE: function(){ return !+"\v1"; },
|
|
isIPad: function(){ return navigator.userAgent.match(/iPad/i) !== null; },
|
|
isIPhone: function(){ return navigator.userAgent.match(/iPhone/i) !== null; },
|
|
isIOS: function(){ return VideoJS.isIPhone() || VideoJS.isIPad(); },
|
|
iOSVersion: function() {
|
|
var match = navigator.userAgent.match(/OS (\d+)_/i);
|
|
if (match && match[1]) { return match[1]; }
|
|
},
|
|
isAndroid: function(){ return navigator.userAgent.match(/Android/i) !== null; },
|
|
androidVersion: function() {
|
|
var match = navigator.userAgent.match(/Android (\d+)\./i);
|
|
if (match && match[1]) { return match[1]; }
|
|
},
|
|
|
|
warnings: {
|
|
// Safari errors if you call functions on a video that hasn't loaded yet
|
|
videoNotReady: "Video is not ready yet (try playing the video first).",
|
|
// Getting a QUOTA_EXCEEDED_ERR when setting local storage occasionally
|
|
localStorageFull: "Local Storage is Full"
|
|
}
|
|
});
|
|
|
|
// Shim to make Video tag valid in IE
|
|
if(VideoJS.isIE()) { document.createElement("video"); }
|
|
|
|
// Expose to global
|
|
window.VideoJS = window._V_ = VideoJS;
|
|
/* HTML5 Player Type
|
|
================================================================================ */
|
|
VideoJS.player.extend({
|
|
html5Supported: function(){
|
|
if (VideoJS.browserSupportsVideo() && this.canPlaySource()) {
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
},
|
|
html5Init: function(){
|
|
this.element = this.video;
|
|
|
|
this.fixPreloading(); // Support old browsers that used autobuffer
|
|
this.supportProgressEvents(); // Support browsers that don't use 'buffered'
|
|
|
|
// Set to stored volume OR 85%
|
|
this.volume((localStorage && localStorage.volume) || this.options.defaultVolume);
|
|
|
|
// Update interface for device needs
|
|
if (VideoJS.isIOS()) {
|
|
this.options.useBuiltInControls = true;
|
|
this.iOSInterface();
|
|
} else if (VideoJS.isAndroid()) {
|
|
this.options.useBuiltInControls = true;
|
|
this.androidInterface();
|
|
}
|
|
|
|
// Add VideoJS Controls
|
|
if (!this.options.useBuiltInControls) {
|
|
this.video.controls = false;
|
|
|
|
if (this.options.controlsBelow) { _V_.addClass(this.box, "vjs-controls-below"); }
|
|
|
|
// Make a click on th video act as a play button
|
|
this.activateElement(this.video, "playToggle");
|
|
|
|
// Build Interface
|
|
this.buildStylesCheckDiv(); // Used to check if style are loaded
|
|
this.buildAndActivatePoster();
|
|
this.buildBigPlayButton();
|
|
this.buildAndActivateSpinner();
|
|
this.buildAndActivateControlBar();
|
|
this.loadInterface(); // Show everything once styles are loaded
|
|
this.getSubtitles();
|
|
}
|
|
},
|
|
/* Source Managemet
|
|
================================================================================ */
|
|
canPlaySource: function(){
|
|
// Cache Result
|
|
if (this.canPlaySourceResult) { return this.canPlaySourceResult; }
|
|
// Loop through sources and check if any can play
|
|
var children = this.video.children;
|
|
for (var i=0,j=children.length; i<j; i++) {
|
|
if (children[i].tagName.toUpperCase() == "SOURCE") {
|
|
var canPlay = this.video.canPlayType(children[i].type) || this.canPlayExt(children[i].src);
|
|
if (canPlay == "probably" || canPlay == "maybe") {
|
|
this.firstPlayableSource = children[i];
|
|
this.canPlaySourceResult = true;
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
this.canPlaySourceResult = false;
|
|
return false;
|
|
},
|
|
// Check if the extention is compatible, for when type won't work
|
|
canPlayExt: function(src){
|
|
if (!src) { return ""; }
|
|
var match = src.match(/\.([^\.]+)$/);
|
|
if (match && match[1]) {
|
|
var ext = match[1].toLowerCase();
|
|
// Android canPlayType doesn't work
|
|
if (VideoJS.isAndroid()) {
|
|
if (ext == "mp4" || ext == "m4v") { return "maybe"; }
|
|
// Allow Apple HTTP Streaming for iOS
|
|
} else if (VideoJS.isIOS()) {
|
|
if (ext == "m3u8") { return "maybe"; }
|
|
}
|
|
}
|
|
return "";
|
|
},
|
|
// Force the video source - Helps fix loading bugs in a handful of devices, like the iPad/iPhone poster bug
|
|
// And iPad/iPhone javascript include location bug. And Android type attribute bug
|
|
forceTheSource: function(){
|
|
this.video.src = this.firstPlayableSource.src; // From canPlaySource()
|
|
this.video.load();
|
|
},
|
|
/* Device Fixes
|
|
================================================================================ */
|
|
// Support older browsers that used "autobuffer"
|
|
fixPreloading: function(){
|
|
if (typeof this.video.hasAttribute == "function" && this.video.hasAttribute("preload") && this.video.preload != "none") {
|
|
this.video.autobuffer = true; // Was a boolean
|
|
} else {
|
|
this.video.autobuffer = false;
|
|
this.video.preload = "none";
|
|
}
|
|
},
|
|
|
|
// Listen for Video Load Progress (currently does not if html file is local)
|
|
// Buffered does't work in all browsers, so watching progress as well
|
|
supportProgressEvents: function(e){
|
|
this.video.addEventListener('progress', this.playerOnVideoProgress.context(this), false);
|
|
},
|
|
playerOnVideoProgress: function(event){
|
|
this.setBufferedFromProgress(event);
|
|
},
|
|
setBufferedFromProgress: function(event){ // HTML5 Only
|
|
if(event.total > 0) {
|
|
var newBufferEnd = (event.loaded / event.total) * this.duration();
|
|
if (newBufferEnd > this.values.bufferEnd) { this.values.bufferEnd = newBufferEnd; }
|
|
}
|
|
},
|
|
|
|
iOSInterface: function(){
|
|
if(VideoJS.iOSVersion() < 4) { this.forceTheSource(); } // Fix loading issues
|
|
if(VideoJS.isIPad()) { // iPad could work with controlsBelow
|
|
this.buildAndActivateSpinner(); // Spinner still works well on iPad, since iPad doesn't have one
|
|
}
|
|
},
|
|
|
|
// Fix android specific quirks
|
|
// Use built-in controls, but add the big play button, since android doesn't have one.
|
|
androidInterface: function(){
|
|
this.forceTheSource(); // Fix loading issues
|
|
this.video.addEventListener("click", function(){ this.play(); }, false); // Required to play
|
|
this.buildBigPlayButton(); // But don't activate the normal way. Pause doesn't work right on android.
|
|
this.bigPlayButton.addEventListener("click", function(){ this.play(); }.context(this), false);
|
|
this.positionBox();
|
|
this.showBigPlayButtons();
|
|
},
|
|
/* Wait for styles (TODO: move to _V_)
|
|
================================================================================ */
|
|
loadInterface: function(){
|
|
if(!this.stylesHaveLoaded()) {
|
|
// Don't want to create an endless loop either.
|
|
if (!this.positionRetries) { this.positionRetries = 1; }
|
|
if (this.positionRetries++ < 100) {
|
|
setTimeout(this.loadInterface.context(this),10);
|
|
return;
|
|
}
|
|
}
|
|
this.hideStylesCheckDiv();
|
|
this.showPoster();
|
|
if (this.video.paused !== false) { this.showBigPlayButtons(); }
|
|
if (this.options.controlsAtStart) { this.showControlBars(); }
|
|
this.positionAll();
|
|
},
|
|
/* Control Bar
|
|
================================================================================ */
|
|
buildAndActivateControlBar: function(){
|
|
/* Creating this HTML
|
|
<div class="vjs-controls">
|
|
<div class="vjs-play-control">
|
|
<span></span>
|
|
</div>
|
|
<div class="vjs-progress-control">
|
|
<div class="vjs-progress-holder">
|
|
<div class="vjs-load-progress"></div>
|
|
<div class="vjs-play-progress"></div>
|
|
</div>
|
|
</div>
|
|
<div class="vjs-time-control">
|
|
<span class="vjs-current-time-display">00:00</span><span> / </span><span class="vjs-duration-display">00:00</span>
|
|
</div>
|
|
<div class="vjs-volume-control">
|
|
<div>
|
|
<span></span><span></span><span></span><span></span><span></span><span></span>
|
|
</div>
|
|
</div>
|
|
<div class="vjs-fullscreen-control">
|
|
<div>
|
|
<span></span><span></span><span></span><span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
*/
|
|
|
|
// Create a div to hold the different controls
|
|
this.controls = _V_.createElement("div", { className: "vjs-controls" });
|
|
// Add the controls to the video's container
|
|
this.box.appendChild(this.controls);
|
|
this.activateElement(this.controls, "controlBar");
|
|
this.activateElement(this.controls, "mouseOverVideoReporter");
|
|
|
|
// Build the play control
|
|
this.playControl = _V_.createElement("div", { className: "vjs-play-control", innerHTML: "<span></span>" });
|
|
this.controls.appendChild(this.playControl);
|
|
this.activateElement(this.playControl, "playToggle");
|
|
|
|
// Build the progress control
|
|
this.progressControl = _V_.createElement("div", { className: "vjs-progress-control" });
|
|
this.controls.appendChild(this.progressControl);
|
|
|
|
// Create a holder for the progress bars
|
|
this.progressHolder = _V_.createElement("div", { className: "vjs-progress-holder" });
|
|
this.progressControl.appendChild(this.progressHolder);
|
|
this.activateElement(this.progressHolder, "currentTimeScrubber");
|
|
|
|
// Create the loading progress display
|
|
this.loadProgressBar = _V_.createElement("div", { className: "vjs-load-progress" });
|
|
this.progressHolder.appendChild(this.loadProgressBar);
|
|
this.activateElement(this.loadProgressBar, "loadProgressBar");
|
|
|
|
// Create the playing progress display
|
|
this.playProgressBar = _V_.createElement("div", { className: "vjs-play-progress" });
|
|
this.progressHolder.appendChild(this.playProgressBar);
|
|
this.activateElement(this.playProgressBar, "playProgressBar");
|
|
|
|
// Create the progress time display (00:00 / 00:00)
|
|
this.timeControl = _V_.createElement("div", { className: "vjs-time-control" });
|
|
this.controls.appendChild(this.timeControl);
|
|
|
|
// Create the current play time display
|
|
this.currentTimeDisplay = _V_.createElement("span", { className: "vjs-current-time-display", innerHTML: "00:00" });
|
|
this.timeControl.appendChild(this.currentTimeDisplay);
|
|
this.activateElement(this.currentTimeDisplay, "currentTimeDisplay");
|
|
|
|
// Add time separator
|
|
this.timeSeparator = _V_.createElement("span", { innerHTML: " / " });
|
|
this.timeControl.appendChild(this.timeSeparator);
|
|
|
|
// Create the total duration display
|
|
this.durationDisplay = _V_.createElement("span", { className: "vjs-duration-display", innerHTML: "00:00" });
|
|
this.timeControl.appendChild(this.durationDisplay);
|
|
this.activateElement(this.durationDisplay, "durationDisplay");
|
|
|
|
// Create the volumne control
|
|
this.volumeControl = _V_.createElement("div", {
|
|
className: "vjs-volume-control",
|
|
innerHTML: "<div><span></span><span></span><span></span><span></span><span></span><span></span></div>"
|
|
});
|
|
this.controls.appendChild(this.volumeControl);
|
|
this.activateElement(this.volumeControl, "volumeScrubber");
|
|
|
|
this.volumeDisplay = this.volumeControl.children[0];
|
|
this.activateElement(this.volumeDisplay, "volumeDisplay");
|
|
|
|
// Crete the fullscreen control
|
|
this.fullscreenControl = _V_.createElement("div", {
|
|
className: "vjs-fullscreen-control",
|
|
innerHTML: "<div><span></span><span></span><span></span><span></span></div>"
|
|
});
|
|
this.controls.appendChild(this.fullscreenControl);
|
|
this.activateElement(this.fullscreenControl, "fullscreenToggle");
|
|
},
|
|
/* Poster Image
|
|
================================================================================ */
|
|
buildAndActivatePoster: function(){
|
|
this.updatePosterSource();
|
|
if (this.video.poster) {
|
|
this.poster = document.createElement("img");
|
|
// Add poster to video box
|
|
this.box.appendChild(this.poster);
|
|
|
|
// Add poster image data
|
|
this.poster.src = this.video.poster;
|
|
// Add poster styles
|
|
this.poster.className = "vjs-poster";
|
|
this.activateElement(this.poster, "poster");
|
|
} else {
|
|
this.poster = false;
|
|
}
|
|
},
|
|
/* Big Play Button
|
|
================================================================================ */
|
|
buildBigPlayButton: function(){
|
|
/* Creating this HTML
|
|
<div class="vjs-big-play-button"><span></span></div>
|
|
*/
|
|
this.bigPlayButton = _V_.createElement("div", {
|
|
className: "vjs-big-play-button",
|
|
innerHTML: "<span></span>"
|
|
});
|
|
this.box.appendChild(this.bigPlayButton);
|
|
this.activateElement(this.bigPlayButton, "bigPlayButton");
|
|
},
|
|
/* Spinner (Loading)
|
|
================================================================================ */
|
|
buildAndActivateSpinner: function(){
|
|
this.spinner = _V_.createElement("div", {
|
|
className: "vjs-spinner",
|
|
innerHTML: "<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>"
|
|
});
|
|
this.box.appendChild(this.spinner);
|
|
this.activateElement(this.spinner, "spinner");
|
|
},
|
|
/* Styles Check - Check if styles are loaded (move ot _V_)
|
|
================================================================================ */
|
|
// Sometimes the CSS styles haven't been applied to the controls yet
|
|
// when we're trying to calculate the height and position them correctly.
|
|
// This causes a flicker where the controls are out of place.
|
|
buildStylesCheckDiv: function(){
|
|
this.stylesCheckDiv = _V_.createElement("div", { className: "vjs-styles-check" });
|
|
this.stylesCheckDiv.style.position = "absolute";
|
|
this.box.appendChild(this.stylesCheckDiv);
|
|
},
|
|
hideStylesCheckDiv: function(){ this.stylesCheckDiv.style.display = "none"; },
|
|
stylesHaveLoaded: function(){
|
|
if (this.stylesCheckDiv.offsetHeight != 5) {
|
|
return false;
|
|
} else {
|
|
return true;
|
|
}
|
|
},
|
|
/* VideoJS Box - Holds all elements
|
|
================================================================================ */
|
|
positionAll: function(){
|
|
this.positionBox();
|
|
this.positionControlBars();
|
|
this.positionPoster();
|
|
},
|
|
positionBox: function(){
|
|
// Set width based on fullscreen or not.
|
|
if (this.videoIsFullScreen) {
|
|
this.box.style.width = "";
|
|
this.element.style.height="";
|
|
if (this.options.controlsBelow) {
|
|
this.box.style.height = "";
|
|
this.element.style.height = (this.box.offsetHeight - this.controls.offsetHeight) + "px";
|
|
}
|
|
} else {
|
|
this.box.style.width = this.width() + "px";
|
|
this.element.style.height=this.height()+"px";
|
|
if (this.options.controlsBelow) {
|
|
this.element.style.height = "";
|
|
// this.box.style.height = this.video.offsetHeight + this.controls.offsetHeight + "px";
|
|
}
|
|
}
|
|
},
|
|
/* Subtitles
|
|
================================================================================ */
|
|
getSubtitles: function(){
|
|
var tracks = this.video.getElementsByTagName("TRACK");
|
|
for (var i=0,j=tracks.length; i<j; i++) {
|
|
if (tracks[i].getAttribute("kind") == "subtitles") { this.subtitlesSource = tracks[i].getAttribute("src"); }
|
|
}
|
|
if (this.subtitlesSource !== undefined) {
|
|
this.loadSubtitles();
|
|
this.buildSubtitles();
|
|
}
|
|
},
|
|
loadSubtitles: function() { _V_.get(this.subtitlesSource, this.parseSubtitles.context(this)); },
|
|
parseSubtitles: function(subText) {
|
|
var lines = subText.replace("\r",'').split("\n");
|
|
this.subtitles = [];
|
|
this.currentSubtitlePosition = 0;
|
|
|
|
var i = 0;
|
|
while(i<lines.length) {
|
|
// define the current subtitle object
|
|
var subtitle = {};
|
|
// get the number
|
|
subtitle.id = lines[i++];
|
|
if (!subtitle.id) { break; }
|
|
// get time
|
|
var time = lines[i++].split(" --> ");
|
|
subtitle.startTime = this.parseSubtitleTime(time[0]);
|
|
subtitle.endTime = this.parseSubtitleTime(time[1]);
|
|
// get subtitle text
|
|
var text = [];
|
|
while(lines[i].length>0 && lines[i]!="\r") {
|
|
text.push(lines[i++]);
|
|
}
|
|
subtitle.text = text.join('<br/>');
|
|
// add this subtitle
|
|
this.subtitles.push(subtitle);
|
|
// ignore the blank line
|
|
i++;
|
|
}
|
|
},
|
|
|
|
parseSubtitleTime: function(timeText) {
|
|
var parts = timeText.split(':');
|
|
var time = 0;
|
|
// hours => seconds
|
|
time += parseFloat(parts[0])*60*60;
|
|
// minutes => seconds
|
|
time += parseFloat(parts[1])*60;
|
|
// get seconds
|
|
var seconds = parts[2].split(',');
|
|
time += parseFloat(seconds[0]);
|
|
// add miliseconds
|
|
time = time + parseFloat(seconds[1])/1000;
|
|
return time;
|
|
},
|
|
|
|
buildSubtitles: function(){
|
|
/* Creating this HTML
|
|
<div class="vjs-subtitles"></div>
|
|
*/
|
|
this.subtitlesDisplay = _V_.createElement("div", { className: 'vjs-subtitles' });
|
|
this.box.appendChild(this.subtitlesDisplay);
|
|
this.activateElement(this.subtitlesDisplay, "subtitlesDisplay");
|
|
},
|
|
|
|
/* Player API - Translate functionality from player to video
|
|
================================================================================ */
|
|
values: {}, // Storage for setters and getters of the same name.
|
|
addVideoListener: function(type, fn){ this.video.addEventListener(type,fn.rEvtContext(this),false); },
|
|
|
|
play: function(){
|
|
this.video.play();
|
|
return this;
|
|
},
|
|
onPlay: function(fn){ this.addVideoListener("play", fn); return this; },
|
|
|
|
pause: function(){
|
|
this.video.pause();
|
|
return this;
|
|
},
|
|
onPause: function(fn){ this.addVideoListener("pause", fn); return this; },
|
|
paused: function() { return this.video.paused; },
|
|
|
|
currentTime: function(seconds){
|
|
if (seconds !== undefined) {
|
|
try { this.video.currentTime = seconds; }
|
|
catch(e) { this.warning(VideoJS.warnings.videoNotReady); }
|
|
this.values.currentTime = seconds;
|
|
return this;
|
|
}
|
|
|
|
return this.video.currentTime;
|
|
},
|
|
// Allow for smoother visual scrubbing
|
|
lastSetCurrentTime: function(){ return this.values.currentTime; },
|
|
duration: function(){
|
|
return this.video.duration;
|
|
},
|
|
|
|
buffered: function(){
|
|
// Storing values allows them be overridden by setBufferedFromProgress
|
|
if (this.values.bufferStart === undefined) {
|
|
this.values.bufferStart = 0;
|
|
this.values.bufferEnd = 0;
|
|
}
|
|
if (this.video.buffered && this.video.buffered.length > 0 && this.video.buffered.end(0) > this.values.bufferEnd) {
|
|
this.values.bufferEnd = this.video.buffered.end(0);
|
|
}
|
|
return [this.values.bufferStart, this.values.bufferEnd];
|
|
},
|
|
|
|
volume: function(percentAsDecimal){
|
|
if (percentAsDecimal !== undefined) {
|
|
this.values.volume = parseFloat(percentAsDecimal);
|
|
this.video.volume = this.values.volume;
|
|
this.setLocalStorage("volume", this.values.volume);
|
|
return this;
|
|
}
|
|
if (this.values.volume) { return this.values.volume; }
|
|
return this.video.volume;
|
|
},
|
|
onVolumeChange: function(fn){ this.video.addEventListener('volumechange',fn.rEvtContext(this),false); },
|
|
|
|
width: function(width){
|
|
if (width !== undefined) {
|
|
this.video.width = width; // Not using style so it can be overridden on fullscreen.
|
|
this.box.style.width = width+"px";
|
|
this.triggerResizeListeners();
|
|
return this;
|
|
}
|
|
return this.video.offsetWidth;
|
|
},
|
|
height: function(height){
|
|
if (height !== undefined) {
|
|
this.video.height = height;
|
|
this.box.style.height = height+"px";
|
|
this.triggerResizeListeners();
|
|
return this;
|
|
}
|
|
return this.video.offsetHeight;
|
|
},
|
|
|
|
supportsFullScreen: function(){
|
|
if(typeof this.video.webkitEnterFullScreen == 'function') {
|
|
// Seems to be broken in Chromium/Chrome
|
|
if (!navigator.userAgent.match("Chrome")) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
enterFullScreen: function(){
|
|
try {
|
|
this.video.webkitEnterFullScreen();
|
|
} catch (e) {
|
|
if (e.code == 11) { this.warning(VideoJS.warnings.videoNotReady); }
|
|
}
|
|
return this;
|
|
},
|
|
|
|
onError: function(fn){ this.addVideoListener("error", fn); return this; },
|
|
onEnded: function(fn){
|
|
this.addVideoListener("ended", fn); return this;
|
|
}
|
|
});////////////////////////////////////////////////////////////////////////////////
|
|
// Element Behaviors
|
|
// Tell elements how to act or react
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
|
|
/* Player Behaviors - How VideoJS reacts to what the video is doing.
|
|
================================================================================ */
|
|
VideoJS.player.newBehavior("player", function(player){
|
|
this.onError(this.playerOnVideoError);
|
|
// Listen for when the video is played
|
|
this.onPlay(this.playerOnVideoPlay);
|
|
// Listen for when the video is paused
|
|
this.onPause(this.playerOnVideoPause);
|
|
// Listen for when the video ends
|
|
this.onEnded(this.playerOnVideoEnded);
|
|
// Set interval for load progress using buffer watching method
|
|
this.trackCurrentTime();
|
|
this.trackBuffered();
|
|
// Buffer Full
|
|
this.onBufferedUpdate(this.isBufferFull);
|
|
},{
|
|
playerOnVideoError: function(event){
|
|
this.log(this.video.error);
|
|
},
|
|
playerOnVideoPlay: function(event){ this.hasPlayed = true; },
|
|
playerOnVideoPause: function(event){},
|
|
playerOnVideoEnded: function(event){
|
|
this.currentTime(0);
|
|
this.pause();
|
|
},
|
|
|
|
/* Load Tracking -------------------------------------------------------------- */
|
|
// Buffer watching method for load progress.
|
|
// Used for browsers that don't support the progress event
|
|
trackBuffered: function(){
|
|
this.bufferedInterval = setInterval(this.triggerBufferedListeners.context(this), 100);
|
|
},
|
|
stopTrackingBuffered: function(){ clearInterval(this.bufferedInterval); },
|
|
bufferedListeners: [],
|
|
onBufferedUpdate: function(fn){
|
|
this.bufferedListeners.push(fn);
|
|
},
|
|
triggerBufferedListeners: function(){
|
|
this.each(this.bufferedListeners, function(listener){
|
|
(listener.context(this))();
|
|
});
|
|
},
|
|
isBufferFull: function(){
|
|
if (this.bufferedPercent() == 1) { this.stopTrackingBuffered(); }
|
|
},
|
|
|
|
/* Time Tracking -------------------------------------------------------------- */
|
|
trackCurrentTime: function(){
|
|
if (this.currentTimeInterval) { clearInterval(this.currentTimeInterval); }
|
|
this.currentTimeInterval = setInterval(this.triggerCurrentTimeListeners.context(this), 42); // 24 fps
|
|
this.trackingCurrentTime = true;
|
|
},
|
|
// Turn off play progress tracking (when paused or dragging)
|
|
stopTrackingCurrentTime: function(){
|
|
clearInterval(this.currentTimeInterval);
|
|
this.trackingCurrentTime = false;
|
|
},
|
|
currentTimeListeners: [],
|
|
onCurrentTimeUpdate: function(fn){
|
|
this.currentTimeListeners.push(fn);
|
|
},
|
|
triggerCurrentTimeListeners: function(late, newTime){ // FF passes milliseconds late a the first argument
|
|
this.each(this.currentTimeListeners, function(listener){
|
|
(listener.context(this))(newTime);
|
|
});
|
|
},
|
|
|
|
/* Resize Tracking -------------------------------------------------------------- */
|
|
resizeListeners: [],
|
|
onResize: function(fn){
|
|
this.resizeListeners.push(fn);
|
|
},
|
|
// Trigger anywhere the video/box size is changed.
|
|
triggerResizeListeners: function(){
|
|
this.each(this.resizeListeners, function(listener){
|
|
(listener.context(this))();
|
|
});
|
|
}
|
|
}
|
|
);
|
|
/* Mouse Over Video Reporter Behaviors - i.e. Controls hiding based on mouse location
|
|
================================================================================ */
|
|
VideoJS.player.newBehavior("mouseOverVideoReporter", function(element){
|
|
// Listen for the mouse move the video. Used to reveal the controller.
|
|
element.addEventListener("mousemove", this.mouseOverVideoReporterOnMouseMove.context(this), false);
|
|
// Listen for the mouse moving out of the video. Used to hide the controller.
|
|
element.addEventListener("mouseout", this.mouseOverVideoReporterOnMouseOut.context(this), false);
|
|
},{
|
|
mouseOverVideoReporterOnMouseMove: function(){
|
|
this.showControlBars();
|
|
clearInterval(this.mouseMoveTimeout);
|
|
this.mouseMoveTimeout = setTimeout(this.hideControlBars.context(this), 4000);
|
|
},
|
|
mouseOverVideoReporterOnMouseOut: function(event){
|
|
// Prevent flicker by making sure mouse hasn't left the video
|
|
var parent = event.relatedTarget;
|
|
while (parent && parent !== this.box) {
|
|
parent = parent.parentNode;
|
|
}
|
|
if (parent !== this.box) {
|
|
this.hideControlBars();
|
|
}
|
|
}
|
|
}
|
|
);
|
|
/* Mouse Over Video Reporter Behaviors - i.e. Controls hiding based on mouse location
|
|
================================================================================ */
|
|
VideoJS.player.newBehavior("box", function(element){
|
|
this.positionBox();
|
|
_V_.addClass(element, "vjs-paused");
|
|
this.activateElement(element, "mouseOverVideoReporter");
|
|
this.onPlay(this.boxOnVideoPlay);
|
|
this.onPause(this.boxOnVideoPause);
|
|
},{
|
|
boxOnVideoPlay: function(){
|
|
_V_.removeClass(this.box, "vjs-paused");
|
|
_V_.addClass(this.box, "vjs-playing");
|
|
},
|
|
boxOnVideoPause: function(){
|
|
_V_.removeClass(this.box, "vjs-playing");
|
|
_V_.addClass(this.box, "vjs-paused");
|
|
}
|
|
}
|
|
);
|
|
/* Poster Image Overlay
|
|
================================================================================ */
|
|
VideoJS.player.newBehavior("poster", function(element){
|
|
this.activateElement(element, "mouseOverVideoReporter");
|
|
this.activateElement(element, "playButton");
|
|
this.onPlay(this.hidePoster);
|
|
this.onEnded(this.showPoster);
|
|
this.onResize(this.positionPoster);
|
|
},{
|
|
showPoster: function(){
|
|
if (!this.poster) { return; }
|
|
this.poster.style.display = "block";
|
|
this.positionPoster();
|
|
},
|
|
positionPoster: function(){
|
|
// Only if the poster is visible
|
|
if (!this.poster || this.poster.style.display == 'none') { return; }
|
|
this.poster.style.height = this.height() + "px"; // Need incase controlsBelow
|
|
this.poster.style.width = this.width() + "px"; // Could probably do 100% of box
|
|
},
|
|
hidePoster: function(){
|
|
if (!this.poster) { return; }
|
|
this.poster.style.display = "none";
|
|
},
|
|
// Update poster source from attribute or fallback image
|
|
// iPad breaks if you include a poster attribute, so this fixes that
|
|
updatePosterSource: function(){
|
|
if (!this.video.poster) {
|
|
var images = this.video.getElementsByTagName("img");
|
|
if (images.length > 0) { this.video.poster = images[0].src; }
|
|
}
|
|
}
|
|
}
|
|
);
|
|
/* Control Bar Behaviors
|
|
================================================================================ */
|
|
VideoJS.player.newBehavior("controlBar", function(element){
|
|
if (!this.controlBars) {
|
|
this.controlBars = [];
|
|
this.onResize(this.positionControlBars);
|
|
}
|
|
this.controlBars.push(element);
|
|
element.addEventListener("mousemove", this.onControlBarsMouseMove.context(this), false);
|
|
element.addEventListener("mouseout", this.onControlBarsMouseOut.context(this), false);
|
|
},{
|
|
showControlBars: function(){
|
|
if (!this.options.controlsAtStart && !this.hasPlayed) { return; }
|
|
this.each(this.controlBars, function(bar){
|
|
bar.style.display = "block";
|
|
});
|
|
},
|
|
// Place controller relative to the video's position (now just resizing bars)
|
|
positionControlBars: function(){
|
|
this.updatePlayProgressBars();
|
|
this.updateLoadProgressBars();
|
|
},
|
|
hideControlBars: function(){
|
|
if (this.options.controlsHiding && !this.mouseIsOverControls) {
|
|
this.each(this.controlBars, function(bar){
|
|
bar.style.display = "none";
|
|
});
|
|
}
|
|
},
|
|
// Block controls from hiding when mouse is over them.
|
|
onControlBarsMouseMove: function(){ this.mouseIsOverControls = true; },
|
|
onControlBarsMouseOut: function(event){
|
|
this.mouseIsOverControls = false;
|
|
}
|
|
}
|
|
);
|
|
/* PlayToggle, PlayButton, PauseButton Behaviors
|
|
================================================================================ */
|
|
// Play Toggle
|
|
VideoJS.player.newBehavior("playToggle", function(element){
|
|
element.addEventListener("click", this.onPlayToggleClick.context(this), false);
|
|
},{
|
|
onPlayToggleClick: function(event){
|
|
if (this.paused()) {
|
|
this.play();
|
|
} else {
|
|
this.pause();
|
|
}
|
|
}
|
|
}
|
|
);
|
|
// Play
|
|
VideoJS.player.newBehavior("playButton", function(element){
|
|
element.addEventListener("click", this.onPlayButtonClick.context(this), false);
|
|
},{
|
|
onPlayButtonClick: function(event){ this.play(); }
|
|
}
|
|
);
|
|
// Pause
|
|
VideoJS.player.newBehavior("pauseButton", function(element){
|
|
element.addEventListener("click", this.onPauseButtonClick.context(this), false);
|
|
},{
|
|
onPauseButtonClick: function(event){ this.pause(); }
|
|
}
|
|
);
|
|
/* Play Progress Bar Behaviors
|
|
================================================================================ */
|
|
VideoJS.player.newBehavior("playProgressBar", function(element){
|
|
if (!this.playProgressBars) {
|
|
this.playProgressBars = [];
|
|
this.onCurrentTimeUpdate(this.updatePlayProgressBars);
|
|
}
|
|
this.playProgressBars.push(element);
|
|
},{
|
|
// Ajust the play progress bar's width based on the current play time
|
|
updatePlayProgressBars: function(newTime){
|
|
var progress = (newTime !== undefined) ? newTime / this.duration() : this.currentTime() / this.duration();
|
|
this.each(this.playProgressBars, function(bar){
|
|
if (bar.style) { bar.style.width = _V_.round(progress * 100, 2) + "%"; }
|
|
});
|
|
}
|
|
}
|
|
);
|
|
/* Load Progress Bar Behaviors
|
|
================================================================================ */
|
|
VideoJS.player.newBehavior("loadProgressBar", function(element){
|
|
if (!this.loadProgressBars) { this.loadProgressBars = []; }
|
|
this.loadProgressBars.push(element);
|
|
this.onBufferedUpdate(this.updateLoadProgressBars);
|
|
},{
|
|
updateLoadProgressBars: function(){
|
|
this.each(this.loadProgressBars, function(bar){
|
|
if (bar.style) { bar.style.width = _V_.round(this.bufferedPercent() * 100, 2) + "%"; }
|
|
});
|
|
}
|
|
}
|
|
);
|
|
|
|
/* Current Time Display Behaviors
|
|
================================================================================ */
|
|
VideoJS.player.newBehavior("currentTimeDisplay", function(element){
|
|
if (!this.currentTimeDisplays) {
|
|
this.currentTimeDisplays = [];
|
|
this.onCurrentTimeUpdate(this.updateCurrentTimeDisplays);
|
|
}
|
|
this.currentTimeDisplays.push(element);
|
|
},{
|
|
// Update the displayed time (00:00)
|
|
updateCurrentTimeDisplays: function(newTime){
|
|
if (!this.currentTimeDisplays) { return; }
|
|
// Allows for smooth scrubbing, when player can't keep up.
|
|
var time = (newTime) ? newTime : this.currentTime();
|
|
this.each(this.currentTimeDisplays, function(dis){
|
|
dis.innerHTML = _V_.formatTime(time);
|
|
});
|
|
}
|
|
}
|
|
);
|
|
|
|
/* Duration Display Behaviors
|
|
================================================================================ */
|
|
VideoJS.player.newBehavior("durationDisplay", function(element){
|
|
if (!this.durationDisplays) {
|
|
this.durationDisplays = [];
|
|
this.onCurrentTimeUpdate(this.updateDurationDisplays);
|
|
}
|
|
this.durationDisplays.push(element);
|
|
},{
|
|
updateDurationDisplays: function(){
|
|
if (!this.durationDisplays) { return; }
|
|
this.each(this.durationDisplays, function(dis){
|
|
if (this.duration()) { dis.innerHTML = _V_.formatTime(this.duration()); }
|
|
});
|
|
}
|
|
}
|
|
);
|
|
|
|
/* Current Time Scrubber Behaviors
|
|
================================================================================ */
|
|
VideoJS.player.newBehavior("currentTimeScrubber", function(element){
|
|
element.addEventListener("mousedown", this.onCurrentTimeScrubberMouseDown.rEvtContext(this), false);
|
|
},{
|
|
// Adjust the play position when the user drags on the progress bar
|
|
onCurrentTimeScrubberMouseDown: function(event, scrubber){
|
|
event.preventDefault();
|
|
this.currentScrubber = scrubber;
|
|
|
|
this.stopTrackingCurrentTime(); // Allows for smooth scrubbing
|
|
|
|
this.videoWasPlaying = !this.paused();
|
|
this.pause();
|
|
|
|
_V_.blockTextSelection();
|
|
this.setCurrentTimeWithScrubber(event);
|
|
document.addEventListener("mousemove", this.onCurrentTimeScrubberMouseMove.rEvtContext(this), false);
|
|
document.addEventListener("mouseup", this.onCurrentTimeScrubberMouseUp.rEvtContext(this), false);
|
|
},
|
|
onCurrentTimeScrubberMouseMove: function(event){ // Removeable
|
|
this.setCurrentTimeWithScrubber(event);
|
|
},
|
|
onCurrentTimeScrubberMouseUp: function(event){ // Removeable
|
|
_V_.unblockTextSelection();
|
|
document.removeEventListener("mousemove", this.onCurrentTimeScrubberMouseMove, false);
|
|
document.removeEventListener("mouseup", this.onCurrentTimeScrubberMouseUp, false);
|
|
this.trackCurrentTime();
|
|
if (this.videoWasPlaying) {
|
|
this.play();
|
|
}
|
|
},
|
|
setCurrentTimeWithScrubber: function(event){
|
|
var newProgress = _V_.getRelativePosition(event.pageX, this.currentScrubber);
|
|
var newTime = newProgress * this.duration();
|
|
this.triggerCurrentTimeListeners(0, newTime); // Allows for smooth scrubbing
|
|
// Don't let video end while scrubbing.
|
|
if (newTime == this.duration()) { newTime = newTime - 0.1; }
|
|
this.currentTime(newTime);
|
|
}
|
|
}
|
|
);
|
|
/* Volume Display Behaviors
|
|
================================================================================ */
|
|
VideoJS.player.newBehavior("volumeDisplay", function(element){
|
|
if (!this.volumeDisplays) {
|
|
this.volumeDisplays = [];
|
|
this.onVolumeChange(this.updateVolumeDisplays);
|
|
}
|
|
this.volumeDisplays.push(element);
|
|
this.updateVolumeDisplay(element); // Set the display to the initial volume
|
|
},{
|
|
// Update the volume control display
|
|
// Unique to these default controls. Uses borders to create the look of bars.
|
|
updateVolumeDisplays: function(){
|
|
if (!this.volumeDisplays) { return; }
|
|
this.each(this.volumeDisplays, function(dis){
|
|
this.updateVolumeDisplay(dis);
|
|
});
|
|
},
|
|
updateVolumeDisplay: function(display){
|
|
var volNum = Math.ceil(this.volume() * 6);
|
|
this.each(display.children, function(child, num){
|
|
if (num < volNum) {
|
|
_V_.addClass(child, "vjs-volume-level-on");
|
|
} else {
|
|
_V_.removeClass(child, "vjs-volume-level-on");
|
|
}
|
|
});
|
|
}
|
|
}
|
|
);
|
|
/* Volume Scrubber Behaviors
|
|
================================================================================ */
|
|
VideoJS.player.newBehavior("volumeScrubber", function(element){
|
|
element.addEventListener("mousedown", this.onVolumeScrubberMouseDown.rEvtContext(this), false);
|
|
},{
|
|
// Adjust the volume when the user drags on the volume control
|
|
onVolumeScrubberMouseDown: function(event, scrubber){
|
|
// event.preventDefault();
|
|
_V_.blockTextSelection();
|
|
this.currentScrubber = scrubber;
|
|
this.setVolumeWithScrubber(event);
|
|
document.addEventListener("mousemove", this.onVolumeScrubberMouseMove.rEvtContext(this), false);
|
|
document.addEventListener("mouseup", this.onVolumeScrubberMouseUp.rEvtContext(this), false);
|
|
},
|
|
onVolumeScrubberMouseMove: function(event){
|
|
this.setVolumeWithScrubber(event);
|
|
},
|
|
onVolumeScrubberMouseUp: function(event){
|
|
this.setVolumeWithScrubber(event);
|
|
_V_.unblockTextSelection();
|
|
document.removeEventListener("mousemove", this.onVolumeScrubberMouseMove, false);
|
|
document.removeEventListener("mouseup", this.onVolumeScrubberMouseUp, false);
|
|
},
|
|
setVolumeWithScrubber: function(event){
|
|
var newVol = _V_.getRelativePosition(event.pageX, this.currentScrubber);
|
|
this.volume(newVol);
|
|
}
|
|
}
|
|
);
|
|
/* Fullscreen Toggle Behaviors
|
|
================================================================================ */
|
|
VideoJS.player.newBehavior("fullscreenToggle", function(element){
|
|
element.addEventListener("click", this.onFullscreenToggleClick.context(this), false);
|
|
},{
|
|
// When the user clicks on the fullscreen button, update fullscreen setting
|
|
onFullscreenToggleClick: function(event){
|
|
if (!this.videoIsFullScreen) {
|
|
this.fullscreenOn();
|
|
} else {
|
|
this.fullscreenOff();
|
|
}
|
|
},
|
|
// Turn on fullscreen (window) mode
|
|
// Real fullscreen isn't available in browsers quite yet.
|
|
fullscreenOn: function(){
|
|
if (!this.nativeFullscreenOn()) {
|
|
this.videoIsFullScreen = true;
|
|
// Storing original doc overflow value to return to when fullscreen is off
|
|
this.docOrigOverflow = document.documentElement.style.overflow;
|
|
// Add listener for esc key to exit fullscreen
|
|
document.addEventListener("keydown", this.fullscreenOnEscKey.rEvtContext(this), false);
|
|
// Add listener for a window resize
|
|
window.addEventListener("resize", this.fullscreenOnWindowResize.rEvtContext(this), false);
|
|
// Hide any scroll bars
|
|
document.documentElement.style.overflow = 'hidden';
|
|
// Apply fullscreen styles
|
|
_V_.addClass(this.box, "vjs-fullscreen");
|
|
// Resize the box, controller, and poster
|
|
this.positionAll();
|
|
}
|
|
},
|
|
// If available use the native fullscreen
|
|
nativeFullscreenOn: function(){
|
|
if(this.supportsFullScreen()) {
|
|
return this.enterFullScreen();
|
|
} else {
|
|
return false;
|
|
}
|
|
},
|
|
// Turn off fullscreen (window) mode
|
|
fullscreenOff: function(){
|
|
this.videoIsFullScreen = false;
|
|
document.removeEventListener("keydown", this.fullscreenOnEscKey, false);
|
|
window.removeEventListener("resize", this.fullscreenOnWindowResize, false);
|
|
// Unhide scroll bars.
|
|
document.documentElement.style.overflow = this.docOrigOverflow;
|
|
// Remove fullscreen styles
|
|
_V_.removeClass(this.box, "vjs-fullscreen");
|
|
// Resize the box, controller, and poster to original sizes
|
|
this.positionAll();
|
|
},
|
|
fullscreenOnWindowResize: function(event){ // Removeable
|
|
this.positionControlBars();
|
|
},
|
|
// Create listener for esc key while in full screen mode
|
|
fullscreenOnEscKey: function(event){ // Removeable
|
|
if (event.keyCode == 27) {
|
|
this.fullscreenOff();
|
|
}
|
|
}
|
|
}
|
|
);
|
|
/* Big Play Button Behaviors
|
|
================================================================================ */
|
|
VideoJS.player.newBehavior("bigPlayButton", function(element){
|
|
if (!this.elements.bigPlayButtons) {
|
|
this.elements.bigPlayButtons = [];
|
|
this.onPlay(this.bigPlayButtonsOnPlay);
|
|
this.onEnded(this.bigPlayButtonsOnEnded);
|
|
}
|
|
this.elements.bigPlayButtons.push(element);
|
|
this.activateElement(element, "playButton");
|
|
},{
|
|
bigPlayButtonsOnPlay: function(event){ this.hideBigPlayButtons(); },
|
|
bigPlayButtonsOnEnded: function(event){ this.showBigPlayButtons(); },
|
|
showBigPlayButtons: function(){
|
|
this.each(this.elements.bigPlayButtons, function(element){
|
|
element.style.display = "block";
|
|
});
|
|
},
|
|
hideBigPlayButtons: function(){
|
|
this.each(this.elements.bigPlayButtons, function(element){
|
|
element.style.display = "none";
|
|
});
|
|
}
|
|
}
|
|
);
|
|
/* Spinner
|
|
================================================================================ */
|
|
VideoJS.player.newBehavior("spinner", function(element){
|
|
if (!this.spinners) {
|
|
this.spinners = [];
|
|
this.video.addEventListener("loadeddata", this.spinnersOnVideoLoadedData.context(this), false);
|
|
this.video.addEventListener("loadstart", this.spinnersOnVideoLoadStart.context(this), false);
|
|
this.video.addEventListener("seeking", this.spinnersOnVideoSeeking.context(this), false);
|
|
this.video.addEventListener("seeked", this.spinnersOnVideoSeeked.context(this), false);
|
|
this.video.addEventListener("canplay", this.spinnersOnVideoCanPlay.context(this), false);
|
|
this.video.addEventListener("canplaythrough", this.spinnersOnVideoCanPlayThrough.context(this), false);
|
|
this.video.addEventListener("waiting", this.spinnersOnVideoWaiting.context(this), false);
|
|
this.video.addEventListener("stalled", this.spinnersOnVideoStalled.context(this), false);
|
|
this.video.addEventListener("suspend", this.spinnersOnVideoSuspend.context(this), false);
|
|
this.video.addEventListener("playing", this.spinnersOnVideoPlaying.context(this), false);
|
|
this.video.addEventListener("timeupdate", this.spinnersOnVideoTimeUpdate.context(this), false);
|
|
}
|
|
this.spinners.push(element);
|
|
},{
|
|
showSpinners: function(){
|
|
this.each(this.spinners, function(spinner){
|
|
spinner.style.display = "block";
|
|
});
|
|
clearInterval(this.spinnerInterval);
|
|
this.spinnerInterval = setInterval(this.rotateSpinners.context(this), 100);
|
|
},
|
|
hideSpinners: function(){
|
|
this.each(this.spinners, function(spinner){
|
|
spinner.style.display = "none";
|
|
});
|
|
clearInterval(this.spinnerInterval);
|
|
},
|
|
spinnersRotated: 0,
|
|
rotateSpinners: function(){
|
|
this.each(this.spinners, function(spinner){
|
|
// spinner.style.transform = 'scale(0.5) rotate('+this.spinnersRotated+'deg)';
|
|
spinner.style.WebkitTransform = 'scale(0.5) rotate('+this.spinnersRotated+'deg)';
|
|
spinner.style.MozTransform = 'scale(0.5) rotate('+this.spinnersRotated+'deg)';
|
|
});
|
|
if (this.spinnersRotated == 360) { this.spinnersRotated = 0; }
|
|
this.spinnersRotated += 45;
|
|
},
|
|
spinnersOnVideoLoadedData: function(event){ this.hideSpinners(); },
|
|
spinnersOnVideoLoadStart: function(event){ this.showSpinners(); },
|
|
spinnersOnVideoSeeking: function(event){ /* this.showSpinners(); */ },
|
|
spinnersOnVideoSeeked: function(event){ /* this.hideSpinners(); */ },
|
|
spinnersOnVideoCanPlay: function(event){ /* this.hideSpinners(); */ },
|
|
spinnersOnVideoCanPlayThrough: function(event){ this.hideSpinners(); },
|
|
spinnersOnVideoWaiting: function(event){
|
|
// Safari sometimes triggers waiting inappropriately
|
|
// Like after video has played, any you play again.
|
|
this.showSpinners();
|
|
},
|
|
spinnersOnVideoStalled: function(event){},
|
|
spinnersOnVideoSuspend: function(event){},
|
|
spinnersOnVideoPlaying: function(event){ this.hideSpinners(); },
|
|
spinnersOnVideoTimeUpdate: function(event){
|
|
// Safari sometimes calls waiting and doesn't recover
|
|
if(this.spinner.style.display == "block") { this.hideSpinners(); }
|
|
}
|
|
}
|
|
);
|
|
/* Subtitles
|
|
================================================================================ */
|
|
VideoJS.player.newBehavior("subtitlesDisplay", function(element){
|
|
if (!this.elements.subtitlesDisplays) {
|
|
this.elements.subtitlesDisplays = [];
|
|
this.video.addEventListener('timeupdate', this.subtitlesDisplaysOnVideoTimeUpdate.context(this), false);
|
|
}
|
|
this.elements.subtitlesDisplays.push(element);
|
|
},{
|
|
subtitlesDisplaysOnVideoTimeUpdate: function(){
|
|
// show the subtitles
|
|
if (this.subtitles) {
|
|
// var x = this.currentSubtitlePosition;
|
|
var x = 0;
|
|
|
|
while (x<this.subtitles.length && this.video.currentTime>this.subtitles[x].endTime) {
|
|
if (this.subtitles[x].showing) {
|
|
this.subtitles[x].showing = false;
|
|
this.updateSubtitlesDisplays("");
|
|
}
|
|
this.currentSubtitlePosition++;
|
|
x = this.currentSubtitlePosition;
|
|
}
|
|
|
|
if (this.currentSubtitlePosition>=this.subtitles.length) { return; }
|
|
|
|
if (this.video.currentTime>=this.subtitles[x].startTime && this.video.currentTime<=this.subtitles[x].endTime) {
|
|
this.updateSubtitlesDisplays(this.subtitles[x].text);
|
|
this.subtitles[x].showing = true;
|
|
}
|
|
}
|
|
},
|
|
updateSubtitlesDisplays: function(val){
|
|
this.each(this.elements.subtitlesDisplays, function(disp){
|
|
disp.innerHTML = val;
|
|
});
|
|
}
|
|
}
|
|
);////////////////////////////////////////////////////////////////////////////////
|
|
// Convenience Functions (mini library)
|
|
// Functions not specific to video or VideoJS and could probably be replaced with a library like jQuery
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
|
|
VideoJS.extend({
|
|
|
|
addClass: function(element, classToAdd){
|
|
if (element.className.split(/\s+/).lastIndexOf(classToAdd) == -1) { element.className = element.className === "" ? classToAdd : element.className + " " + classToAdd; }
|
|
},
|
|
removeClass: function(element, classToRemove){
|
|
if (element.className.indexOf(classToRemove) == -1) { return; }
|
|
var classNames = element.className.split(/\s+/);
|
|
classNames.splice(classNames.lastIndexOf(classToRemove),1);
|
|
element.className = classNames.join(" ");
|
|
},
|
|
createElement: function(tagName, attributes){
|
|
return this.merge(document.createElement(tagName), attributes);
|
|
},
|
|
|
|
// Attempt to block the ability to select text while dragging controls
|
|
blockTextSelection: function(){
|
|
document.body.focus();
|
|
document.onselectstart = function () { return false; };
|
|
},
|
|
// Turn off text selection blocking
|
|
unblockTextSelection: function(){ document.onselectstart = function () { return true; }; },
|
|
|
|
// Return seconds as MM:SS
|
|
formatTime: function(secs) {
|
|
var seconds = Math.round(secs);
|
|
var minutes = Math.floor(seconds / 60);
|
|
minutes = (minutes >= 10) ? minutes : "0" + minutes;
|
|
seconds = Math.floor(seconds % 60);
|
|
seconds = (seconds >= 10) ? seconds : "0" + seconds;
|
|
return minutes + ":" + seconds;
|
|
},
|
|
|
|
// Return the relative horizonal position of an event as a value from 0-1
|
|
getRelativePosition: function(x, relativeElement){
|
|
return Math.max(0, Math.min(1, (x - this.findPosX(relativeElement)) / relativeElement.offsetWidth));
|
|
},
|
|
// Get an objects position on the page
|
|
findPosX: function(obj) {
|
|
var curleft = obj.offsetLeft;
|
|
while(obj = obj.offsetParent) {
|
|
curleft += obj.offsetLeft;
|
|
}
|
|
return curleft;
|
|
},
|
|
getComputedStyleValue: function(element, style){
|
|
return window.getComputedStyle(element, null).getPropertyValue(style);
|
|
},
|
|
|
|
round: function(num, dec) {
|
|
if (!dec) { dec = 0; }
|
|
return Math.round(num*Math.pow(10,dec))/Math.pow(10,dec);
|
|
},
|
|
|
|
get: function(url, onSuccess){
|
|
if (typeof XMLHttpRequest == "undefined") {
|
|
XMLHttpRequest = function () {
|
|
try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch (e) {}
|
|
try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch (f) {}
|
|
try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (g) {}
|
|
//Microsoft.XMLHTTP points to Msxml2.XMLHTTP.3.0 and is redundant
|
|
throw new Error("This browser does not support XMLHttpRequest.");
|
|
};
|
|
}
|
|
var request = new XMLHttpRequest();
|
|
request.open("GET",url);
|
|
request.onreadystatechange = function() {
|
|
if (request.readyState == 4 && request.status == 200) {
|
|
onSuccess(request.responseText);
|
|
}
|
|
}.context(this);
|
|
request.send();
|
|
},
|
|
|
|
// DOM Ready functionality adapted from jQuery. http://jquery.com/
|
|
bindDOMReady: function(){
|
|
if (document.readyState === "complete") {
|
|
return VideoJS.onDOMReady();
|
|
}
|
|
if (document.addEventListener) {
|
|
document.addEventListener("DOMContentLoaded", VideoJS.DOMContentLoaded, false);
|
|
window.addEventListener("load", VideoJS.onDOMReady, false);
|
|
} else if (document.attachEvent) {
|
|
document.attachEvent("onreadystatechange", VideoJS.DOMContentLoaded);
|
|
window.attachEvent("onload", VideoJS.onDOMReady);
|
|
}
|
|
},
|
|
|
|
DOMContentLoaded: function(){
|
|
if (document.addEventListener) {
|
|
document.removeEventListener( "DOMContentLoaded", VideoJS.DOMContentLoaded, false);
|
|
VideoJS.onDOMReady();
|
|
} else if ( document.attachEvent ) {
|
|
if ( document.readyState === "complete" ) {
|
|
document.detachEvent("onreadystatechange", VideoJS.DOMContentLoaded);
|
|
VideoJS.onDOMReady();
|
|
}
|
|
}
|
|
},
|
|
|
|
// Functions to be run once the DOM is loaded
|
|
DOMReadyList: [],
|
|
addToDOMReady: function(fn){
|
|
if (VideoJS.DOMIsReady) {
|
|
fn.call(document);
|
|
} else {
|
|
VideoJS.DOMReadyList.push(fn);
|
|
}
|
|
},
|
|
|
|
DOMIsReady: false,
|
|
onDOMReady: function(){
|
|
if (VideoJS.DOMIsReady) { return; }
|
|
if (!document.body) { return setTimeout(VideoJS.onDOMReady, 13); }
|
|
VideoJS.DOMIsReady = true;
|
|
if (VideoJS.DOMReadyList) {
|
|
for (var i=0; i<VideoJS.DOMReadyList.length; i++) {
|
|
VideoJS.DOMReadyList[i].call(document);
|
|
}
|
|
VideoJS.DOMReadyList = null;
|
|
}
|
|
}
|
|
});
|
|
VideoJS.bindDOMReady();
|
|
|
|
// Allows for binding context to functions
|
|
// when using in event listeners and timeouts
|
|
Function.prototype.context = function(obj){
|
|
var method = this,
|
|
temp = function(){
|
|
return method.apply(obj, arguments);
|
|
};
|
|
return temp;
|
|
};
|
|
|
|
// Like context, in that it creates a closure
|
|
// But insteaad keep "this" intact, and passes the var as the second argument of the function
|
|
// Need for event listeners where you need to know what called the event
|
|
// Only use with event callbacks
|
|
Function.prototype.evtContext = function(obj){
|
|
var method = this,
|
|
temp = function(){
|
|
var origContext = this;
|
|
return method.call(obj, arguments[0], origContext);
|
|
};
|
|
return temp;
|
|
};
|
|
|
|
// Removeable Event listener with Context
|
|
// Replaces the original function with a version that has context
|
|
// So it can be removed using the original function name.
|
|
// In order to work, a version of the function must already exist in the player/prototype
|
|
Function.prototype.rEvtContext = function(obj, funcParent){
|
|
if (this.hasContext === true) { return this; }
|
|
if (!funcParent) { funcParent = obj; }
|
|
for (var attrname in funcParent) {
|
|
if (funcParent[attrname] == this) {
|
|
funcParent[attrname] = this.evtContext(obj);
|
|
funcParent[attrname].hasContext = true;
|
|
return funcParent[attrname];
|
|
}
|
|
}
|
|
return this.evtContext(obj);
|
|
};
|
|
// jQuery Plugin
|
|
if (window.jQuery) {
|
|
(function($) {
|
|
$.fn.VideoJS = function(options) {
|
|
this.each(function() {
|
|
VideoJS.setup(this, options);
|
|
});
|
|
return this;
|
|
};
|
|
$.fn.player = function() {
|
|
return this[0].player;
|
|
};
|
|
})(jQuery);
|
|
}
|
|
// Expose to global
|
|
window.VideoJS = window._V_ = VideoJS;
|
|
|
|
// End self-executing function
|
|
})(window); |