Build a HTML 5 Video Player With Custom Controls || Part-2

This is the second part of ''How to make an HTML 5 video player with custom controls''. For first part head over to the first post.

This post will be little different from the last post as we will now design our video player and will add the functions such as toggle play-pause, timings and progress bar.

Before going further, we will first look at our project files.
To avoid interruptions, we've made total 3 files for the video player.

---📂 Index.html
---📂 Design.css
---📂 vidplayr.js

In which, Index.html is our main HTML file, Design.css is cascading style sheet(CSS) file and vidplyr.js is javascript file in which we'll be writing all functions.In JavaScript file, we will add different functions to make our player work.

Step 1: Making <div> for controls

We will make a <div> for all the controls.All the controls such as play/pause, progress/seek bar, a full-screen button will be fitted inside it.To general idea about how it is, see the sketch below.

So, we are going to make a <div> tag after <video> tag.Let's set the id and class as vidcontrols.
Inside this <div>, we are going to make a division tags for the progress bar,and a common <div> for play/pause button, time , volume ,settings and fullscreen.

The code will look somewhat like below.This is not a complete code for the player as we will see the volume and options in next tutorial.

<div id='vidcontrols' class='vidcontrols'></div>

After adding the other elements, it will be something like below.

<div id='vidcontrols' class='vidcontrols'>
<div id='progressbar' class='progressbar'>
<div class="seekbar" id='seekbar'></div>
<div class='loaded' id='loaded'></div>
<div class='ball' id='ball'></div>
</div>
<div id='btmcontrols' class='btmcontrols'>
<button id='playbtn' class='playbtn' title='Play'>


<button id='fs' class='fs' title='Fullscreen'>
</button>
</div>
</div>

For the buttons, we will not use images and instead of that, we will use SVG.It will reduce the size that of the image and increase the size of the SVG will not affect its quality.

So, the SVG for the play button(▶️)-

<svg style='fill:white;'><g><path d="m 10,16 2,0 0,-4 4,0 0,-2 L 10,10 l 0,6 0,0 z"></path></g><g><path d="m 20,10 0,2 4,0 0,4 2,0 L 26,10 l -6,0 0,0 z"></path></g><g><path d="m 24,24 -4,0 0,2 L 26,26 l 0,-6 -2,0 0,4 0,0 z"></path></g><g ><path d="M 12,20 10,20 10,26 l 6,0 0,-2 -4,0 0,-4 0,0 z"></path></g></svg>

And SVG for fullscreen(🈁)-

<svg style='fill:white;'><g><path d="m 10,16 2,0 0,-4 4,0 0,-2 L 10,10 l 0,6 0,0 z"></path></g><g><path d="m 20,10 0,2 4,0 0,4 2,0 L 26,10 l -6,0 0,0 z"></path></g><g><path d="m 24,24 -4,0 0,2 L 26,26 l 0,-6 -2,0 0,4 0,0 z"></path></g><g ><path d="M 12,20 10,20 10,26 l 6,0 0,-2 -4,0 0,-4 0,0 z"></path></g></svg>

Above tags will go inside the Play and Fullscreen button tags respectively.

Step 2: Adding CSS

Now the next thing is to apply CSS so that the player will look good and easily controllable.
For all the tags we've already seen the classes and their ids so the entire CSS will go as below.

#vid
{
display:block;
width:100%;
max-width:100%;
height:auto;
}
#container
{
position:relative;
max-width:700px;
}
.vidcontrols
{
position:absolute;
bottom:0;
left:50%;
padding:1px;
background:rgba(0,0,0,0.5);
background:linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.5));
transform:translateX(-50%);
transition:bottom .25s ease-in;
height:40px;
width:698px;
}
.playbtn
{
position:absolute;
border:0;
cursor:pointer;
transition:opacity .175s ease-in;
margin-left:5px;
display:block;
height:40px;
width:40px;
background-color:transparent;
overflow:visible;
outline:none;
}
.fs
{
display:block;
background-color:transparent;
border:1px;
height:40px;
width:40px;
position:absolute;
float:right;
right:2px;
margin-right:10px;
outline:none;
overflow:visible;
}
.time
{
position:absolute;
height:28px;
width:auto;
margin-left:50px;
margin-top:10px!important;
overflow:visible;
font-size:18px;
color:#fff;
}
.seekbar
{
position:relative;
cursor:pointer;
width:0;
height:8px;
display:block;
max-width:670px;
background-color:rgba(225,0,0,0.9);
display:block;
}
.progressbar
{
cursor:pointer;
display:block;
height:8px;
position:absolute;
max-width:670px;
background-color:rgba(225,225,225,0.2);
z-index:10;
width:698px;
margin-top:0;
margin-left:10px;
}
.loaded
{
margin-top:-8px;
height:8px;
display:block;
background-color:rgba(225,225,225,0.4);
max-width:670px;
}
.btmcontrols
{
max-width:670px;
width:100%;
height:28px;
margin-top:5px;
margin-left:10px;
}
.vidcontrols
{
opacity:0;
transition:opacity .1s cubic-bezier(0.0,0.0,1,1);
}
#container:hover .vidcontrols
{
opacity:1;
}
.ball
{
opacity:1;
width:15px;
height:15px;
margin-top:-11px;
position:absolute;
z-index:99;
border-radius:100%;
background-color:red;
}

