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.
<div class="video_player">
<span class="video-overlay"></span>
<video controls="controls" id="mainvideo" poster="media/
trailer_480p.jpg">
videoplayer.css
file 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%; }
$oOverlay.click(function() { $oVideo.click(); });
Play
event needs to be adjusted:// events section
$oPlay.click(function () {
$oVideo[0].play();
$oPlay.hide();
$oPause.css('display', 'block'),
$oOverlay.fadeOut();
});
followed by the Pause
method:
$oPause.click(function () {
$oVideo[0].pause();
$oPause.hide();
$oPlay.css('display', 'block'),
$oOverlay.fadeIn();
});
// bind extra inner events
$oVideo.bind('ended', function() {
$oOverlay.fadeIn();
$oVideo[0].pause();
$oPause.hide();
$oPlay.css('display', 'block'),
});
.video-overlay
class—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.