HTML5 HTML5 custom video player example

Write code here

J | B | A

<!DOCTYPE html />
<html>
<head>
    <title>HTML 5 Video play with custom control</title>
    <meta charset="UTF-8" />
</head>
<body>
	<h2>HTML 5 Video play with custom control</h2>
    <video src="/DemoSupportingFiles/Multimedia/VideoIntro.mp4" height="300" width="400"  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>
    <script>
        // get the video, volume and seekbar elements
        var video = document.getElementById("video1");
        var volumeRange = document.getElementById('volume');
        var seekbar = document.getElementById('seekbar');
    
        window.onload = function () {
            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;
        }

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>
 <br />
<b>This Video is not supported</b>
</body>
</html>

Note: We DO NOT save your trial code in our database.

HTML5 > HTML5 Custom Video Player

Write code here

Output