HTML and CSS Reference
In-Depth Information
Using JavaScript and the new media API, you have complete
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.
We'll then use JavaScript to strip the native controls and add our
own, so that if JavaScript is disabled, the user still has a way to
control the video as we intended:
<video controls>
<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.
</video>
<script>
var video = document.getElementsByTagName('video')[0];
video.removeAttribute('controls');
</script>
NoTE Some browsers, in
particular Opera, will show
the native controls even if
JavaScript is disabled; other
browsers, mileage may vary.
 
Search WWH ::




Custom Search