HTML and CSS Reference
control over your multimedia—at its simplest, this means that
you can easily create and manage your own video player con-
trols. In our example, we walk you through some of the ways to
control the video element and create a simple set of controls.
Our example won't blow your mind—it isn't nearly as sexy as the
<video> element itself (and is a little contrived!)—but you'll get a
good idea of what's possible through scripting. The best bit is
that the UI will be all CSS and HTML. So if you want to style it
your own way, it's easy with just a bit of web standards knowl-
edge—no need to edit an external Flash Player or similar.
Our hand-rolled basic video player controls will have a play/pause
toggle button and allow the user to scrub along the timeline of
the video to skip to a specific section, as shown in Figure 4.3 .
FIguRE 4.3 Our simple but
custom video player controls.
Our starting point will be a video with native controls enabled.
control the video as we intended:
<source src=”leverage-a-synergy.webm” type=”video/webm” />
<source src=”leverage-a-synergy.mp4” type=”video/mp4” />
Your browser doesn't support video.
Please download the video in <a href=”leverage-a-
¬ synergy.webm”>WebM</a> or <a href=”leverage-a-
¬ synergy.mp4”>MP4</a> format.
var video = document.getElementsByTagName('video');
NoTE Some browsers, in
particular Opera, will show
the native controls even if
browsers, mileage may vary.