HTML and CSS Reference
In-Depth Information
Playing, Pausing, and Stopping a Video
You need to handle various client-side events in order to make the video player functional. These events
fall into two categories:
• Events of supporting elements such as the Play/Pause and Stop buttons, the volume
control, and the drop-down list
• Events of the
<video>
element
The events in the first category can be handled using the jQuery event-handling syntax you learned
about in Chapter 2. Listing 3-12 shows various event handlers in this category.
Listing 3-12.
Handling Events of Supporting Elements
videoPlayer = $("#videoPlayer").get(0);
$("#ddlPlayList").change(function () {
var extension = $(this).val();
extension=extension.substr(extension.lastIndexOf('.') + 1)
var mime = "";
switch (extension) {
case 'mp4':
mime = "video/mp4";
break;
case 'ogv':
mime = "video/ogg";
break;
case 'webm':
mime = "video/webm";
break;
}
if (videoPlayer.canPlayType(mime)) {
$("#btnPlayPause").val("Play");
videoPlayer.src = $(this).val();
$("#btnPlayPause").click();
}
else {
alert("Cannot play this video format!");
}
});
$("#btnPlayPause").click(function () {
if ($(this).val() == "Play") {
videoPlayer.playbackRate = $("#rngPlaybackRate").val();
videoPlayer.play();
}
else {
videoPlayer.pause();
}
});
