HTML and CSS Reference
In-Depth Information
Fullscreen API
The Fullscreen API is a feature that plug-ins such as Flash and Silverlight have had for some time, and it's becoming
a feature of the browser as well. Currently, most of the full-screen options in the browser just scale the
video
object
to the height and width of the browser window, unlike the intended method of taking over the full screen of the
display. This is another feature that advertisers offering games in ads and especially entertainment clients love
because it allows users to get fully immersed in the content whether it be interactive games or high-definition video
trailers. The Fullscreen API is pretty divided among browser vendors, to say the least, so be sure to check out
http://caniuse.com/#search=fullsc
for the latest information.
What's interesting with the Fullscreen API is that when it becomes supported, it should have an included pseudo
class in CSS. Here's an example:
<style>
video:-webkit-full-screen {...}
video:-moz-full-screen {...}
video:fullscreen {...}
</style>
The previous code allows developers and designers to customize the layout for their video and ad content in its
full-screen mode. Currently, if you want to use the Fullscreen API for your
video
or
canvas
element, you will need to
use the vendor prefixes for Webkit and Mozilla to call the JavaScript methods, as follows:
<script>
someElement.requestFullscreen(); //go fullscreen
someElement.exitFullscreen(); //exit fullscreen
</script>
Note that you don't have to do this in newer versions of Opera where support is native!
Subtitles and Captions
Another developing feature of HTML5 video is what's known as the text track API, which would allow video content to
be accessible to a global audience. For example, advertising and advertisers may want to include their content's
voice-over as subtitles and use creative elements universally, meaning have a single video asset run in multiple
locations so long as the subtitles are in a correct language. Figure
7-12
from a Google I/O presentation shows that this
could be a very beneficial feature.
