Build an HTML5 Video Player with Custom Controls

Hey! Are you looking for an accessible video player to implant video on a webpage? Therefore, with the HTML5, you can quickly implement the video player on the webpage. So, there is no need to use any jQuery plugin or flash for that. The HTML5 <video> element offers a standard way to embed the video file on the web page.

The following HTML displays a video player in a web page.

<video width="520" height="250" controls>
    <source src="videos/codexworld.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video>

• Controls characteristic adds controls to video, like play, pause, full screen, volume, etc.
• Include the width and height functionality to specify the size of the video.
• It is also a good idea to showcase a message when the browser does not support < video> element. The text between the <video> and </video> tags will display when browser is not support HTML5 video.

You can use the autoplay attribute to start the video automatically. To play video automatically on page load, place the autoplay attribute into the <video> element.

<video width="520" height="250" controls autoplay>
    <source src="videos/codexworld.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video>

SEE ALSO: How to Force Download File in PHP

HTML5 Video Player Custom Controls

HTML5 defines DOM properties, method, and events which permits you to define custom video controls. Using custom controls, you can add or customize the video controls buttons and add a logo in the video player.

With the above instance, we’ve implemented some custom control buttons using JavaScript; you can add or deduct many other custom controls in HTML5 video player.

HTML:

<button onclick="playPause()">Play/Pause</button>
<button onclick="reload()">Reload</button>
<button onclick="makeLarge()">Large</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<br><br>
<video id="videoPlayer" width="500">
  <source src="videos/codexworld.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

JavaScript:

<script> 
var video = document.getElementById("videoPlayer");
function playPause() { 
    if (video.paused) 
        video.play(); 
    else 
        video.pause(); 
}
function reload() { 
   video.load(); 
}
function makeLarge() { 
    video.width = 1000; 
}
function makeSmall() { 
    video.width = 250; 
} 
function makeNormal() { 
    video.width = 500; 
} 
</script>

Also, read our previous blog- Create a Digital Clock with Date using JavaScript