HTML and CSS Reference
manage your own video player controls. 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 knowledge—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.ogv” type=”video/ogg” />
<source src=”leverage-a-synergy.ogv” type=”video/mp4” />
Your browser doesn't support video.
Please download the video in <a href=”leverage-a-
¬ synergy.ogv”>Ogg</a> or <a href=”leverage-a-
¬ synergy.mp4”>MP4</a> format.
var video = document.getElementsByTagName('video');