web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-01-08 07:00:10 +02:00
Code Releases Activity

Updated to latest version with full iPad support

Browse Source
This commit is contained in:
Steve Heffernan 2010-06-12 18:04:11 -07:00
parent db5e42e49e
commit 663c11b526
3 changed files with 158 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
video-js/demo.html
View File

@ -25,10 +25,6 @@
VideoJS.setup();
}
document.addEventListener("keydown", function(e){
// alert(e.keyCode);
}, false);
</script>
@ -41,10 +37,10 @@
<!-- Begin VideoJS -->
<div class="video-js-box">
<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
<video class="video-js" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" preload>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4">
<source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm">
<source src="http://video-js.zencoder.com/oceans-clip.ogg" type="video/ogg">
<video class="video-js" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="http://video-js.zencoder.com/oceans-clip.ogg" type='video/ogg; codecs="theora, vorbis"'>
<object width="640" height="264" type="application/x-shockwave-flash"
data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />

12
video-js/video-js.css
View File

@ -1,10 +1,12 @@
.video-js-box { text-align: left; position: relative; }
video.video-js { background-color: #000; }
video.video-js { background-color: #000; position: relative; }
.video-js-box.vjs-fullscreen { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: 1000; }
.video-js-box.vjs-fullscreen video.video-js { position: absolute; width: 100%; height: 100%; }
.video-js-box.vjs-fullscreen video.video-js { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1001; }
.video-js-box.vjs-fullscreen .vjs-controls { z-index: 1002; }
.vjs-controls { display: none; position: absolute; margin: 0; padding: 0; border: none; }
.vjs-controls { display: none; position: absolute; margin: 0; padding: 0; border: none; left: 0; }
.video-js-box.vjs-controls-below .vjs-controls { background-color: #000; }
img.vjs-poster { display: block; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; }
@ -14,8 +16,8 @@ img.vjs-poster { display: block; position: absolute; left: 0px; top: 0px; width:
/* Using all CSS to draw the controls. Images could be used to simplify the CSS if desired.
/* General controls styles */
.vjs-controls { list-style: none; height: 30px; opacity: 0.85; color: #fff; }
.vjs-controls > li { list-style: none; float: left; height: 25px; width: 25px; margin: 0 5px 0 0; padding: 0; text-align: center;
.vjs-controls { list-style: none; height: 35px; opacity: 0.85; color: #fff; }
.vjs-controls > li { list-style: none; float: left; height: 25px; width: 25px; margin: 5px 5px 0 0; padding: 0; text-align: center;
background-color: #0B151A; border-radius: 5px; box-shadow: 0px 2px 2px #000;
/* Webkit */
-webkit-border-radius: 5px;

202
video-js/video.js
View File

@ -27,23 +27,44 @@ var VideoJS = Class.extend({
// Initialize the player for the supplied video tag element
// element: video tag
// num: the current player's position in the videoJSPlayers array
init: function(element, num){
init: function(element, setOptions){
if(!VideoJS.browserSupportsVideo()) return;
this.video = element;
this.num = num;
this.box = element.parentNode;
// Default Options
this.options = {
num: 0, // Optional tracking of videoJSPLayers position
controlsBelow: false, // Display control bar below video vs. on top
controlsHiding: true, // Hide controls when not over the video
defaultVolume: 0.85 // Will be overridden by localStorage volume if available
};
// Override default options with set options
if (typeof setOptions == "object") _V_.merge(this.options, setOptions);
this.box = this.video.parentNode;
this.percentLoaded = 0;
// Hide no-video download paragraph
this.box.getElementsByClassName("vjs-no-video")[0].style.display = "none";
// if (this.canPlaySource()) {
//
// }
this.hideDownloadLinks();
if (VideoJS.isIpad()) {
this.options.controlsBelow = true;
this.options.controlsHiding = false;
}
if (this.options.controlsBelow) {
_V_.addClass(this.box, "vjs-controls-below");
}
this.buildPoster();
this.showPoster();
this.propertyInterval
this.video.preload = true;
this.video.autobuffer = true;
// Hide default controls
this.video.controls = false;
@ -81,7 +102,7 @@ var VideoJS = Class.extend({
this.progressHolder.addEventListener("mouseup", this.onProgressHolderMouseUp.context(this), false);
// Set to stored volume OR 85%
this.setVolume(localStorage.volume || 0.85);
this.setVolume(localStorage.volume || this.options.defaultVolume);
// Listen for a drag on the volume control
this.volumeControl.addEventListener("mousedown", this.onVolumeControlMouseDown.context(this), false);
// Listen for a release on the volume control
@ -109,12 +130,16 @@ var VideoJS = Class.extend({
// Create listener for esc key while in full screen mode
// Creating it during initialization to add context
// and because it has to be removed with removeEventListener
this.escKeyListener = function(event){
this.onEscKey = function(event){
if (event.keyCode == 27) {
this.fullscreenOff();
}
}.context(this);
this.onWindowResize = function(event){
this.positionController();
}.context(this);
// Support older browsers that used autobuffer
if (this.video.preload) this.video.autobuffer = true;
},
@ -150,80 +175,72 @@ var VideoJS = Class.extend({
*/
// Create a list element to hold the different controls
this.controls = document.createElement("ul");
this.controls = _V_.createElement("ul", { className: "vjs-controls" });
// Add the controls to the video's container
this.video.parentNode.appendChild(this.controls);
this.controls.className = "vjs-controls";
// Store the current video player's number
// For referencing in event listeners
this.controls.setAttribute("data-video-js", this.num);
// Build the play control
this.playControl = document.createElement("li");
this.playControl = _V_.createElement("li", { className: "vjs-play-control vjs-play", innerHTML: "<span></span>" });
this.controls.appendChild(this.playControl);
this.playControl.className = "vjs-play-control vjs-play";
this.playControl.innerHTML = "<span></span>";
// Build the progress control
this.progressControl = document.createElement("li");
this.progressControl = _V_.createElement("li", { className: "vjs-progress-control" });
this.controls.appendChild(this.progressControl);
this.progressControl.className = "vjs-progress-control";
// Create a list for the different progress elements
this.progressList = document.createElement("ul");
this.progressControl.appendChild(this.progressList);
// Create a holder for the progress bars
this.progressHolder = document.createElement("li");
this.progressHolder = _V_.createElement("li", { className: "vjs-progress-holder" });
this.progressList.appendChild(this.progressHolder);
this.progressHolder.className = "vjs-progress-holder";
// Create the loading progress display
this.loadProgress = document.createElement("span");
this.loadProgress = _V_.createElement("span", { className: "vjs-load-progress" });
this.progressHolder.appendChild(this.loadProgress)
this.loadProgress.className = "vjs-load-progress";
// Create the playing progress display
this.playProgress = document.createElement("span");
this.playProgress = _V_.createElement("span", { className: "vjs-play-progress" });
this.progressHolder.appendChild(this.playProgress);
this.playProgress.className = "vjs-play-progress";
// Create the progress time display (00:00 / 00:00)
this.progressTime = document.createElement("li");
this.progressTime = _V_.createElement("li", { className: "vjs-progress-time" });
this.progressList.appendChild(this.progressTime);
this.progressTime.className = "vjs-progress-time";
// Create the current play time display
this.currentTimeDisplay = document.createElement("span");
this.currentTimeDisplay = _V_.createElement("span", { className: "vjs-current-time-display", innerHTML: "00:00" });
this.progressTime.appendChild(this.currentTimeDisplay);
this.currentTimeDisplay.className = "vjs-current-time-display";
this.currentTimeDisplay.innerHTML = '00:00';
// Add time separator
this.timeSeparator = document.createElement("span");
this.timeSeparator.innerHTML = " / ";
this.timeSeparator = _V_.createElement("span", { innerHTML: " / " });
this.progressTime.appendChild(this.timeSeparator);
// Create the total duration display
this.durationDisplay = document.createElement("span");
this.durationDisplay = _V_.createElement("span", { className: "vjs-duration-display", innerHTML: "00:00" });
this.progressTime.appendChild(this.durationDisplay);
this.durationDisplay.className = "vjs-duration-display";
this.durationDisplay.innerHTML = '00:00';
// Create the volumne control
this.volumeControl = document.createElement("li");
this.volumeControl = _V_.createElement("li", {
className: "vjs-volume-control",
innerHTML: "<ul><li></li><li></li><li></li><li></li><li></li><li></li></ul>"
});
this.controls.appendChild(this.volumeControl);
this.volumeControl.className = "vjs-volume-control";
this.volumeControl.innerHTML = "<ul><li></li><li></li><li></li><li></li><li></li><li></li></ul>";
this.volumeDisplay = this.volumeControl.children[0]
// Crete the fullscreen control
this.fullscreenControl = document.createElement("li");
this.fullscreenControl = _V_.createElement("li", {
className: "vjs-fullscreen-control",
innerHTML: "<ul><li></li><li></li><li></li><li></li></ul>"
});
this.controls.appendChild(this.fullscreenControl);
this.fullscreenControl.className = "vjs-fullscreen-control";
this.fullscreenControl.innerHTML = "<ul><li></li><li></li><li></li><li></li></ul>";
},
// Hide no-video download paragraph
hideDownloadLinks: function(){
var children = this.box.children;
for(var i=0; i<children.length; i++){
if(children[i].className == "vjs-no-video") children[i].style.display = "none";
}
},
// Show the controller
@ -237,18 +254,39 @@ var VideoJS = Class.extend({
// Make sure the controls are visible
if (this.controls.style.display == 'none') return;
if (this.options.controlsBelow) {
if(this.videoIsFullScreen) {
this.box.style.height = "";
this.video.style.height = (this.box.offsetHeight - this.controls.offsetHeight) + "px";
} else {
this.video.style.height = "";
this.box.style.height = this.video.offsetHeight + this.controls.offsetHeight + "px";
}
this.controls.style.top = this.video.offsetHeight + "px";
} else {
this.controls.style.top = (this.video.offsetHeight - this.controls.offsetHeight) + "px";
this.controls.style.left = "0px";
}
this.controls.style.width = this.video.offsetWidth + "px";
this.sizeProgressBar();
},
// Hide the controller
hideController: function(){
this.controls.style.display = "none";
if (this.options.controlsHiding) this.controls.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;
}
},
buildPoster: function(){
this.updatePosterSource();
if (this.video.poster) {
this.poster = document.createElement("img");
// Add poster to video box
@ -283,6 +321,18 @@ var VideoJS = Class.extend({
this.poster.style.display = "none";
},
canPlaySource: function(){
var children = this.video.children;
for (var i=0; i<children.length; i++) {
if (children[i].tagName.toUpperCase() == "SOURCE") {
var canPlay = this.video.canPlayType(children[i].type);
if(canPlay == "probably" || canPlay == "maybe") {
return true;
}
}
}
},
// When the video is played
onPlay: function(event){
this.playControl.className = "vjs-play-control vjs-pause";
@ -513,13 +563,16 @@ var VideoJS = Class.extend({
this.docOrigOverflow = document.documentElement.style.overflow;
// Add listener for esc key to exit fullscreen
document.addEventListener("keydown", this.escKeyListener, false);
document.addEventListener("keydown", this.onEscKey, false);
// Add listener for a window resize
window.addEventListener("resize", this.onWindowResize, false);
// Hide any scroll bars
document.documentElement.style.overflow = 'hidden';
// Apply fullscreen styles
this.box.className = "video-js-box vjs-fullscreen";
_V_.addClass(this.box, "vjs-fullscreen");
// Resize the controller and poster
this.positionController();
@ -530,13 +583,14 @@ var VideoJS = Class.extend({
fullscreenOff: function(){
this.videoIsFullScreen = false;
document.removeEventListener("keydown", this.escKeyListener, false);
document.removeEventListener("keydown", this.onEscKey, false);
window.removeEventListener("resize", this.onWindowResize, false);
// Unhide scroll bars.
document.documentElement.style.overflow = this.docOrigOverflow;
// Remove fullscreen styles
this.box.className = "video-js-box";
_V_.removeClass(this.box, "vjs-fullscreen");
// Resize to original settings
this.positionController();
@ -576,28 +630,64 @@ var VideoJS = Class.extend({
curleft += obj.offsetLeft;
}
return curleft;
}
},
})
// Class Methods
// Add video-js to any video tag with the class
VideoJS.setup = function(){
if (VideoJS.supportsVideo()) {
if (VideoJS.browserSupportsVideo()) {
var videoTags = document.getElementsByTagName("video");
for (var i=0;i<videoTags.length;i++) {
if (videoTags[i].className.indexOf("video-js") != -1) {
videoJSPlayers[i] = new VideoJS(videoTags[i], i);
videoJSPlayers[i] = new VideoJS(videoTags[i], { num: i });
}
}
}
}
// Check if the browser supports video.
VideoJS.supportsVideo = function() {
VideoJS.browserSupportsVideo = function() {
return !!document.createElement('video').canPlayType;
}
VideoJS.isIpad = function(){
return navigator.userAgent.match(/iPad/i) != null;
}
VideoJS.browserSupportsFlash = function(){
if (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"]) {
return 1
} else {
return 0
}
}
// Convenience Functions (mini library)
// Functions not specific to video or VideoJS and could be replaced with a library like jQuery
var _V_ = {
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(" ");
},
merge: function(obj1, obj2){
for (attrname in obj2) { obj1[attrname] = obj2[attrname]; }
return obj1;
},
createElement: function(tagName, attributes){
return _V_.merge(document.createElement(tagName), attributes);
}
}
// Allows for binding context to functions
// when using in event listeners and timeouts