HTML and CSS Reference
In-Depth Information
<h2>Video with multiple media sources and tracks</h2>
<projsfhtml5:video value="media/trailer.mp4"
Listing 8-13. Backing Bean for the Video Component
package com.apress.projsf2html5.jsf;
import java.util.ArrayList;
import java.util.Collection;
import java.util.Locale;
import javax.enterprise.context.RequestScoped;
import javax.inject.Named;
@Named(value = "exampleVideoComponent")
public class ExampleVideoComponent {
public Collection<MediaSource> getMediaSources() {
Collection<MediaSource> sources = new ArrayList<>();
sources.add(new MediaSource("media/trailer.mp4", "video/mp4"));
sources.add(new MediaSource("media/trailer.webm", "video/webm"));
return sources;
public Collection<MediaTrack> getTextTracks() {
Collection<MediaTrack> tracks = new ArrayList<>();
tracks.add(new MediaTrack("media/subtitles_da.vtt", MediaTrackKind.subtitles,
"Dansk", new Locale("da"), false));
tracks.add(new MediaTrack("media/subtitles_en.vtt", MediaTrackKind.subtitles,
"English", Locale.ENGLISH, true));
return tracks;
Progress Bar Component
Most JSF UI frameworks come with a progress bar component. Prior to HTML5 these frameworks used widget
frameworks such as JQueryUI. HTML5 introduces a new element to represent progress bars, which is the <progress/>
element. The element can be used to display determinate and indeterminate progress. Indeterminate progress can
be used to display a waiting indicator while waiting for a process to complete, whereas determinate progress can
be used to show progress of a task where the end of the task is somehow known. Figure 8-1 shows an example of
indeterminate and determinate progress bars.
Search WWH ::

Custom Search