HTML5 Video Controls with jQuery and CSS

This post can teach you ways to make own custom HTML5 video controls exploitation jQuery instead of exploitation native browser HTML5 video controls.

HTML5 Video Controls with jQuery and CSS - HTML5 Video Controls with jQuery and CSS

Look within

HTML5 video part, one of all the foremost well-liked options in HTML5. it’s currently already supported by hottest browsers and all the same for IE9. However, every browser provides native browser video controls. so as to own regular HTML5 video controls across all browsers, we’ve to integrate own custom HTML5 video controls instead of exploitation default controls.

HTML5 Video part Basic Markup

Before we have a tendency to start, let’s recall for HTML5 video basic markup.

<video id="myVideo" controls poster="video.jpg" width="600" height="400" >
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webM" />
<source src="video.ogv" type="video/ogg" />
<p>Your browser does not support the video tag.</p>
</video>

It is best to apply to incorporate 3 video formats – MP4, WebM, and Ogg as supply components so as to own your HTML5 video works cross browsers. it’s conjointly judicious to place some text as disengagement within video part, just in case user browser doesn’t support HTML5 video. Of course, you may use Flash as disengagement as well!

If you having a downside to cipher your video to the HTML5 formats mentioned higher than, strive Miro device, it supports for each Window and mack.
#Tips: attributable to a bug within the iPad, you’ve got to place MP4 format because of the initial supply if you would like HTML5 video works on iPad.

Get Started with Custom HTML5 Video Controls

Luckily, HTML5 media components (audio and video) support for media elements API, that we will access victimization JavaScript and use them to wire up our HTML5 video controls.

Before starting with cryptography, let Pine Tree State, in brief, justify regarding jQuery video part targeting.

In JavaScript we have a tendency to use getElementById(‘videoID’) to focus on the video part. As result, we are going to get a DOM object. However, this is often not adored jQuery $(‘#videoID’) targeting which is able to come back a jQuery object, not a DOM object. That’s why we have a tendency to can’t directly victimization jQuery selector to call/use HTML5 video DOM attributes and functions before convert it to DOM object.

//return a DOM object
var video = document.getElementById('videoID'); //or
var video = $('#videoID').get(0); //or
var video = $('#videoID')[0];
 
//return a jQuery object
var video = $('#videoID');
Video Play/Pause Controls

OK, that’s all for an introduction. Let’s begin the cryptography at once. First, we’ll produce a straightforward Play/Pause management over our video.

<div class="control">
<a href="#" class="btnPlay">Play/Pause</a>
</div>

We can simply management video standing victimization HTML5 video DOM functions, which are .play() and .pause().

//Play/Pause control clicked
$('.btnPlay').on('click', function() {
if(video[0].paused) {
video[0].play();
}
else {
video[0].pause();
}
return false;
};
Display Video Current Playback Time and length

HTML5 video conjointly supports for video playback. herewith we have a tendency to square measure aiming to show video current playback time and length.

<div class="progressTime">
Current play time: <span class="current"></span>
Video duration: <span class="duration"></span>
</div>

In order to induce HTML5 video length, we’ve to create positive the video information is loaded. we have a tendency to may simply notice it victimization HTML5 video loadedmetadata event.

As for current video playback time, we will use HTML5 video time update events to stay tracks of it.

//get HTML5 video time length
video.on('loadedmetadata', function() {
$('.duration').text(video[0].duration);
});
 
//update HTML5 video current play time
video.on('timeupdate', function() {
$('.current').text(video[0].currentTime);
});
Video Progress Bar

Since we have a tendency to square measure able to get video current playback time and video length, why not convert this information into nice wanting video progress bar?

<style>
.progressBar
{
position: relative;
width: 100%;
height: height:10px;
backgroud-color: #000;
}
.timeBar
{
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #ccc;
}
</style>
<div class="progressBar">
<div class="timeBar"></div>
</div>

Below shown the formula for conversion of video length and video current playback time into progress bar with facilitate of JavaScript.

//get HTML5 video time length
video.on('loadedmetadata', function() {
$('.duration').text(video[0].duration));
});
 
//update HTML5 video current play time
video.on('timeupdate', function() {
var currentPos = video[0].currentTime; //Get currenttime
var maxduration = video[0].duration; //Get video duration
var percentage = 100 * currentPos / maxduration; //in %
$('.timeBar').css('width', percentage+'%');
});

Done!!? Not yet! we’ve to make this progress bar seekable and draggable. throughout this case, we’ve to use mouse down, mouse up and mousemove listeners and bind them to progress bar. Of course, if you would like, you will replace it with the slider as well!

var timeDrag = false; /* Drag status */
$('.progressBar').mousedown(function(e) {
timeDrag = true;
updatebar(e.pageX);
});
$(document).mouseup(function(e) {
if(timeDrag) {
timeDrag = false;
updatebar(e.pageX);
}
});
$(document).mousemove(function(e) {
if(timeDrag) {
updatebar(e.pageX);
}
});
 
//update Progress Bar control
var updatebar = function(x) {
var progress = $('.progressBar');
var maxduration = video[0].duration; //Video duraiton
var position = x - progress.offset().left; //Click pos
var percentage = 100 * position / progress.width();
 
//Check within range
if(percentage > 100) {
percentage = 100;
}
if(percentage < 0) {
percentage = 0;
}
 
//Update progress bar and video currenttime
$('.timeBar').css('width', percentage+'%');
video[0].currentTime = maxduration * percentage / 100;
};

Leave a Reply