HTML and CSS Reference
In-Depth Information
You could use anonymous functions here, but for the sake of clarity Listing 3-13 uses stand-alone
JavaScript functions.
n
Note
As of this writing, jQuery doesn't include event functions for HTML5-specific events such as
play
and
pause
. That is why this example uses the
bind()
method. Refer to Chapter 2 for details of using the
bind()
method for event wiring.
You might be wondering why Listing 3-13 handles
play
and
pause
events. It does so because you can
also play and pause videos in the video player using the shortcut menu. If a user decides to use the
shortcut menu instead of the Play/Pause button to play or pause a video, the functionality of the Play/
Pause button becomes out of sync. The
play
and
pause
events are raised when the video is played or
paused using either means (button or shortcut menu). By handling these events, you ensure that the Play/
Pause button always reflects the correct state of the player.
The event-handler functions
OnLoadedMetadata
,
OnTimeUpdate
,
OnPlay
, and
OnPause
are shown in
Listing 3-14.
Listing 3-14.
Event-Handler Functions Used in the
bind()
Method
function OnLoadedMetadata() {
$("#spanDuration").html("Duration : " + videoPlayer.duration.toFixed(1) + " seconds.");
}
function OnTimeUpdate() {
var percentage = Math.floor((videoPlayer.currentTime / videoPlayer.duration * 100));
$("#spanProgress").html(percentage + " % ");
}
function OnPlay() {
$("#btnPlayPause").val("Pause");
}
function OnPause() {
$("#btnPlayPause").val("Play");
}
The
loadmetadata
event is raised when the metadata of the video file being played is loaded. In order
to display a video's duration, the video's metadata must be available; hence the
loadmetadata
event is used
to display the duration in a
<span>
element. The
duration
property returns the duration in seconds; for the
sake of proper display, it's converted to a fixed decimal number using the JavaScript
toFixed()
method.
The
timeupdate
event is raised every time the current playback position of the video changes. The
OnTimeUpdate()
function calculates a percentage of video played so far with the help of the
<video>
element's
currentTime
and
duration
properties. The progress thus calculated is displayed in a
<span>
element.
The
OnPlay()
event handler sets the Play/Pause button's text to Pause when the video starts playing.
On the same lines, the
OnPause()
event handler sets the Play/Pause button's text to Play when the video is
paused.
That's it! Your custom video player is ready. You can test the player by adding a few entries in the
Videos
table and then running those files by selecting from the drop-down list.
