HTML and CSS Reference
In-Depth Information
You can then provide buttons to start
playback from significant points:
<button onclick="playFrom(4);">Play from 4
secs</button>
<button onclick="playFrom(8);">Play from 8
secs</button>
Obviously there aren't many significant points in a 15-second video
clip, but this would be useful if you had a podcast or longer movie and
wanted to provide bookmarks for when particular topics were being
discussed or for the start of each scene.
In the example, although the buttons claim
to start the video play at the fourth and
eighth seconds, the user has no way of see-
ing if they really work. When the controls
are hidden, you lose not just Play and Pause
but also the timeline. Fortunately,
HTML5
provides a new
<meter>
element that's excel-
lent for measuring how much of a video or
audio clip has been played:
<meter id="mymeter" min="0"></meter>
The value of the meter needs to be continually updated as the video is
playing. For this you use the
timeupdate
event, adding that to the
<video>
element alongside the
loadeddata
event already being used to
capture the filename of the video being played:
<video id="myvideo" ontimeupdate="updateTime(this);"
onloadeddata="dataLoaded(this);">
Here's the
dataLoaded
function. It's been updated to set the
max
value of
the
<meter>
element so that it exactly matches the duration of the loaded
video:
function dataLoaded(v) {
document.getElementById('source')
