Video Seek Controls Programming Tutorial
Welcome to part 2 of customizing the HTML5 video element controls interface. In this video we are going to more intelligently initialize the video player's programming so that our HTML5 markup stays slim and clean. We will use JavaScript to add event listeners and initialize all variables needed for the entire video player script. In this part 2 we will also apply the HTML5 range slider input as the custom seek bar for our video player. We will focus on making the player controls sexy in later videos, first we just want to program working controls, after that we will make it pretty.
<!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>
var vid, playbtn, seekslider;
function intializePlayer(){
// Set object references
vid = document.getElementById("my_video");
playbtn = document.getElementById("playpausebtn");
seekslider = document.getElementById("seekslider");
// Add event listeners
playbtn.addEventListener("click",playPause,false);
seekslider.addEventListener("change",vidSeek,false);
vid.addEventListener("timeupdate",seektimeupdate,false);
}
window.onload = intializePlayer;
function playPause(){
if(vid.paused){
vid.play();
playbtn.innerHTML = "Pause";
} else {
vid.pause();
playbtn.innerHTML = "Play";
}
}
function vidSeek(){
var seekto = vid.duration * (seekslider.value / 100);
vid.currentTime = seekto;
}
function seektimeupdate(){
var nt = vid.currentTime * (100 / vid.duration);
seekslider.value = nt;
}
</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">Pause</button>
<input id="seekslider" type="range" min="0" max="100" value="0" step="1">
</div>
</div>
</body>
</html>