注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

百鬼夜行

身是菩提树,心如明镜台,时时勤拂拭,勿使惹尘埃。

 
 
 

日志

 
 

JAVASCRIPT / FULLSCREEN API  

2014-06-23 17:24:50|  分类: HTML5CSS3WEBAPP |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
http://demosthenes.info/blog/708/Introducing-the-HTML5-FullScreen-API

Right now Apple, Microsoft, Google and Mozilla are pushing towards “flat” design by slimming down the visual clutter of their applications. Despite this minimalist trend, it is unavoidable that at least a few buttons and menu options will remain in browsers.

Those same browsers are being used to display games, video and other content, where the presence of window “chrome” is deeply distracting. As a separate application, Adobe Flash had a “fullscreen” mode that can take over the complete screen, but, as with most other plugin features, HTML5 is superseding it, in the form of the FullScreen API.

Like Geolocation, the Fullscreen API is permission-based: the user must explicitly request content to be displayed in fullscreen mode; it cannot be imposed on a page.  After launching fullscreen, the browser asks if the user wants to keep things that way.

While this works as a practical safeguard, I suspect that some web developers might still regard the Fullscreen API as the 21st century equivalent of the popup window. The reality is that fullscreen mode is not for every website.  However tempting, it is likely that most general-interest sites do not require hijacking user’s screen. In most cases, fullscreen display should be limited to instances in which the user is to be engaged without distraction for several minutes, such as:

  • Extended presentations
  • Browser-driven kiosk applications
  • Games
  • Video content

Keep in mind that the average visitor stays on a web page for less than a minute; engaging fullscreen mode should therefore be reserved for very particular applications. It’s also important to note that your content should be delivered at sufficiently high resolution to be presented across the screen: responsive images are a must when offering fullscreen mode.

Browser Support

The Fullscreen API has good browser support on the desktop: Firefox 10+, Chrome 15+, Internet Explorer and 11 and Safari 5.1 all support the API. The issue right now is that each browser interprets the existing API with slight modifications to the syntax, just likeCSS vendor prefixes. For example, the requestFullscreen method:

element.requestFullscreen(); element.mozRequestFullScreen();
element.webkitRequestFullscreen(); element.msRequestFullscreen();

Note that requestFullscreen starts with a lowercase letter in its standard form, andscreen has a lowercase s, but the method begins with a capital letter when a prefix is added, keeping to JavaScript’s camelCase convention. Because of the subtle differences in the syntax, I suggest you copy and paste the methods to avoid typos.

Internet Explorer pre version 11 has its own, very different, proprietary method, which I’ll address in a future article.

Coding For FullScreen Support

Now that we understand the basic requirements for the FullScreen API, let’s look at the ways it might be used in browsers that support it.  First, we need to ensure that the right method is called for the appropriate browser. We’ll do that in a function:

<script>
function launchFullScreen(element) {
if (element.requestFullscreen)
{ element.requestFullscreen(); }
else if (element.mozRequestFullScreen)
{ element.mozRequestFullScreen(); }
else if (element.webkitRequestFullscreen)
{ element.webkitRequestFullscreen(); }
else if (element.msRequestFullscreen)
{ element.msRequestFullscreen(); }
}
</script>

The function takes a single argument, which defines what will be pushed into fullscreen mode. If you want the entire page to be displayed this way, the root documentElementshould be passed. This action will commonly be associated with a button or link somewhere on the page:

<button onclick="launchFullScreen(document.documentElement)">Fullscreen </button>

Using the same function, you can pass any identifiable element and its content into fullscreen mode:

<button onclick="launchFullScreen(document.getElementById('pic'))">
Fullscreen Image </button>

Note that HTML5 video has natural fullscreen support built into the browser.

Using fullscreen mode often implies that new CSS will be applied to the content, and/or that elements will be swapped out for an alternative high-resolution version.

Exiting Fullscreen Mode

While the ESC key is a standard browser UI option to escape fullscreen mode, it’s good practice to present a visible option to do so. Note that the method swaps betweenCancelFullScreen (the old version of the spec) to exitFullscreen, the new version.

<script>
function cancelFullScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
</script>

Again, this is usually associated with an interface element:

<button onclick="cancelFullScreen(documentElement)">Cancel Fullscreen</button>

As you can imagine, positioning these interface elements and making them available to the user at appropriate times can become a little complicated.

Keep in mind that users can still reject the initial FullScreen prompt: if they do so, the browser will fall back into standard “windowed” operation. Needless to say, the presentation of your content should continue regardless.

Photograph by Trey Ratcliff, licensed under Creative Commons.

  评论这张
 
阅读(111)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017