---

Search posts under HTML5:

---

Custom video player in HTML5

How to control the video using other html element in HTML5?

In previous post, we learnt how to work wtih html5 video element.

To control video using our own html element is similar to the controlling audio using our own html element, below code snippet is just the replacement of “audio” word to the “video” word in the previous audio code snippet.

This code can also be used to create custom html5 video player.

OUTPUT

Below html5 video tag would create a custom video player user interface to control the playing of the video on the web page.

    <video src="VideoIntro.mp4" height="300" width="400" autoplay controls id="video1">
        video is not supported.
    </video>
    <div>
        <input type="button" id="btnPlay" value="Play" onclick="PlayNow()" />
        <input type="button" id="btnPause" value="Pause" onclick="PauseNow()" />
        <input type="button" id="btnMute" value="Mute" onclick="MuteNow()" />
        <br />
        Volume :
        <input type="range" min="0" max="1" step="0.1" id="volume"
            onchange="ChangeVolume()">
        <br />
        Time lapsed:
        <input type="range" step="any" id="seekbar"
            onchange="ChangeTheTime()">
        <label id="lblTime">-:--:--</label>
    </div>

Above code snippet has following

• Three buttons for
• Play - calls PlayNow() function
• Pause - calls PauseNow() function
• Mute - calls MuteNow() function
• Two range elements for
• Change sound volume - calls ChangeVolume() function on change
• Seekbar - calls ChangeTheTime() function that shows time duration of media played

Now, let's see the JavaScript code that is used to define the events and function attached to the html5 elements above.

In below code snippet, we are doing following

• Declared variables for video, volume and seekbar
• Attaching timeupdate and durationchange event to the video element. Setting the current volume of the system to the volume range element so that both are in sync
• Defining ChangeVolume() function that executes when user tries to change the volume. Here are first get the current volume and set to the video volume. If the volume being changed by user is 0 then we are setting the video to mute mode otherwise setting muted to false so that sound starts coming
• Defining SetSeekBar() function that is called when durationchange event executes on the video element (when the video is loaded). This function sets the max and min range of the video to the duration of the video
• Defining ChangeTheTime() function that executes when the seekbar changes. This simply set the current time of the video to the seek bar value (changed by user, if any)
• Defining UpdateTheTime() function that executes when the video plays and the duration is updated in the video element. This function calculates the time in seconds and divide them to get the duration in hours, minutes and seconds

 <script>
        // get the video, volume and seekbar elements
        var video = document.getElementById("video1");
        var volumeRange = document.getElementById('volume');
        var seekbar = document.getElementById('seekbar');
    
        // attach timeupdate, durationchange event to the video element
        window.onload = function () {
            // go to http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-
            EventTarget-addEventListener to know more about addEventListener
            // (false is for bubbling and true is for event capturing)
            video.addEventListener('timeupdate', UpdateTheTime, false);
            video.addEventListener('durationchange', SetSeekBar, false);
            volumeRange.value = video.volume;
        }
   
        // fires when volume element is changed
        function ChangeVolume() {
            var myVol = volumeRange.value;
            video.volume = myVol;
            if (myVol == 0) {
                video.muted = true;
            } else {
                video.muted = false;
            }
        }

        // fires when page loads, it sets the min and max range of the video
        function SetSeekBar() {
            seekbar.min = 0;
            seekbar.max = video.duration;
        }

        // fires when seekbar is changed
        function ChangeTheTime() {
            video.currentTime = seekbar.value;
        }

        // fires when video plays and the time is updated in the video element, this
        writes the current duration elapsed in the label element
        function UpdateTheTime() {
            var sec = video.currentTime;
            var h = Math.floor(sec / 3600);
            sec = sec % 3600;
            var min = Math.floor(sec / 60);
            sec = Math.floor(sec % 60);
            if (sec.toString().length < 2) sec = "0" + sec;
            if (min.toString().length < 2) min = "0" + min;
            document.getElementById('lblTime').innerHTML = h + ":" + min + ":" + sec;
            seekbar.min = video.startTime;
            seekbar.max = video.duration;
            seekbar.value = video.currentTime;
        }

        // fires when Play button is clicked
        function PlayNow() {
            if (video.paused) {
                video.play();
            } else if (video.ended) {
                video.currentTime = 0;
                video.play();
            }
        }

        // fires when Pause button is clicked
        function PauseNow() {
            if (video.play) {
                video.pause();
            }
        }

        // fires when Mute button is clicked
        function MuteNow() {
            if (video.muted) {
                video.muted = false;
                olumeRange.value = video.volume;
            }
            else {
                video.muted = true;
                volumeRange.value = 0;
            }
        }
    </script>

After that following function executes on click of the buttons

• PlayNow() function that executes on click of the Play button. This checks for the video, if paused, calls the play() function otherwise checks if it has already ended, if yes then bring its current position to 0 and then call the play() function on the video element that plays the video
• PauseNow() function that executes on click of Pause button. This checks if the video is playing calls the pause() function that pause the video
• MuteNow() function that executes on click on Mute button. This checks if the video is muted (sound is 0), if it is then set the muted property to false and then set the volume range element to teh current volume of the video otherwise set the muted property to true and volume range element to 0 that mutes the volume of the video.

To know what other events of html5 video element, click here.