Hosting Solutions
mobile_logo Table of Contents

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){; 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>

JavaScript Videos

Video Programming

Video Player Custom Controls Programming TutorialVideo Seek Controls Programming TutorialVideo Duration and Current Play Time Programming TutorialVideo Volume Change and Mute Programming TutorialVideo Full Screen Toggle Custom Player Controls TutorialVideo Player Controls CSS Design Tutorial