HTML and CSS Reference
In-Depth Information
Chapter 8
Advanced JSF2 HTML5 Components
In the previous chapter we built JSF2 components for some of the new input elements introduced in HTML5. In
this chapter we will continue building JSF2 components that take advantage of some of the new non-input HTML5
elements.
Media Component
A weakness of HTML that has become more evident with the increased usage of mobile devices is the lack of a
standardized way of implementing media players for web pages. Prior to HTML5 web page authors had to display
embedded media content through Java applets or Flash SWFs using the
object
or
embed
elements. If you are a
seasoned web page author, you know all about the hassle you have to go through to ensure that your web page works
on all web browsers. With the advent of mobile devices, this problem has become even bigger. Despite all the web
standardization efforts in the past decade, you still have to write several workarounds and failovers in your web code
to ensure that they function well on the most popular web browsers and mobile devices. One of the popular mobile
platforms is iOS from Apple. Back in April 2010, Steve Jobs wrote an open letter
1
explaining Apple's thoughts on Flash,
basically stating that Flash will not be supported on iOS devices and that new open standards (such as HTML5)
should be used in the future to create graphically rich applications and games.
Media Elements Introduced in HTML5
For playing videos and audio. HTML5 introduces four new elements:
audio
,
video
,
source
, and
track
. The audio and
video elements define how a video or audio clip should be played and the controls available to visitor of the web page.
Nested in the
audio
and
video
elements,
source
elements can be inserted to offer media alternatives from which the
web browser can choose based on its supported media types and codecs.
■
You can find details about the specification of media elements in the HTML5 specification on the W3C website
Note
Both the
audio
and
video
elements implement the
HTMLMediaElement
interface specified in the HTML5 specification.
The interface defines common properties and methods for playing back audio and video clips (see Table
8-1
). The
writable properties can be set using the attributes of the audio and video elements. Read-only properties and methods
can be accessed in the DOM through JavaScript.
