diff --git a/video-js/demo.html b/video-js/demo.html index 3fbb2f2d7..f195b3ca8 100644 --- a/video-js/demo.html +++ b/video-js/demo.html @@ -25,8 +25,14 @@ VideoJS.setup(); } + document.addEventListener("keydown", function(e){ + // alert(e.keyCode); + }, false); + + + diff --git a/video-js/video.js b/video-js/video.js index 78b1c0274..9b786c7c5 100644 --- a/video-js/video.js +++ b/video-js/video.js @@ -104,6 +104,15 @@ 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); + + // 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){ + if (event.keyCode == 27) { + this.fullscreenOff(); + } + }.context(this); // Support older browsers that used autobuffer if (this.video.preload) this.video.autobuffer = true; @@ -490,6 +499,9 @@ var VideoJS = Class.extend({ // 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.escKeyListener, false); + // Hide any scroll bars document.documentElement.style.overflow = 'hidden'; @@ -505,6 +517,8 @@ var VideoJS = Class.extend({ fullscreenOff: function(){ this.videoIsFullScreen = false; + document.removeEventListener("keydown", this.escKeyListener, false); + // Unhide scroll bars. document.documentElement.style.overflow = this.docOrigOverflow;