HTML and CSS Reference
In-Depth Information
.innerHTML = 'Playing file ' +
v.currentSrc.slice(v.currentSrc.lastIndexOf('/')+1);
m = document.getElementById('mymeter');
m.max = v.duration;
m.value = 0;
}
The code to update the
meter
element is even simpler; it just sets the
value
of the
<meter>
element to the
currentTime
of the
<video>
element:
function updateTime(v) {
m = document.getElementById('mymeter');
m.value = v.currentTime;
}
Direct access to the
<audio>
and
<video>
elements with JavaScript
isn't the only benefit of having media be an integral part of your
page content; other browser technologies such as CSS and SVG can
also be applied. The next section shows you how.
Integrating media with other content
The
<video>
and
<audio>
elements are just like any other element on the
web page. They can be styled with
CSS
and used in JavaScript. To
begin, let's look at applying
CSS
transforms and transitions. The fol-
lowing three screenshots show the same web page over the course of 10
seconds.
The code for this example, slightly elided, is shown next; see the full list-
ing in ch04/video-css-transitions.html. Don't worry too much about the
details for now; read the sections “2D transforms” and “
CSS
transitions”