So far in our video player, we've added support to play back videos via the play/pause button, and through the right-click context menu. Although this results in a perfectly usable player, it is missing one important function. Most people expect to be able to simply click the video to play or pause it—this usually comes as part of an overlay that will slightly darken the picture, or show it at normal strength, depending on its current state. We're going to add this missing functionality to our video player as part of the next task.
For the purposes of this task, you will need to grab a suitable play icon that can be used on the overlay—the size is not critical, as long as it is of a proportional size to your video display. You will also need a copy of the videoplayer.css file that we've been working on throughout this section.
Crack open your usual text editor; we need to add in a placeholder for our overlay, so go ahead and modify the code as shown:
<div class="video_player"> <span class="video-overlay"></span><video controls="controls" id="mainvideo" poster="media/ trailer_480p.jpg">The overlay isn't going to be of any use if it doesn't have any color. Add the following into the
videoplayer.cssfile from the previous exercise:.video-overlay { background: url("../images/button.png") no- repeat scroll 50% 50% rgba(0, 0, 0, 0.4); cursor: pointer; display: block; height: 100%; left: 0; top: 0; position: absolute; width: 100%; }We now start to add in the requisite jQuery functionality, beginning with a click handler to allow us to fire off events that handle the playing and pausing of videos:
$oOverlay.click(function() { $oVideo.click(); });The
Playevent needs to be adjusted:// events section $oPlay.click(function () { $oVideo[0].play(); $oPlay.hide(); $oPause.css('display', 'block'); $oOverlay.fadeOut(); });followed by the
Pausemethod:$oPause.click(function () { $oVideo[0].pause(); $oPause.hide(); $oPlay.css('display', 'block'); $oOverlay.fadeIn(); });We need the Overlay to reappear once the video has finished, so let's go ahead and adjust the event handler for this:
// bind extra inner events $oVideo.bind('ended', function() { $oOverlay.fadeIn(); $oVideo[0].pause(); $oPause.hide(); $oPlay.css('display', 'block'); });The last step is to add in a variable for Overlay, which we define as an instance of the
.video-overlayclass—this is to make it easier when referencing it elsewhere in the code:var $oUnmute = $('.unmute', $oMain); var $oOverlay = $('.video-overlay', $oMain); var bTimeSlide = false;Once all of the code has been updated, you should see something similar to the following screenshot:
The code in this task has been made very simple, as we took care in an earlier exercise, to provide a common function in our code that handled the initiating of playback or pausing of the video.
There are three key elements to this task: the CSS styling, the placeholder for the overlay, and the jQuery functions to handle the playing or pausing of videos by clicking on the Overlay. We altered some of the existing event handlers to allow for the addition of the overlay—this is principally to fade it in or out, depending on the current state of the video. All of the code was made possible though by the use of the variable created to store an instance of the class that refers to the Overlay in the code.