So far, we've focused on providing some basic controls, and have added a set of rudimentary styles—as you've already seen from the screenshot, it doesn't look pretty, but it serves a functional purpose. We will develop this into a basic theme, but before doing this, we need to finish adding the jQuery functionality that will make the player work—this is the subject of this next task.
We need to retrieve a copy of the videoplayer.js
file that we created earlier, so go ahead and load this into your normal text editor. Other than this, there isn't anything else required—we will add the necessary code as part of the task. I will assume that you're still using the files from previous demos—if this is not the case then please alter this accordingly.
<header>
section of videoplayer.html
—go ahead and add in this:<script type="text/javascript" src=" http://code.jquery.com/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/ jquery-ui.min.js"></script>
videoplayer.js
, we need to add in a number of variables that are required for controlling various different elements of the player, so go and add in the following code:(function($) { $.fn.oPlayer = function(options) { return this.each(function() { // variables var $oMain = $(this); var $oVideo = $('video', $oMain); var $oPlay = $('.play', $oMain); var $oPause = $('.pause', $oMain); var $oTimeSlider = $('.time_slider', $oMain); var $oTimer = $('.timer', $oMain); var $oVolSlider = $('.volume_slider', $oMain); var $oMute = $('.mute', $oMain); var $oUnmute = $('.unmute', $oMain); var $oOverlay = $('.video-overlay', $oMain); var bTimeSlide = false; var iVolume = 1; var $oDuration = $('.duration', $oMain); }); }; })(jQuery);
var prepareTimeSlider = function() { if (! $oVideo[0].readyState) { setTimeout(prepareTimeSlider, 1000); } else { $oTimeSlider.slider({ value: 0, step: 0.01, orientation: 'horizontal', range: 'min', max: $oVideo[0].duration, animate: true, slide: function() { bTimeSlide = true; }, stop:function(e, ui) { bTimeSlide = false; $oVideo[0].currentTime = ui.value; } }); }; };
$oPlay.click(function () { $oVideo[0].play(); $oPlay.hide(); $oPause.css('display', 'block'), $oOverlay.fadeOut(); }); $oPause.click(function () { $oVideo[0].pause(); $oPause.hide(); $oPlay.css('display', 'block'), $oOverlay.fadeIn(); });
$oMute.click(function () { $oVideo[0].muted = true; $oVolSlider.slider('value', '0'), $oMute.hide(); $oUnmute.css('display', 'block'), }); $oUnmute.click(function () { $oVideo[0].muted = false; $oVolSlider.slider('value', iVolume); $oUnmute.hide(); $oMute.css('display', 'block'), });
$oVideo.click(function () { if($oVideo[0].paused) { $oPlay.click(); } else { $oPause.click(); } return false; });
$oVideo.on("play", function() { $oPlay.click(); });
then continuing with the pause option:
$oVideo.on("pause", function() { $oPause.click(); });
$oVideo.bind('ended', function() { $oVideo[0].pause(); $oPause.hide(); $oPlay.css('display', 'block'), });
$oVideo.bind('timeupdate', function() { var iNow = $oVideo[0].currentTime; $oTimer.text(rectime(iNow)); if (! bTimeSlide) $oTimeSlider.slider('value', iNow); });
$oVideo.on("canplay", function() { $oDuration.text(rectime($oVideo[0].duration)); });
$oVolSlider.slider({ value: 1, orientation: 'vertical', range: 'min', max: 1, step: 0.02, animate: true, slide: function(e, ui) { $oVideo[0].muted = false; iVolume = ui.value; $oVideo[0].volume = ui.value; } });
prepareTimeSlider(); $oVideo.removeAttr('controls'),
Putting this all together should result in something similar to the following screenshot:
Throughout this task, we've worked stage by stage on providing the jQuery-based functionality required to operate the controls on the video; this is the functionality that would otherwise be provided by the browser's default video controls, which we will be hiding in the next task.
You will notice that I've used the Google CDN links for jQuery and jQuery UI—while this is perfectly acceptable (and in some cases preferable), you may prefer to use a custom download at least for jQuery UI, which can reduce the size of the file to a more manageable 20KB. If you want to use this alternative, you will need to build a custom download, at http://www.jqueryui.com/download, to include the Core, Widget, Mouse, and Slider elements. The code will need to be altered as well—change the Google CDN link for this (assuming you are following the structure outlined at the start of the task):
<script type="text/javascript" src="js/jquery.ui.min.js"> </script>