Customizing Media Elements - HTML5 Media - page 77

background-image: -webkit-linear-gradient(top, #fff, #fcc);
background-image: -o-linear-gradient(top, #fff, #ccc);
background-image: -ms-linear-gradient(top, #fff, #ccc);

/* box shadow */
-webkit-box-shadow: 0 0 10px #ccc;
box-shadow: 0 0 10px #ccc;
}

#loadingprogress
{
/* border */
border-radius: 20px;

/* beginning height and width */
height: 20px;
width: 0;

/* background */
background-color: #9acd32;
background-image: linear-gradient(top, #ffffff, #9acd32);
background-image: -moz-linear-gradient(top, #ffffff, #9acd32);
background-image: -webkit-linear-gradient(top, #ffffff,

#9acd32);

background-image: -o-linear-gradient(top, #ffffff, #9acd32);
background-image: -ms-linear-gradient(top, #ffffff, #9acd32);
}

In the script, the setupControl function is little different than the ones we've seen earlier.
Since any browser that supports the video element can also support the custom progress ele-
ment, I no longer have to test for progress element support. The only change to the applic-
ation is the addition of code to capture two more events on the video element: progress and
ended. The progress event is triggered periodically as the media resources is loaded, while
the ended event is triggered when the media playback finishes:

bbVideo.addEventListener("progress", showProgress, false);
bbVideo.addEventListener("ended", endPlayback, false);

The pausePlayback function is identical to what we've have in Example 16 , but both the
startPlayback and stopPlayback functions are modified.
The startPlayback function sets the page background to a darker color to emulate the “house
lights down” effect. The stopPlayback function does little more than pause the video and set
the video currentTime property to zero. It no longer resets the buttons, as it did in the second
version of the custom control application. Instead, it calls another function, endPlayback.