Fullscreen fallback for older browsers

assets/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.0.0
+// plyr.js v1.0.6
 // https://github.com/sampotts/plyr
 // ==========================================================================
 // Credits: http://paypal.github.io/accessible-html5-video-player/
@@ -46,21 +46,30 @@
 			playing: 			"playing",
 			muted: 				"muted",
 			captions: {
-				active: 		"captions-active",
+				enabled: 		"captions-enabled",
-				enabled: 		"captions-enabled"
+				active: 		"captions-active"
 			},
 			fullscreen: {
-				enabled: 		"fullscreen-enabled"
+				enabled: 		"fullscreen-enabled",
+				active: 		"fullscreen-active"
 			}
 		},
 		captions: {
 			defaultActive: 		false
 		},
 		fullscreen: {
-			enabled: 			true
+			enabled: 			true,
+			fallback: 			true
 		}
 	};
 
+	// Debugging
+	function _log(text, error) {
+		if(config.debug && window.console) {
+			console[(error ? "error" : "log")](text);
+		}
+	}
+
 	// Credits: http://paypal.github.io/accessible-html5-video-player/
 	// Unfortunately, due to scattered support, browser sniffing is required
 	function _browserSniff() {
@@ -180,6 +189,11 @@
 		element.addEventListener(event, callback, false);
 	}
 
