HTML and CSS Reference
In-Depth Information
<h2>Video with multiple media sources and tracks</h2>
<projsfhtml5:video value="media/trailer.mp4"
controls="true"
sources="#{exampleVideoComponent.mediaSources}"
tracks="#{exampleVideoComponent.textTracks}"/>
Listing 8-13.
Backing Bean for the Video Component
package com.apress.projsf2html5.jsf;
import com.apress.projsf2html5.components.media.MediaSource;
import com.apress.projsf2html5.components.media.MediaTrack;
import com.apress.projsf2html5.components.media.MediaTrackKind;
import java.util.ArrayList;
import java.util.Collection;
import java.util.Locale;
import javax.enterprise.context.RequestScoped;
import javax.inject.Named;
@Named(value = "exampleVideoComponent")
@RequestScoped
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.
