HTML and CSS Reference
In-Depth Information
$("#btnStop").click(function () {
videoPlayer.pause();
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
programmatically.
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.
