HTML and CSS Reference
In-Depth Information
<!-- Provide fallback for browsers that doesn't support the audio element -->
<p>Browser not support the HTML5 Audio element.</p>
</audio>
<button onclick="togglePlay(this, 'audio-example');">Play</button>
</article>
</body>
</html>
Different web browsers and devices support different media formats. Rather than doing device and browser
detection and updating the src attribute accordingly, it is possible to specify multiple media sources. The browser is
free to select the most appropriate media source based on its supported formats and codecs. When specifying sources
it is not necessary to specify a media file in the src attribute of the audio or video element. The most commonly
supported formats and codecs are the WebM format (using the VP8 video codec and Vorbis audio codec) and MP4
format (using the H.264 video codec and ACC or MP3 audio codec).
Listing 8-2 is an example of providing multiple video and audio sources that will automatically be selected based
on the formats supported by the browser accessing the page.
Listing 8-2.
Multiple Media Sources Can Be Provided to Ensure Optimal Playback Across Browsers and Devices
<video id="video-example" controls="controls" poster="media/poster.png">
<source src="media/trailer.mp4" type="video/mp4" />
<source src="media/trailer.webm" type="video/webm" />
<!-- Provide fallback for browsers that doesn't support the video element -->
<p>Browser not support the HTML5 Video element.</p>
</video>
<audio id="audio-example" controls="controls">
<source src="media/04-Death_Becomes_Fur.mp4" type="audio/mp4" />
<source src="media/04-Death_Becomes_Fur.oga" type="audio/ogg; codecs=vorbis" />
<!-- Provide fallback for browsers that doesn't support the audio element -->
<p>Browser not support the HTML5 Audio element.</p>
</audio>
Timed text tracks such as subtitles and captions can be added to both
audio
and
video
elements using the
track
element and Web Video Text Tracks (WebVTT) formatted files. Details about the format can be found at
the W3C site at
http://dev.w3.org/html5/webvtt/
.
Tracks can serve different purposes by specifying the kind of
track (
subtitles
,
captions
,
metadata
,
chapters
, and
descriptions
). Tracks can also be localized by specfying the
language of the track. Tracks will automatically be selected based on the language settings in the browser.
Listing 8-3 is an example of providing multiple subtitles automatically selected by the browser based on the user's
preferred locale. If the user's preferred locale is Danish, the browser will pick the Danish subtitles. In all other cases it
will fall back to English subtitles.
Listing 8-3.
Track Elements Can Be Used to Specify Subtitles in Multiple Languages; the Browser Will Auto Detect the
Most Suitable Language Based on Its Language Settings
<video id="video-example" controls="controls" poster="media/poster.png">
<source src="media/trailer.mp4" type="video/mp4" />
<source src="media/trailer.webm" type="video/webm" />
