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”
Search WWH ::




Custom Search