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() {
function OnPause() {
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>
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
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.
Search WWH ::

Custom Search