Customizing Media Elements - HTML5 Media - page 62

Before adding the event handler functions for the three buttons, there's one other behavior we
have to account for with our custom control: the ability of the user to play and pause the video
via the right mouse button context menu.
In the HTML5 specification, implementorssuch as browsers are encouraged to provide media
control functionality in the right mouse button context menu for the media element. Not all
browsers provide this functionality, but most do (Safari is the only one that doesn't). This
functionality is provided regardless of whether the controls attribute is present or not. The
unintended consequence of providing this functionality means that the user can either use our
buttons to control the video playback, the right mouse context menu controls, or both.
The application disables and enables buttons based on the playback state of the video. To en-
sure the buttons are managed correctly, we'll need to provide event handler functions for the
video's play and pause events:
// disable/enable buttons based on play/pause events
bbVideo.addEventListener("play",function() {
document.getElementById("start").disabled=true;
document.getElementById("pause").disabled=false;
document.getElementById("stop").disabled=false;
}, false);
bbVideo.addEventListener("pause", function() {
document.getElementById("start").disabled=false;
document.getElementById("pause").disabled=true;
}, false);
When the video is played (regardless of what triggered the play event), the stop and pause
buttons are displayed. When the video playback is paused, the play button is enabled, and the
pause button is disabled. There is no video stop event, so handling the buttons for the stop
request is managed within the stop button's click event handler. It, and the code for the other
button click event handlers are added to the script block next.
The code in each button click event handler function is very simple: it accesses the video
object, and then invokes the video object's play or pause method, depending on which button
was pressed. In addition, if the stop button is clicked, the video object's currentTime prop-
erty is also set to 0 (zero). The reason why is that there's no stop method in the media ele-
ments. To stop, you pause the playback, and then reset the current time. Example 16 has the
complete scripting block.
Example16.Script block for setting up and operation the custom media controls
<script>
document.addEventListener("DOMContentLoaded", setupControl,