+	// Unbind event
+	function _off(element, event, callback) {
+		element.removeEventListener(event, callback, false);
+	}
+
 	// Get click position relative to parent
 	// http://www.kirupa.com/html5/getting_mouse_click_position.htm
 	function _getClickPosition(event) {
@@ -266,7 +280,9 @@
 
 		// Update methods to do something useful
 		if (fullscreen.supportsFullScreen) {
-			fullscreen.fullScreenEventName = fullscreen.prefix + "fullscreenchange";
+			// Yet again Microsoft awesomeness, 
+			// Sometimes the prefix is "ms", sometimes "MS" to keep you on your toes
+			fullscreen.fullScreenEventName = (fullscreen.prefix == "ms" ? "MSFullscreenChange" : fullscreen.prefix + "fullscreenchange");
 
 			fullscreen.isFullScreen = function() {
 				switch (this.prefix) {
@@ -361,12 +377,20 @@
 			return _getElements(selector)[0];
 		}
 
+		// Determine if we're in an iframe
+		function _inFrame() {
+			try {
+				return window.self !== window.top;
+			} 
+			catch (e) {
+				return true;
+			}
+		}
+
 		// Insert controls
 		function _injectControls() {
 			// Insert custom video controls
-			if (config.debug) {
+			_log("Injecting custom controls");
-				console.log("Injecting custom controls");
-			}
 
 			// Use specified html 
 			// Need to do a default?
@@ -416,7 +440,7 @@
 
 			// If there's no media, bail
 			if(!player.media) {
-				console.error("No audio or video element found!");
+				_log("No audio or video element found!", true);
 				return false;
 			}
 
@@ -479,14 +503,10 @@
 				player.captionExists = true;
 				if (captionSrc === "") {
 					player.captionExists = false;
-					if (config.debug) {
+					_log("No caption track found.");
-						console.log("No caption track found.");
-					}
 				}
 				else {
-					if (config.debug) {
+					_log("Caption track found; URI: " + captionSrc);
-						console.log("Caption track found; URI: " + captionSrc);
-					}
 				}
 
 				// If no caption file exists, hide container for caption text
@@ -502,13 +522,13 @@
 							(player.browserName === "IE" && player.browserMajorVersion === 11) || 
 							(player.browserName === "Firefox" && player.browserMajorVersion >= 31) || 
 							(player.browserName === "Safari" && player.browserMajorVersion >= 7)) {
-						if (config.debug) {
+						// Debugging
-							console.log("Detected IE 10/11 or Firefox 31+ or Safari 7+");
+						_log("Detected IE 10/11 or Firefox 31+ or Safari 7+");
-						}
+
-						// set to false so skips to "manual" captioning
+						// Set to false so skips to "manual" captioning
 						player.isTextTracks = false;
 						
-						// turn off native caption rendering to avoid double captions [doesn"t work in Safari 7; see patch below]
+						// Turn off native caption rendering to avoid double captions [doesn"t work in Safari 7; see patch below]
 						track = {};
 						tracks = player.media.textTracks;
 						for (j=0; j < tracks.length; j++) {
@@ -519,9 +539,7 @@
 
 					// Rendering caption tracks - native support required - http://caniuse.com/webvtt
 					if (player.isTextTracks) {
-						if (config.debug) {
+						_log("textTracks supported");
-							console.log("textTracks supported");
-						}
 						_showCaptions(player);
 
 						track = {};
@@ -542,9 +560,7 @@
 					}
 					// Caption tracks not natively supported
 					else {
-						if (config.debug) {
+						_log("textTracks not supported so rendering captions manually");
-							console.log("textTracks not supported so rendering captions manually");
-						}
 						_showCaptions(player);
 
 						// Render captions from array at appropriate time
@@ -589,12 +605,10 @@
 										// Remove first element ("VTT")
 										player.captions.shift();
 
-										if (config.debug) {
+										_log("Successfully loaded the caption file via ajax.");
-											console.log("Successfully loaded the caption file via ajax.");
 									} 
-									} 
+									else {
-									else if (config.debug) {
+										_log("There was a problem loading the caption file via ajax.", true);
-										console.error("There was a problem loading the caption file via ajax.");
 									}
 								}
 							}
@@ -607,10 +621,10 @@
 
 					// If Safari 7, removing track from DOM [see "turn off native caption rendering" above]
 					if (player.browserName === "Safari" && player.browserMajorVersion === 7) {
-						if (config.debug) {
+						_log("Safari 7 detected; removing track from DOM");
-							console.log("Safari 7 detected; removing track from DOM");
+
-						}
 						tracks = player.media.getElementsByTagName("track");
+						
 						player.media.removeChild(tracks[0]);
 					}
 				}
@@ -627,15 +641,17 @@
 		// Setup fullscreen
 		function _setupFullscreen() {
 			if(player.type === "video" && config.fullscreen.enabled) {
-				if(fullscreen.supportsFullScreen) {
+				// Check for native support
-					if(config.debug) {
+				var nativeSupport = fullscreen.supportsFullScreen;
-						console.log("Fullscreen enabled");
-					}
 
+				if(nativeSupport || (config.fullscreen.fallback && !_inFrame())) {
+					_log((nativeSupport ? "Native" : "Fallback") + " fullscreen enabled");
+
+					// Add styling hook
 					_toggleClass(player.container, config.classes.fullscreen.enabled, true);
 				}
-				else if(config.debug) {
+				else {
-					console.warn("Fullscreen not supported");
+					_log("Fullscreen not supported and fallback disabled.");
 				}
 			}	
 		}
@@ -714,12 +730,52 @@
 
 		// Toggle fullscreen
 		function _toggleFullscreen() {
+			// Check for native support
+			var nativeSupport = fullscreen.supportsFullScreen;
+
+			// If it's a fullscreen change event, it's probably a native close
+			if(event.type === fullscreen.fullScreenEventName) {
+				config.fullscreen.active = fullscreen.isFullScreen();
+			}
+			// If there's native support, use it
+			else if(nativeSupport) {
+				// Request fullscreen
 				if(!fullscreen.isFullScreen()) {
 					fullscreen.requestFullScreen(player.container);
 				}
+				// Bail from fullscreen
 				else {
 					fullscreen.cancelFullScreen();
 				}
+
+				// Check if we're actually full screen (it could fail)
+				config.fullscreen.active = fullscreen.isFullScreen();
+			}
+			else {
+				// Otherwise, it's a simple toggle
+				config.fullscreen.active = !config.fullscreen.active;
+
+				// Bind/unbind escape key
+				if(config.fullscreen.active) {
+					_on(document, "keyup", _handleEscapeFullscreen);
+					document.body.style.overflow = "hidden";
+				}
+				else {
+					_off(document, "keyup", _handleEscapeFullscreen);
+					document.body.style.overflow = "";
+				}
+			}
+
+			// Set class hook
+			_toggleClass(player.container, config.classes.fullscreen.active, config.fullscreen.active);
+		}
+
+		// Bail from faux-fullscreen 
+		function _handleEscapeFullscreen(event) {
+			// If it's a keypress and not escape, bail
+			if((event.which || event.charCode || event.keyCode) === 27 && config.fullscreen.active) {
+				_toggleFullscreen();				
+			}
 		}
 
 		// Set volume
@@ -773,24 +829,6 @@
 
 		// Listen for events
 		function _listeners() {
-			// Fullscreen
-			_on(player.buttons.fullscreen, "click", _toggleFullscreen);
-
-			// Click video
-			if(player.type === "video" && config.click) {
-				_on(player.videoContainer, "click", function() {
-					if(player.media.paused) {
-						_play();
-					}
-					else if(player.media.ended) {
-						_restart();
-					}
-					else {
-						_pause();
-					}
-				});
-			}
-
 			// Play
 			_on(player.buttons.play, "click", function() { 
 				_play(); 
@@ -826,6 +864,27 @@
 				_toggleMute(this.checked);
 			});
 
+			// Fullscreen
+			_on(player.buttons.fullscreen, "click", _toggleFullscreen);
+
+			// Handle user exiting fullscreen by escaping etc
+			_on(document, fullscreen.fullScreenEventName, _toggleFullscreen);
+
+			// Click video
+			if(player.type === "video" && config.click) {
+				_on(player.videoContainer, "click", function() {
+					if(player.media.paused) {
+						_play();
+					}
+					else if(player.media.ended) {
+						_restart();
+					}
+					else {
+						_pause();
+					}
+				});
+			}
+			
 			// Duration
 			_on(player.media, "timeupdate", function() {
 				player.secs = parseInt(player.media.currentTime % 60);
@@ -885,16 +944,12 @@
 			player.browserMajorVersion = player.browserInfo[1];
 
 			// Debug info
-			if(config.debug) {
+			_log(player.browserName + " " + player.browserMajorVersion);
-				console.log(player.browserName + " " + player.browserMajorVersion);
-			}
 
 			// If IE8, stop customization (use fallback)
 			// If IE9, stop customization (use native controls)
 			if (player.browserName === "IE" && (player.browserMajorVersion === 8 || player.browserMajorVersion === 9) ) {
-				if(config.debug) {
+				_log("Browser not suppported.", true);
-					console.error("Browser not suppported.");
-				}
 				return false;
 			}
 

assets/less/docs.less

@@ -130,8 +130,8 @@ a {
 .example-video .player {
 	margin: 0 auto @padding-base;
 
-	&:fullscreen,
+	&-fullscreen,
-	&-fullscreen {
+	&.fullscreen-active {
 		max-width: none;
 	}
 }

assets/less/plyr.less

@@ -349,15 +349,15 @@
 
 	// Full screen mode
 	&-fullscreen,
-	&:fullscreen {
+	&.fullscreen-active {
-		position: absolute;
+		position: fixed;
 		top: 0;
 		left: 0;
 		right: 0;
 		bottom: 0;
 		height: 100%;
 		width: 100%;
-		z-index: 999999;
+		z-index: 10000000;
 
 		.player-video-wrapper {
 			height: 100%;

dist/css/docs.css

@@ -1 +1 @@
-/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}*,::after,::before{box-sizing:border-box}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;line-height:1.5;text-align:center;color:#6D797F}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}h1{font-size:64px;font-size:4rem;color:#3498DB}p,small{margin:0 0 20px}small{display:block;padding:0 10px;font-size:14px;font-size:.9rem}header{padding:20px;margin-bottom:20px}header p{font-size:18px;font-size:1.1rem}@media (min-width:560px){header{padding-top:60px;padding-bottom:60px}}section{padding-bottom:20px}@media (min-width:560px){section{padding-bottom:40px}}a{text-decoration:none;color:#3498db;border-bottom:1px solid currentColor;transition:all .3s ease}a:focus,a:hover{color:#000}a:focus{outline:#343f4a dotted thin;outline-offset:1px}.btn{display:inline-block;padding:10px 30px;background:#3498db;border:0;color:#fff;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:600;border-radius:3px}.btn:focus,.btn:hover{color:#fff;background:#258cd1}.example-audio .player{max-width:480px}.example-video .player{max-width:1200px}.example-audio .player,.example-video .player{margin:0 auto 20px}.example-audio .player-fullscreen,.example-audio .player:-webkit-full-screen,.example-video .player-fullscreen,.example-video .player:-webkit-full-screen{max-width:none}.example-audio .player-fullscreen,.example-audio .player:-moz-full-screen,.example-video .player-fullscreen,.example-video .player:-moz-full-screen{max-width:none}.example-audio .player-fullscreen,.example-audio .player:-ms-fullscreen,.example-video .player-fullscreen,.example-video .player:-ms-fullscreen{max-width:none}.example-audio .player-fullscreen,.example-audio .player:fullscreen,.example-video .player-fullscreen,.example-video .player:fullscreen{max-width:none}@font-face{font-family:Avenir;src:url(../../assets/fonts/AvenirLTStd-Medium.woff2) format("woff2"),url(../../assets/fonts/AvenirLTStd-Medium.woff) format("woff"),url(../../assets/fonts/AvenirLTStd-Medium.ttf) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(../../assets/fonts/AvenirLTStd-Heavy.woff2) format("woff2"),url(../../assets/fonts/AvenirLTStd-Heavy.woff) format("woff"),url(../../assets/fonts/AvenirLTStd-Heavy.ttf) format("truetype");font-style:normal;font-weight:600}
+/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}*,::after,::before{box-sizing:border-box}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;line-height:1.5;text-align:center;color:#6D797F}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}h1{font-size:64px;font-size:4rem;color:#3498DB}p,small{margin:0 0 20px}small{display:block;padding:0 10px;font-size:14px;font-size:.9rem}header{padding:20px;margin-bottom:20px}header p{font-size:18px;font-size:1.1rem}@media (min-width:560px){header{padding-top:60px;padding-bottom:60px}}section{padding-bottom:20px}@media (min-width:560px){section{padding-bottom:40px}}a{text-decoration:none;color:#3498db;border-bottom:1px solid currentColor;transition:all .3s ease}a:focus,a:hover{color:#000}a:focus{outline:#343f4a dotted thin;outline-offset:1px}.btn{display:inline-block;padding:10px 30px;background:#3498db;border:0;color:#fff;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:600;border-radius:3px}.btn:focus,.btn:hover{color:#fff;background:#258cd1}.example-audio .player{max-width:480px}.example-video .player{max-width:1200px}.example-audio .player,.example-video .player{margin:0 auto 20px}.example-audio .player-fullscreen,.example-audio .player.fullscreen-active,.example-video .player-fullscreen,.example-video .player.fullscreen-active{max-width:none}@font-face{font-family:Avenir;src:url(../../assets/fonts/AvenirLTStd-Medium.woff2) format("woff2"),url(../../assets/fonts/AvenirLTStd-Medium.woff) format("woff"),url(../../assets/fonts/AvenirLTStd-Medium.ttf) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(../../assets/fonts/AvenirLTStd-Heavy.woff2) format("woff2"),url(../../assets/fonts/AvenirLTStd-Heavy.woff) format("woff"),url(../../assets/fonts/AvenirLTStd-Heavy.ttf) format("truetype");font-style:normal;font-weight:600}