Created
December 12, 2013 01:41
-
-
Save DeanMarkTaylor/7921880 to your computer and use it in GitHub Desktop.
Copy of HTML5 Full-screen demo http://html5-demos.appspot.com/static/fullscreen.html modified to add support for testing IE.
Specifically adds onload handler to test entering full-screen as soon as page loads.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <!-- | |
| Copyright 2011 Google Inc. | |
| Licensed under the Apache License, Version 2.0 (the "License"); | |
| you may not use this file except in compliance with the License. | |
| You may obtain a copy of the License at | |
| http://www.apache.org/licenses/LICENSE-2.0 | |
| Unless required by applicable law or agreed to in writing, software | |
| distributed under the License is distributed on an "AS IS" BASIS, | |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
| See the License for the specific language governing permissions and | |
| limitations under the License. | |
| Author: Eric Bidelman ([email protected]) | |
| --> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="chrome=1"> | |
| <title>Fullscreen API</title> | |
| <link href="http://fonts.googleapis.com/css?family=Open+Sans:300|Raleway:100" rel="stylesheet" type="text/css"> | |
| <style> | |
| ::-webkit-scrollbar { | |
| width: 15px; | |
| background: white; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| box-shadow: inset 0 0 99px rgba(0,0,0,.2); | |
| border: solid transparent; | |
| border-width: 6px 4px; | |
| } | |
| html, body { | |
| height: 100%; | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| } | |
| body { | |
| margin: 2em; | |
| font-family: 'Open Sans', sans-serif; | |
| font-weight: 300; | |
| -webkit-columns: 2; | |
| -webkit-column-gap: 2.5em; | |
| -webkit-column-rule: 1px solid #eee; | |
| -moz-columns: 2; | |
| -moz-column-gap: 2.5em; | |
| -moz-column-rule: 1px solid #eee; | |
| /*text-align: justify;*/ | |
| } | |
| h1, h2, h3 { | |
| font-family: 'Raleway', sans-serif; | |
| font-weight: normal; | |
| margin: 25px 0 10px 0; | |
| color: #888; | |
| } | |
| h1 { | |
| font-size: 60px; | |
| margin-top: 0; | |
| } | |
| h2 { | |
| font-size: 32px; | |
| } | |
| :-webkit-full-screen-document { | |
| } | |
| /* A full-screen element that is not the root element should be stretched to cover the viewport. */ | |
| :-webkit-full-screen:not(:root) { | |
| width: 90% !important; | |
| float: none !important; | |
| } | |
| :-webkit-full-screen video { | |
| width: 100%; | |
| } | |
| :-webkit-full-screen .tohide { | |
| display: none; | |
| } | |
| :-moz-full-screen:not(:root) { | |
| width: 90% !important; | |
| float: none !important; | |
| } | |
| :-moz-full-screen #fs-inner { | |
| display: table-cell; | |
| vertical-align: middle; | |
| } | |
| :-moz-full-screen #fs { | |
| width: 90%; | |
| margin: auto; | |
| } | |
| :-moz-full-screen video { | |
| width: 100%; | |
| } | |
| :-moz-full-screen .tohide { | |
| display: none; | |
| } | |
| #fs-container:-moz-full-screen { | |
| display: table; | |
| margin: auto; | |
| float: none; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| #fs-container { | |
| float: right; | |
| } | |
| #fs { | |
| width: 400px; | |
| background: -webkit-linear-gradient(white 20%, #eee); | |
| background: -moz-linear-gradient(white 20%, #eee); | |
| box-shadow: 0 0 10px #ccc inset; | |
| border-radius: 10px; | |
| text-align: center; | |
| padding: 1em; | |
| display: -webkit-box; | |
| -webkit-box-orient: vertical; | |
| margin-left: 1em; | |
| } | |
| #fs div:first-of-type { | |
| margin-bottom: 10px; | |
| text-transform: uppercase; | |
| } | |
| video { | |
| width: 350px; | |
| } | |
| button { | |
| display: inline-block; | |
| background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F9F9F9), to(#E3E3E3)); | |
| background: -webkit-linear-gradient(#F9F9F9 40%, #E3E3E3 70%); | |
| background: -moz-linear-gradient(#F9F9F9 40%, #E3E3E3 70%); | |
| background: -ms-linear-gradient(#F9F9F9 40%, #E3E3E3 70%); | |
| background: -o-linear-gradient(#F9F9F9 40%, #E3E3E3 70%); | |
| background: linear-gradient(#F9F9F9 40%, #E3E3E3 70%); | |
| border: 1px solid #999; | |
| -webkit-border-radius: 3px; | |
| border-radius: 3px; | |
| padding: 5px 8px; | |
| outline: none; | |
| white-space: nowrap; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| user-select: none; | |
| cursor: pointer; | |
| text-shadow: 1px 1px #fff; | |
| font-weight: 700; | |
| font-size: 10pt; | |
| } | |
| button:hover { | |
| border-color: black; | |
| } | |
| button:active { | |
| background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#E3E3E3), to(#F9F9F9)); | |
| background: -webkit-linear-gradient(#E3E3E3 40%, #F9F9F9 70%); | |
| background: -moz-linear-gradient(#E3E3E3 40%, #F9F9F9 70%); | |
| background: -ms-linear-gradient(#E3E3E3 40%, #F9F9F9 70%); | |
| background: -o-linear-gradient(#E3E3E3 40%, #F9F9F9 70%); | |
| background: linear-gradient(#E3E3E3 40%, #F9F9F9 70%); | |
| } | |
| iframe { | |
| width: 100%; | |
| height: 95px; | |
| border: 1px solid #eee; | |
| box-sizing: border-box; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Main Title</h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec hendrerit mauris. | |
| Nulla pellentesque, tortor ac euismod elementum, erat risus pellentesque magna, feugiat | |
| posuere dui diam quis risus. Duis gravida sagittis viverra. Mauris a pretium diam. Mauris | |
| lacinia blandit pulvinar. Morbi a volutpat purus. In hac habitasse platea dictumst. Fusce | |
| malesuada tortor nisl, ut suscipit urna. Morbi nec justo ligula, ornare convallis mi.</p> | |
| <div id="fs-container"> | |
| <div id="fs-inner"> | |
| <div id="fs"> | |
| <div class="tohide">Check out this awesome video!</div> | |
| <video controls ondblclick="toggleFS(this)"> | |
| <source src="http://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.webm"></source> | |
| <source src="http://www.yo-yo.org/mp4/yu.mp4"></source> | |
| </video> | |
| <button id="enter-exit-fs" onclick="enterFullscreen()">Toggle fullscreen</button> | |
| <div><small class="tohide">fullscreen: 'f',</small> <small>close: 'ENTER' or 'ESC'</small></div> | |
| </div> | |
| </div> | |
| </div> | |
| <p>Donec volutpat est et augue consectetur ac auctor libero ultrices. | |
| Ut tellus nisi, convallis at gravida id, interdum sit amet augue. Nullam et lacus ac elit | |
| pellentesque ornare ac a urna. Sed vestibulum porta erat, vel vulputate nunc pellentesque a. | |
| Ut neque dui, vulputate quis pretium vitae, ornare ac turpis. Vivamus quam tellus, fringilla | |
| at rhoncus eget, placerat vitae nunc. Nam feugiat quam vel nisl dignissim bibendum. Cras dictum, | |
| sem et cursus rutrum, turpis magna dictum orci, lacinia sagittis elit elit sit amet elit. | |
| Cras feugiat erat sit amet elit sagittis ultrices. Nam rhoncus mollis massa, ut ultricies | |
| lectus dignissim nec.</p> | |
| <h2>Subtitle</h2> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec hendrerit mauris. | |
| Nulla pellentesque, tortor ac euismod elementum, erat risus pellentesque magna, feugiat | |
| posuere dui diam quis risus. Duis gravida sagittis viverra. Mauris a pretium diam. Mauris | |
| lacinia blandit pulvinar. Morbi a volutpat purus. In hac habitasse platea dictumst. Fusce | |
| malesuada tortor nisl, ut suscipit urna. Morbi nec justo ligula, ornare convallis mi.</p> | |
| <p>Donec volutpat est et augue consectetur ac auctor libero ultrices. | |
| Ut tellus nisi, convallis at gravida id, interdum sit amet augue. Nullam et lacus ac elit | |
| pellentesque ornare ac a urna. Sed vestibulum porta erat, vel vulputate nunc pellentesque a. | |
| Ut neque dui, vulputate quis pretium vitae, ornare ac turpis. Vivamus quam tellus, fringilla | |
| at rhoncus eget, placerat vitae nunc.</p> | |
| <h2><iframe> content</h2> | |
| <iframe src="fullscreen-frame.html" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec hendrerit mauris. | |
| Nulla pellentesque, tortor ac euismod elementum, erat risus pellentesque magna, feugiat | |
| posuere dui diam quis risus. Duis gravida sagittis viverra. Mauris a pretium diam. Mauris | |
| lacinia blandit pulvinar. Morbi a volutpat purus. In hac habitasse platea dictumst. Fusce | |
| malesuada tortor nisl, ut suscipit urna. Morbi nec justo ligula, ornare convallis mi.</p> | |
| <script> | |
| document.cancelFullScreen = document.webkitExitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen || document.exitFullscreen; | |
| var elem = document.querySelector(document.webkitExitFullscreen ? "#fs" : "#fs-container"); | |
| document.addEventListener('keydown', function(e) { | |
| switch (e.keyCode) { | |
| case 13: // ENTER. ESC should also take you out of fullscreen by default. | |
| e.preventDefault(); | |
| document.cancelFullScreen(); // explicitly go out of fs. | |
| break; | |
| case 70: // f | |
| enterFullscreen(); | |
| break; | |
| } | |
| }, false); | |
| function toggleFS(el) { | |
| if (el.webkitEnterFullScreen) { | |
| el.webkitEnterFullScreen(); | |
| } else { | |
| if (el.mozRequestFullScreen) { | |
| el.mozRequestFullScreen(); | |
| } else { | |
| el.requestFullscreen(); | |
| } | |
| } | |
| el.ondblclick = exitFullscreen; | |
| } | |
| function onFullScreenEnter() { | |
| console.log("Entered fullscreen!"); | |
| elem.onwebkitfullscreenchange = onFullScreenExit; | |
| elem.onmozfullscreenchange = onFullScreenExit; | |
| }; | |
| // Called whenever the browser exits fullscreen. | |
| function onFullScreenExit() { | |
| console.log("Exited fullscreen!"); | |
| }; | |
| // Note: FF nightly needs about:config full-screen-api.enabled set to true. | |
| function enterFullscreen() { | |
| console.log("enterFullscreen()"); | |
| elem.onwebkitfullscreenchange = onFullScreenEnter; | |
| elem.onmozfullscreenchange = onFullScreenEnter; | |
| elem.onfullscreenchange = onFullScreenEnter; | |
| if (elem.webkitRequestFullscreen) { | |
| console.log('elem.webkitRequestFullscreen'); | |
| elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); | |
| } else { | |
| if (elem.mozRequestFullScreen) { | |
| console.log('elem.mozRequestFullScreen'); | |
| elem.mozRequestFullScreen(); | |
| } else if (elem.msRequestFullscreen) { | |
| console.log('elem.msRequestFullscreen'); | |
| elem.msRequestFullscreen(); | |
| } else { | |
| console.log('elem.requestFullscreen'); | |
| elem.requestFullscreen(); | |
| } | |
| } | |
| document.getElementById('enter-exit-fs').onclick = exitFullscreen; | |
| } | |
| function exitFullscreen() { | |
| console.log("exitFullscreen()"); | |
| document.cancelFullScreen(); | |
| document.getElementById('enter-exit-fs').onclick = enterFullscreen; | |
| } | |
| </script> | |
| <script>window.onload = function () { | |
| console.log('onload - requesting full screen') | |
| enterFullscreen(); | |
| };</script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment