HTML and CSS Reference
In-Depth Information
Creating a Custom Progress Bar
Before the
progress
element was defined in HTML5, web application developers used a
couple of different scripting tricks in order to create the effect of a bar gradually filling up as
a task completes. One I've used successfully in the past is two
div
elements, one nested in
the other and with zero width. As the task progresses, the code changes the width of the inner
element. It's a simple, uncomplicated approach. You can even use an animated background to
create an animated effect, if you wish.
Since we have enough movement with the video, I decided to forgo the animated background
in favor of the linear gradient—gray for the outer
div
element, and a green reflecting a dom-
inant green from the video for the progressing bar.
The custom progress bar won't be tracking the playback of the video. It's tracking the progress
of the video load instead. To track the actual playback, I added another
div
element, but
this time one that has a background character—a purple butterfly like the one that appears
throughout the Big Buck Bunny video I used for the examples in this chapter. The HTML for
the page, without CSS and without scripting, now looks like the markup in
Example 18
, with
the new elements in bold text.
Example18.New web page with custom control and progress bar
<!DOCTYPE html>
<head>
<title>Big Buck Bunny with Custom Controls</title>
<meta charset="utf-8" />
</head>
<body>
<div id="container">
<video id="videoobj" width="480" height="270"
preload="none" poster="bigbuckposter.jpg" controls>
<source src="videofile.mp4" type="video/mp4"/>
<source src="videofile.webm" type="video/webm" />
</video>
<div id="controls">
<button id="start">Play</button>
<button id="stop" disabled>Stop</button>
<button id="pause" disabled>Pause</button>
</div>
<div id="progressbar">
<div id="loadingprogress"></div>
<div id="butterfly"></div>
</div>
</div>
</body>
