Build a HTML5 Video Player with Custom Controls

Are you looking for a simple video player to embed video in webpage? Using HTML5 you can easily implement the video player in the webpage. You don’t need to using any jQuery plugin or flash for that. The HTML5 <video> element provide a standard way to embed the video file in the web page.

The following HTML displays a video player in 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 attribute adds controls to video, like play, pause, full screen, volume, etc.
• Include width and height to specify the size of video.
• It is also a good idea to display a message when <video> element is not supported by the browser. The text between the <video> and </video> tags will display when browser is not support HTML5 video.

autoplay attribute is used to start video automatically. To start 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>

HTML5 Video Player Custom Controls

HTML5 defines DOM properties, method, and events which allow you to define custom video controls. Using custom controls, you can add or modify the video controls buttons and add a logo in the video player.
In the following example, we’ve implemented some custom control buttons using JavaScript, you can add 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>