HTML and CSS Reference
In-Depth Information
</video>
<div id="feedback">
<progress id="progressBar" value=0>
<span id="prog"></span>
</progress>
</div>
<div id="controls">
<button id="start">Play</button>
<button id="stop" disabled>Stop</button>
<button id="pause" disabled>Pause</button>
</div>
We'll also need to incorporate functionality for the
progress
element in the JavaScript. In the
previously created
setupControl
function, we'll need to capture an event (
timeupdate
) on
the video element and assign a function (
reportProgress
) to the event handler:
// setup for video playback
var video = document.getElementById("videoobj");
document.getElementById("videoobj").
addEventListener("timeupdate",reportProgress,false);
There are several standard events applicable to the video element, such as the
click
and
on-
mouseover
events. However, there are also media element-specific events, such as
timeup-
date
, and the previously captured
play
and
pause
events. I've listed all the media element
events in
Table 6
.
