HTML5 games, video get boost from full-screen API in Firefox nightly

The HTML full-screen API, which allows a Web application to display a page …

Support for the HTML full-screen API was recently enabled in Firefox nightly builds. It allows Web applications to toggle the browser into full-screen mode and stretch a single page element so that it fills the user’s display.

The feature will be especially useful for the HTML5 video element, making it easy for developers to add native full-screen playback to their custom HTML video player interfaces. It will also likely be useful for games and other kinds of content where fullscreen interaction is desirable.

The discussion surrounding HTML full-screen API’s began last year on the WHATWG mailing list. The WebKit team was experimenting with full-screen support for HTML5 video and was contemplating a more general API that could be used for any kind of Web content. Mozilla’s Robert O’Callahan wrote up a proposal that fleshed out what the API might look like.

WebKit introduced support for the full-screen API earlier this year, and it’s already supported in Chrome stable releases. Mozilla recently rolled out its own implementation in nightly builds and is planning to deliver the feature to regular end users in Firefox 10.

Mozilla has taken a few steps to prevent abuse of the new API. A Web application can’t arbitrarily make an element fullscreen without user intervention—the operation has to be initiated by a user action. The mechanism that is used to enforce that safeguard is said to work much like a popup blocker.

Embedded content in an iframe element will be barred from initiating a full-screen operation unless the iframe is defined with a specific property. Additional details regarding the security of the full-screen feature have been published on the Mozilla developer wiki.

The addition of native full-screen support will help make standards-based Web technologies more competitive versus plugins like Flash for building rich Internet applications. If you are running Chrome, a Firefox nightly, or other compatible browser, you can try out the full-screen feature for yourself by visiting this demo.