HTML and CSS Reference
In-Depth Information
JavaScript, you can interrogate the
<audio>
element and find out which
file is loaded.
Firefox plays the .ogg file.
Internet Explorer plays the .mp3 file.
Here's the snippet of JavaScript used in the previous screenshots. Add
it to the
<audio>
element as an attribute, and add a
<div id="source"></
div>
after the
<audio>
element to display the output:
onloadeddata="document.getElementById('source')
.innerHTML = 'Playing file ' +
this.currentSrc.slice(this.currentSrc.lastIndexOf('/')+1);"
This code is executed in the
loadeddata
event, which means after the
browser has loaded identifying information about the file. You'll learn
more about manipulating
HTML5
media elements with JavaScript in
the section “The <video> element.”
Audio is fine, but it lacks visual impact. Let's move on to
embedding video. In the next section, you'll see that adding
video to a page in HTML5 is just as simple as adding audio.
The <video> element
For the many people who don't obsessively read standards groups'
mailing lists, the first time they became aware of
HTML5
was when
they found out that Flash video doesn't work on the iPhone but
HTML5
video does. As you saw in the introduction, the goal of the
HTML5
<video>
element is to make embedding video in your pages as
easy as embedding images. This section looks at the details of making it
work. We'll follow a pattern similar to the previous section: first the
