Join TalkersCode Now !

Get Latest Tutorials And Links On Web Development
And Get Existing Offers Via Email

Create Your Own Custom Video Player Using HTML5 And JavaScript

Saturday, Apr 8, 2017

Tags:- JavaScript HTML5 CSS


Video Player is must have a tool for a website which has videos to play what about if you do not want to use browser default player for your videos that does not match your website styling and demand then you have to built your own custom video player.So, in this tutorial we will show you how to create your own custom video player using HTML5, JavaScript and CSS.You may also like custom audio player using HTML5.


See Demo
Custom Video Player Using HTML5,JavaScript And CSS


To Create Custom Video Player It Takes Only Three Steps:-

  1. Make a HTML file and define markup
  2. Make a js file and define scripting
  3. Make a CSS file and define styling


Step 1.Make a HTML file and define markup

We make a HTML file and save it with a name player.html

<html>
<head>
<script type="text/javascript" src="player.js"></script>
<link rel="stylesheet" type="text/css" href="player.css">
</head>
<body>
<div id="wrapper">
 <div id='player_wrapper'>
  <video id='video_player'>
   <source src='images/sample.mp4' type='video/mp4'>
  </video>
  <div id='player_controls'>
   <input type="image" src="images/play.png" onclick="play_vid()" id="play_button">
   <input type="image" src="images/pause.png" onclick="pause_vid()" id="pause_button">
   <input type="image" src="images/stop.png" onclick="stop_vid()" id="stop_button">
   <img src="images/volume.png" id="vol_img">
   <input type="range" id="change_vol" onchange="change_vol()" step="0.05" min="0" max="1" value="1">
  </div>
 </div>
</div>
</body>
</html>

In this step we add our js and css file which we were going to create in next steps.In this we add a sample video using HTML5 video tag and create three buttons for Play,Pause and Stop and create one html5 range tag for volume control.



Step 2.Make a js file and define scripting

We make a js file and save it with a name player.js

document.addEventListener("DOMContentLoaded", function() { startplayer(); }, false);
var player;

function startplayer() 
{
 player = document.getElementById('video_player');
 player.controls = false;
}
function play_vid()
{
 player.play();
}
function pause_vid()
{
 player.pause();
}
function stop_vid() 
{
 player.pause();
 player.currentTime = 0;
}
function change_vol()
{
 player.volume=document.getElementById("change_vol").value;
}

In this step we first add event listener to call startplayer() function when DOM content loaded and create a variable 'player' for video player setting.In startplayer() function we get the video player and set its controls to false so that the browser can't display it default player controls and allow our custom player controls to be visible and functional.You may also like fullscreen background video using HTML5.

In play_vid() function we simply start the play when user clicks on play button and the same done in pause_vid() function.In stop_vid() function we first pause the player and then set the player time to 0 so after that whenever user clicks on play button our video starts from the beginning.In change_vol() function we get the value of range tag whenever it changes and set that to the player volume.Remember that the value of volume is always between 0 to 1 and due to this we set the min and max value to 0 and 1 in range tag.



Step 3.Make a CSS file and define styling

We make a CSS file and save it with a name player.css

body
{
 width:100%;
 margin:0 auto;
 padding:0px;
 font-family:helvetica;
 background-color:#BCF5A9;
}
#wrapper
{
 text-align:center;
 margin:0 auto;
 padding:0px;
 width:995px;
}
#player_wrapper
{
 position:relative;
 width:400px;
 margin-left:300px;
}
#video_player
{
 width:400px;
}
#player_controls
{
 top:98%;
 position:absolute;
 background-color:black;
 width:100%;
 padding:5px;
 box-sizing:border-box;
}
input[type="image"]
{
 float:left;
 height:20px;
 margin-left:2px;
 margin-right:5px;
 margin-top:2px;
}
#vol_img
{
 margin-left:150px;
 width:20px;
}

Thats all, this is how to create your own custom video player using HTML5,JavaScript and CSS. You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email

Subscribe TalkersCode! One Of The Best
Web Development And Review Blog

Get Latest Tutorials And Reviews
Via Email