Video Player Custom Controls Programming Tutorial
In this first part of the tutorial series we will discuss how to set up a custom controls interface starting with the play/pause button. Customizing the HTML5 video controls interface will allow you to achieve a unique and constant look for your video player in all browser software. Different browser software display different looking default controls for the video element. You can also offer your custom programmed video players to others to use on their websites if they also do not want to use the stock controls that are native to browser software for the video element. We use JavaScript to control the video after we remove the default controls. We used to do very similar things in Flash AS3 if you remember.
We are going to begin with disabling the default control bar and setting up our own control bar design using a DIV that we can place all of our video controls into as we create them. In this part 1 we will add a play/pause button to the control bar, then in the videos that follow we will customize more aspects of video control interfacing.
<!DOCTYPE html>
<html>
<head>
<style>
div#video_player_box{ width:550px; background:#000; margin:0px auto;}
div#video_controls_bar{ background: #333; padding:10px;}
</style>
<script>
function playPause(btn,vid){
var vid = document.getElementById(vid);
if(vid.paused){
vid.play();
btn.innerHTML = "Pause";
} else {
vid.pause();
btn.innerHTML = "Play";
}
}
</script>
</head>
<body>
<div id="video_player_box">
<video id="my_video" width="550" height="300" autoplay>
<source src="Tom_and_Jerry.mp4">
</video>
<div id="video_controls_bar">
<button id="playpausebtn" onclick="playPause(this,'my_video')">Pause</button>
</div>
</div>
</body>
</html>