diff --git a/video-js/demo.html b/video-js/demo.html index 1e57fead7..d46ebd39d 100644 --- a/video-js/demo.html +++ b/video-js/demo.html @@ -20,19 +20,21 @@ - - +
+ + +
\ No newline at end of file diff --git a/video-js/video.js b/video-js/video.js index 9073b32a9..f1c040164 100644 --- a/video-js/video.js +++ b/video-js/video.js @@ -14,8 +14,7 @@ var VideoJS = Class.extend({ this.video = element; this.buildController(); - this.showController(); // has to come before positioning - this.positionController(); + this.showController(); // Listen for when the video is played this.video.addEventListener("play", this.onPlay.context(this), false); @@ -169,10 +168,14 @@ var VideoJS = Class.extend({ // Show the controller showController: function(){ this.controls.style.display = "block"; + this.positionController(); }, // Place controller relative to the video's position positionController: function(){ + // Make sure the controls are visible + if (this.controls.style.display == 'none') return; + this.controls.style.top = (this.video.offsetHeight - this.controls.offsetHeight) + "px"; this.controls.style.left = "0px"; this.controls.style.width = this.video.offsetWidth + "px"; @@ -315,6 +318,7 @@ var VideoJS = Class.extend({ // Ajust the play progress bar's width based on the current play time updatePlayProgress: function(){ + if (this.controls.style.display == 'none') return; this.playProgress.style.width = ((this.video.currentTime / this.video.duration) * (this.progressHolder.offsetWidth - 2)) + "px"; this.updateTimeDisplay(); }, @@ -363,7 +367,21 @@ var VideoJS = Class.extend({ this.videoIsFullScreen = true; this.videoOrigWidth = this.video.offsetWidth; this.videoOrigHeight = this.video.offsetHeight; + this.docOrigOverflow = document.documentElement.style.overflow; + // Hide any scroll bars + document.documentElement.style.overflow = 'hidden'; + this.fullscreenControl.className = "vjs-fullscreen-control vjs-fs-active"; + + // Watch for when the window is resized and resize the video to match. + this.fullWindowResize = window.addEventListener('resize', this.sizeToWindow.context(this), false); + + // Resize the video to the window + this.sizeToWindow(); + }, + + // Resize the video to the full window + sizeToWindow: function(){ this.video.style.width = window.innerWidth + "px"; this.video.style.height = window.innerHeight + "px"; this.video.style.position = "fixed"; @@ -371,13 +389,19 @@ var VideoJS = Class.extend({ this.video.style.top = 0; this.controls.style.position = "fixed"; this.positionController(); - - this.fullscreenControl.className = "vjs-fullscreen-control vjs-fs-active"; }, // Turn off fullscreen (window) mode fullscreenOff: function(){ this.videoIsFullScreen = false; + + // Unhide scroll bars. + document.documentElement.style.overflow = this.docOrigOverflow; + + // Remove window resizing event listener + window.removeEventListener('resize', this.sizeToWindow.context(this), false); + + // Resize to original settings this.video.style.width = this.videoOrigWidth + "px"; this.video.style.height = this.videoOrigHeight + "px"; this.video.style.position = "static";