HTML and CSS Reference
In-Depth Information
$("#btnStop").click(function () {
videoPlayer.currentTime = 0;
$("#rngVolume").change(function () {
videoPlayer.volume = $(this).val();
The code in Listing 3-12 stores a reference to the <video> DOM element in a global variable,
videoPlayer . Notice the use of the get() method, which returns a DOM element at a specified index. Any
jQuery selector returns a collection of zero or more elements matching the selection criteria. You can
retrieve an element from this collection using get() by specifying its zero-based index. In this case, the
<video> element is selected using its ID. Naturally, the collection has only one element, and hence index is
specified as 0 .
The drop-down list's change event handler takes care of playing a video when the selection in the
drop-down list changes. First it checks whether the <video> element can play the selected video file using
the canPlayType() method. The canPlayType() method accepts the MIME type of a media file and returns
true if that media type can be played. If the <video> element is capable of playing the selected video file, its
src property is set to the URL of the selected video file, and the Play/Pause button's click event is triggered
The Play/Pause button's click event handler checks its own value. Inside the handler, the keyword
this refers to the DOM element being clicked (that is, the Play/Pause button) and the val() method
returns the current value of the button. If the value is Play , the playbackRate property is set to a value
selected in the speed range selector, and the <video> element's play() method is called. This way, the video
is played at a chosen playback speed. If the value is Pause , the <video> element's pause() method is called
so that video playback is paused.
The Stop button's click event handler sets the currentTime property to 0 to indicate the beginning of
the media file and calls the pause() method.
The Volume range selector's change event handler changes the volume of the video playback by setting
the volume property of the <video> element.
Displaying Duration and Progress
To display the total length of the selected video file and its playback progress, you need to handle the
timeupdate and loadmetadata events of the <video> element. These events need to be wired a bit differently
than before. Events such as click and change are standard HTML DOM events and are natively included in
the jQuery library. However, that's not the case with video events. Because the <video> element is a new
addition in HTML5, the jQuery library doesn't have native support for its events. Therefore you need to
wire the event handlers as shown in Listing 3-13.
Listing 3-13. Wiring Events Using the jQuery bind() Method
$(videoPlayer).bind("loadedmetadata", OnLoadedMetadata);
$(videoPlayer).bind("timeupdate", OnTimeUpdate);
$(videoPlayer).bind("play", OnPlay);
$(videoPlayer).bind("pause", OnPause);
As you can see, jQuery's bind() method essentially binds an event with its handler. The first parameter
of the bind() method is the event to be handled, and the second parameter is the event-handler function.
Search WWH ::

Custom Search