前两天我们报道了最新发布的FireFox 10开始支持全屏API。可能很多人暂时不清楚能把这个全屏API用在什么地方，但是已经有人把调用这个功能的JavaScript代码发布出来，并且已经能与HTML5的“video”标签组合应用。
在这个jQuery插件的主页上，发布了一个全屏演示和一个应用“video”标签的视频演示。同时提醒除FireFox 10 外，仅Chrome 15与Safari 5.1或更高版本的浏览器支持原生全屏API。也就是说，你的浏览器版本不满足这个条件，可就不能正常运行这个功能。目前所有的IE浏览器都暂不支持，该Demo在检测出来后会给你相应提示。
经测试，首次运行全屏Demo时浏览器会出现一个浏览器的授权提示，在你允许后下次再运行就不会再出现。Demo在全屏后只能按“ESC”键退出，在页面中没有显示或隐藏的退出全屏接口，在代码的实际应用时建议还是加上。
如果浏览器支持HTML5，你应该可以看到这段视频。如果同时还是上述版本的浏览器，可以试着将其全屏播放。需要再次提醒的是，这段视频由“video”标签载入，而非Flash。
另还有“audio”标签加载的音频，感兴趣的朋友可以去他们的网站了解详情，或者是去GitHub查看实现全屏的JavaScript代码。
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>FullScreen API</title> | |
| <style> | |
| body { | |
| background: #F3F5FA; | |
| } | |
| #container { | |
| width: 600px; | |
| padding: 30px; | |
| background: #F8F8F8; | |
| border: solid 1px #ccc; | |
| color: #111; | |
| margin: 20px auto; | |
| border-radius: 3px; | |
| } | |
| #specialstuff { | |
| background: #33e; | |
| padding: 20px; | |
| margin: 20px; | |
| color: #fff; | |
| } | |
| #specialstuff a { | |
| color: #eee; | |
| } | |
| #fsstatus { | |
| background: #e33; | |
| color: #111; | |
| } | |
| #fsstatus.fullScreenSupported { | |
| background: #3e3; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id=”container”> | |
| <h1>FullScreen API Testing</h1> | |
| <div id=”specialstuff”> | |
| <p>Inside here is special stuff which will go fullscreen</p> | |
| <p>As of 10/20/2011, you’ll need Safari 5.1, <a href=”http://tools.google.com/dlpage/chromesxs“>Chrome Canary</a>, or <a href=”http://nightly.mozilla.org/“>Firefox Nightly</a> | |
| <p>Status: <span id=”fsstatus”></span> | |
| </div> | |
| <input type=”button” value=”Go Fullscreen” id=”fsbutton” /> | |
| <p> | |
| <a href=”http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/“>Back to article</a> | |
| </p> | |
| </div> | |
| <script> | |
| /* | |
| Native FullScreen JavaScript API | |
| ————- | |
| Assumes Mozilla naming conventions instead of W3C for now | |
| */ | |
| (function() { | |
| var | |
| fullScreenApi = { | |
| supportsFullScreen: false, | |
| isFullScreen: function() { return false; }, | |
| requestFullScreen: function() {}, | |
| cancelFullScreen: function() {}, | |
| fullScreenEventName: ”, | |
| prefix: ” | |
| }, | |
| browserPrefixes = ‘webkit moz o ms khtml’.split(‘ ‘); | |
| // check for native support | |
| if (typeof document.cancelFullScreen != ‘undefined’) { | |
| fullScreenApi.supportsFullScreen = true; | |
| } else { | |
| // check for fullscreen support by vendor prefix | |
| for (var i = 0, il = browserPrefixes.length; i < il; i++ ) { | |
| fullScreenApi.prefix = browserPrefixes[i]; | |
| if (typeof document[fullScreenApi.prefix + 'CancelFullScreen' ] != ‘undefined’ ) { | |
| fullScreenApi.supportsFullScreen = true; | |
| break; | |
| } | |
| } | |
| } | |
| // update methods to do something useful | |
| if (fullScreenApi.supportsFullScreen) { | |
| fullScreenApi.fullScreenEventName = fullScreenApi.prefix + ‘fullscreenchange’; | |
| fullScreenApi.isFullScreen = function() { | |
| switch (this.prefix) { | |
| case ”: | |
| return document.fullScreen; | |
| case ‘webkit’: | |
| return document.webkitIsFullScreen; | |
| default: | |
| return document[this.prefix + 'FullScreen']; | |
| } | |
| } | |
| fullScreenApi.requestFullScreen = function(el) { | |
| return (this.prefix === ”) ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen'](); | |
| } | |
| fullScreenApi.cancelFullScreen = function(el) { | |
| return (this.prefix === ”) ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen'](); | |
| } | |
| } | |
| // jQuery plugin | |
| if (typeof jQuery != ‘undefined’) { | |
| jQuery.fn.requestFullScreen = function() { | |
| return this.each(function() { | |
| var el = jQuery(this); | |
| if (fullScreenApi.supportsFullScreen) { | |
| fullScreenApi.requestFullScreen(el); | |
| } | |
| }); | |
| }; | |
| } | |
| // export api | |
| window.fullScreenApi = fullScreenApi; | |
| })(); | |
| </script> | |
| <script> | |
| // do something interesting with fullscreen support | |
| var fsButton = document.getElementById(‘fsbutton’), | |
| fsElement = document.getElementById(‘specialstuff’), | |
| fsStatus = document.getElementById(‘fsstatus’); | |
| if (window.fullScreenApi.supportsFullScreen) { | |
| fsStatus.innerHTML = ‘YES: Your browser supports FullScreen’; | |
| fsStatus.className = ‘fullScreenSupported’; | |
| // handle button click | |
| fsButton.addEventListener(‘click’, function() { | |
| window.fullScreenApi.requestFullScreen(fsElement); | |
| }, true); | |
| fsElement.addEventListener(fullScreenApi.fullScreenEventName, function() { | |
| if (fullScreenApi.isFullScreen()) { | |
| fsStatus.innerHTML = ‘Whoa, you went fullscreen’; | |
| } else { | |
| fsStatus.innerHTML = ‘Back to normal’; | |
| } | |
| }, true); | |
| } else { | |
| fsStatus.innerHTML = ‘SORRY: Your browser does not support FullScreen’; | |
| } | |
| </script> | |
| <script type=”text/javascript”> | |
| var _gaq = _gaq || []; | |
| _gaq.push(['_setAccount','UA-3734687-9']); | |
| _gaq.push(['_trackPageview'],['_trackPageLoadTime']); | |
| (function() { | |
| var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true; | |
| ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’; | |
| var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s); | |
| })(); | |
| </script> | |
| <script type=”text/javascript”> | |
| var clicky = { log: function(){ return; }, goal: function(){ return; }}; | |
| var clicky_site_id = 117587; | |
| (function() { | |
| var s = document.createElement(‘script’); | |
| s.type = ‘text/javascript’; s.async = true; | |
| s.src = ‘//static.getclicky.com/js’; | |
| ( document.getElementsByTagName(‘head’)[0] || document.getElementsByTagName(‘body’)[0] ).appendChild( s ); | |
| })(); | |
| </script> | |
| </body> | |
| </html> | |