In above CSS, we've given all the basic stylings.Video controls will show when the user will hover over the video tag and this is controlled by pure CSS.

Step 3: All Of the Functions - JavaScript

Starting from the basic play/pause function, we'll see rest all of the functions.Finally, we'll combine them into one file-vidplyr.js
So we start with the main function s(). It will be triggered when the body will load.So the body tag will be <body onload='s()'>.

The play pause function.

playbtn.onclick = function() {
if (video.paused) {
video.play();
trackPlayProgress();
playbtn.innerHTML = '<svg style="fill:white;"><path d="M 12,26 16,26 16,10 12,10 z M 21,26 25,26 25,10 21,10 z"></path></svg>';
} else {
video.pause();
stopTrackingPlayProgress();
playbtn.innerHTML = '<svg style="fill:white;"><path d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z"></path></svg>';
}
}

Where. playbtn is a play button and video is the video tag.

When user will click the play button, if the video is not paused, then it will play and the SVG(icon) of the play button will change and vice-versa.
trackPlayProgress is a function that will track the play progress as follows-

function trackPlayProgress(){
playProgressInterval = setInterval(updatePlayProgress,50);
}
function stopTrackingPlayProgress(){
clearInterval(playProgressInterval);
}

updatePlayProgress will update the time in <p> tag.

function updatePlayProgress() {
document.getElementById("time").innerHTML = formatTime(video.currentTime) + '/' + formatTime(video.duration);
widthvi = video.currentTime / video.duration * 100;
seekbar.style.width = widthvi + '%';
ball.style.left = widthvi + "%";
if (widthvi == 100) {
video.pause();
stopTrackingPlayProgress()
}
}

Video.currentTime will return to the time in seconds up to many decimals as 8.So we need to format the time to proper minutes and seconds.

function formatTime(seconds) {
seconds = Math.round(seconds);
minutes = Math.floor(seconds / 60);
minutes = (minutes >= 10) ? minutes : "0" + minutes;
seconds = Math.floor(seconds % 60);
seconds = (seconds >= 10) ? seconds : "0" + seconds;
return minutes + ":" + seconds;
}

Function for on updating time on page load and updating video loading time.

video.onloadeddata = function() {
document.getElementById("time").innerHTML = formatTime(video.currentTime) + '/' + formatTime(video.duration);
video.addEventListener('progress', function() {
var range = 0;
var bf = this.buffered;
var time = this.currentTime;
while (!(bf.start(range) <= time && time <= bf.end(range))) {
range += 1;
}
var loadStartPercentage = bf.start(range) / this.duration * 100;
var loadEndPercentage = bf.end(range) / this.duration * 100;
var loadPercentage = loadEndPercentage - loadStartPercentage;
document.getElementById("loaded").style.width = loadPercentage + '%';
});
};

And finally,
Function for seek bar on mouseup.

function seekbarmove(e) {
var x = e.clientX;
var position = progressbar.getBoundingClientRect();
var xi = position.left;
diffrence = x - xi;
seekbar.style.width = diffrence + 'px';
ball.style.left = diffrence + 'px';
ai = diffrence / 670;
updatetime(ai);
}
function updatetime(pos) {
time = pos * video.duration;
video.currentTime = time;
document.getElementById("time").innerHTML = formatTime(video.currentTime) + '/' + formatTime(video.duration);
}