HTML and CSS Reference
In-Depth Information
<track src="media/subtitles_en.vtt"
kind="subtitles" default="default"
label="English" srclang="en" />
<track src="media/subtitles_da.vtt"
kind="subtitles"
label="Dansk" srclang="da" />
<!-- Provide fallback for browsers that doesn't support the video element -->
<p>Browser not support the HTML5 Video element.</p>
</video>
■
WebvTT is a simple format superseding the SrT subtitles format. WebvTT files contain a list of cues that
specifies the timing of texts. Here is an example of two texts to display between the 12th and 16th seconds and the 18th
and 21st seconds.
Tip
WEBVTT
00:12.000 --> 00:16.000
What brings you to the land of the gatekeepers?
00:18.000 --> 00:21.000
I'm searching for someone
In case a browser does not support the video or audio element you can specify a fallback by adding the
necessary code inside the video and audio elements. You could for example insert an old school Flash SWF as shown
in Listing 8-4.
Listing 8-4.
Example of Falling Back to a Flash SWF If the Video Element Is Not Supported in the Browser
<video id="video-example" controls="controls" poster="media/poster.png" src="media/trailer.mp4">
<!-- Provide fallback for browsers that doesn't support the video element -->
<object width="300" height="150" data="video-player.swf"
type="application/x-shockwave-flash" title="Video Player ">
<param name="movie" value="media/trailer.mp4" />
<param name="height" value="300" />
<param name="width" value="150" />
<param name="menu" value="true" />
</object>
</video>
Creating the JSF Media Component
For JSF support of the HTML5 media elements, we will create a component for both the audio and video elements.
Both components will have the common attributes as defined in
HTMLMediaElement
in the HTML5 specification. The
video component will have three extra attributes to specify the dimensions of the video and to display a poster prior to
playback. To support media sources and tracks, we will include two collections in the interface of the component: one
for specifying the available media sources and one for the available text tracks.
