In this post we are going to create a custom html5 video player with JavaScript. at 24/2/2014 i got a mail from a reader to explain the html5 video api the funny thing is that i was knowing less about a html5 video api with javascript that why i decided to rub my hands on video api and read a article on w3school about
HTML Audio/Video DOM Reference and created a custom html5 video player and now its ready to rock and roll the web
 |
| Custom html5 Video Player With JavaScript |
Why Their is a need of a custom video player?
The problem is that every browser develop its own video player and unfortunately they are different from each other. to show same user experience around cross browser we have to create a custom video player.
 |
| Native browser video controls across different browsers |
html
html is super easy u just need to wrap the <video> tag in a <div> and put some additional divs after the <video> tag to make video controls sounds little bit confusing wait i show the code
<div id="video_container">
<video load="metadata" id="my_vid" width="550" height="320">
<source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4"></source>
</video>
<div id="video_control">
<button id="playpause">play</button><!--play pause button-->
<input id="seekbar" class="bar" type="range" min="0" max="100" value="0" step="1"><!-- seekSlider -->
<span id="currentTimeText">0:00</span> / <span id="durationTimeText">0:00</span><!-- video time display -->
<button id="mute">mute</button><!-- mute button-->
<input id="volumeBar" class="bar" type="range" min="0" max="100" value="100" step="1"><!--volume control -->
<button id="fullScreenBtn" title="fullscreen">[ ]</button><!-- fullscreen -->
</div>
</div><!--main video wraper-->
JavaScript
//create golbal variables of the video controls ======================//
var playbtn,
seekbar,
vid,
currentTimeText,
durationTimeText,
muteBtn,
volumeBar,
fullScreenBtn;
function GetPlayerReady(){
//set object referance of video control ======================//
vid = document.getElementById('my_vid');
seekbar = document.getElementById('seekbar');
playbtn = document.getElementById('playpause');
currentTimeText = document.getElementById('currentTimeText');
durationTimeText = document.getElementById('durationTimeText');
muteBtn = document.getElementById('mute');
volumeBar = document.getElementById('volumeBar');
fullScreenBtn = document.getElementById('fullScreenBtn');
//add event listener ======================//
playbtn.addEventListener('click', playPause, false);
seekbar.addEventListener('change', vidSeek, false);
vid.addEventListener('timeupdate', seekTimeUpdate, false);
muteBtn.addEventListener('click', vidMute, false);
volumeBar.addEventListener('change', changeVolume, false);
fullScreenBtn.addEventListener('click', fullScreen, false);
}
window.onload = GetPlayerReady; //call the main function when document is loaded
//play pause function ======================//
function playPause(){
if(vid.paused){
vid.play();
playbtn.innerHTML = 'pause';
}else{
vid.pause();
playbtn.innerHTML = 'play';
}
}
//video seek slider function ======================//
function vidSeek(){
var seekTo = vid.duration * (seekbar.value / 100);
vid.currentTime = seekTo;
}
//video time display function ======================//
function seekTimeUpdate(){
var newTime = (vid.currentTime / vid.duration) * 100;
seekbar.value = newTime;
//currentTime & duration display//
var curSec = Math.floor(vid.currentTime / 60);
var curMin = Math.floor(vid.currentTime - curSec * 60);
var durSec = Math.floor(vid.duration / 60);
var durMin = Math.floor(vid.duration - durSec * 60);
if(curSec < 10){
curSec = "0"+curSec;
}
if(curMin < 10){
curMin = "0"+curMin;
}
if(durSec < 10){
durSec = "0"+durSec;
}
if(durMin < 10){
durMin = "0"+durMin;
}
currentTimeText.innerHTML = curSec+":"+curMin;
durationTimeText.innerHTML = durSec+":"+durMin;
}
//mute function ======================//
function vidMute(){
if(vid.muted){
vid.muted = false;
muteBtn.innerHTML = 'mute';
volumeBar.value = 100;
}else{
vid.muted = true;
muteBtn.innerHTML = 'unmute';
volumeBar.value = 0;
}
}
//volume bar function ======================//
function changeVolume(){
vid.volume = (volumeBar.value / 100);
}
//full screen fnction ======================//
function fullScreen(){
if(vid.requestFullScreen){
vid.requestFullScreen();
}else if(vid.webkitRequestFullScreen){
vid.webkitRequestFullScreen();
}else if(vid.mozRequestFullScreen){
vid.mozRequestFullScreen();
}else{
alert('Your Browser Does Not Support Fullscreen');
}
}
css
we are using css to make the video control pretty. i have not focused on making the control pretty because i was not having time but in next post i will make a jQuery plugin which u can include easily
div#video_container{width: 550px;background: #000;margin:0 auto;}
div#video_control{background: #333;padding: 10px;color: #ccc;}
input#seekbar{width: 180px;}
input#volumeBar{width: 80px;}
.bar{
-webkit-appearance:none !important;
-moz-appearance:none !important;
appearance: none !important;
background: #000;
border: #666 1px solid;
height: 5px;
outline: none;
}
.bar::-webkit-slider-thumb{
-webkit-appearance:none !important;
-moz-appearance:none !important;
appearance: none !important;
background: #fff;
height: 15px;
width: 15px;
border-radius: 100%;
}
.bar::-webkit-slider-thumb:hover{
cursor: pointer;
opacity: 0.7;
}
.bar::-moz-slider-thumb{
-webkit-appearance:none !important;
-moz-appearance:none !important;
appearance: none !important;
background: #fff;
height: 15px;
width: 15px;
border-radius: 100%;
}
.bar::-moz-slider-thumb:hover{
cursor: pointer;
opacity: 0.7;
}
