✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

Create Your Own Custom Video Player Using HTML5 And JavaScript

Last Updated : Jul 1, 2023

IN - JavaScript HTML5 CSS | Written & Updated By - Anjali

In this tutorial we will show you how to create your own custom video player using HTML5, JavaScript and 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, You may also like custom audio player using HTML5.

Create Your Own Custom Video Player Using HTML5 And JavaScript

CHECK OUT THIS TUTORIAL LIVE DEMO →

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.

I hope this tutorial on custom video player helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →