diff --git a/demo.html b/demo.html index 5e88084ab..3fbb2f2d7 100644 --- a/demo.html +++ b/demo.html @@ -14,24 +14,24 @@ // $(function(){ // VideoJS.setup(); // }) - + // If using Prototype // document.observe("dom:loaded", function() { // VideoJS.setup(); // }); - + // If not using a JS library window.onload = function(){ VideoJS.setup(); } - + - +
@@ -44,7 +44,7 @@ - Poster Image @@ -56,6 +56,6 @@

- + \ No newline at end of file diff --git a/video-js.css b/video-js.css index d2e706e5f..2e16876c0 100644 --- a/video-js.css +++ b/video-js.css @@ -43,7 +43,11 @@ img.vjs-poster { display: block; position: absolute; left: 0px; top: 0px; width: background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#777)); background: -moz-linear-gradient(top, #fff, #777); } -.vjs-progress-control .vjs-load-progress { position: absolute; display: block; width: 0px; height: 9px; background-color: #777; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } +.vjs-progress-control .vjs-load-progress { position: absolute; display: block; width: 0px; height: 9px; background-color: #777; opacity: 0.5; + -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; + background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#ccc)); + background: -moz-linear-gradient(top, #999, #ccc); +} .vjs-progress-control .vjs-progress-time { list-style: none; float: left; margin: 7px 0 0 5px; padding: 0; font-size: 10px; line-height: 1; font-weight: normal; font-family: Helvetica, Arial, sans-serif; } /* Volume */ diff --git a/video.js b/video.js index 242806723..78b1c0274 100644 --- a/video.js +++ b/video.js @@ -34,10 +34,15 @@ var VideoJS = Class.extend({ // Hide no-video download paragraph this.box.getElementsByClassName("vjs-no-video")[0].style.display = "none"; - + this.buildPoster(); this.showPoster(); + this.propertyInterval + + this.video.preload = true; + this.video.autobuffer = true; + // Hide default controls this.video.controls = false; @@ -57,6 +62,10 @@ var VideoJS = Class.extend({ this.video.addEventListener('volumechange',this.onVolumeChange.context(this),false); // Listen for video errors this.video.addEventListener('error',this.onError.context(this),false); + // Listen for Video Load Progress (currently does not if html file is local) + this.video.addEventListener('progress', this.onProgress.context(this), false); + // Sometimes the 'progress' event doesn't fire the final (finished) progress notice. + this.watchBuffer = setInterval(this.updateBufferedTotal.context(this), 500); // Listen for clicks on the play/pause button this.playControl.addEventListener("click", this.onPlayControlClick.context(this), false); @@ -95,6 +104,9 @@ var VideoJS = Class.extend({ // Have to add the mouseout to the controller too or it may not hide. // For some reason the same isn't needed for mouseover this.controls.addEventListener("mouseout", this.onVideoMouseOut.context(this), false); + + // Support older browsers that used autobuffer + if (this.video.preload) this.video.autobuffer = true; }, buildController: function(){ @@ -284,6 +296,14 @@ var VideoJS = Class.extend({ this.updateVolumeDisplay(); }, + // When the video's load progress is updated + // Safari 5 seems have lost this functionality + onProgress: function(event){ + if(event.total > 0) { + this.updateLoadProgress(event.loaded / event.total); + } + }, + onError: function(event){ console.log(event); console.log(this.video.error); @@ -293,6 +313,17 @@ var VideoJS = Class.extend({ this.showController(); }, + updateBufferedTotal: function(){ + if (this.video.buffered && this.video.buffered.length >= 1) { + if (this.video.buffered.end(0) == this.video.duration) { + this.updateLoadProgress(1); + clearInterval(this.watchBuffer); + } + } else { + clearInterval(this.watchBuffer); + } + }, + // React to clicks on the play/pause button onPlayControlClick: function(event){ if (this.video.paused) { @@ -404,13 +435,18 @@ var VideoJS = Class.extend({ this.updateTimeDisplay(); }, + updateLoadProgress: function(decimal){ + if (this.controls.style.display == 'none') return; + this.loadProgress.style.width = (decimal * (this.progressHolder.offsetWidth - 2)) + "px"; + }, + // Update the play position based on where the user clicked on the progresss bar setPlayProgress: function(newProgress){ this.video.currentTime = newProgress * this.video.duration; this.playProgress.style.width = newProgress * (this.progressHolder.offsetWidth - 2) + "px"; this.updateTimeDisplay(); }, - + setPlayProgressWithEvent: function(event){ var newProgress = this.getRelativePosition(event.pageX, this.progressHolder); this.setPlayProgress(newProgress);