HTML and CSS Reference
In-Depth Information
Using JavaScript and the new media API you can create and
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.
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.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.
</video>
<script>
var video = document.getElementsByTagName('video')[0];
video.removeAttribute('controls');
</script>
 
Search WWH ::




Custom Search