HTML and CSS Reference
In-Depth Information
element reports the filename to an element with
ID
'source'
when the
video has loaded:
onloadeddata=
"document.getElementById('source')
.innerHTML = 'Playing file ' +
this.currentSrc.slice(this.currentSrc.lastIndexOf('/')+1);"
Loading the page in a variety of different browsers shows how the mul-
tiple source elements are picked up.
Android browser uses the low-quality MP4.
Firefox 4 uses the WebM video.
Firefox 3.6 uses the Ogg video.
Desktop Safari uses the high-quality MP4.
You've now learned how to add audio and video to your pages, and had a brief
introduction to the minefield that is video encoding for desktop browsers
and mobile devices. But so far, you haven't seen much of the main advantage of
using HTML5 video and audio: integration with the rest of your page
content. In the next two sections, you'll learn about the possibilities
this allows, starting with an exploration of the JavaScript API.
