Custom HTML5 Video Controller

HTML5 video controller allows user to interact with your embedded video just like YouTube video player allows you to start, pause and end video playing.

HTML5 video controller allows you to add start, pause and end video buttons. However, these buttons are very plain and may not feet overall design of your HTML5 web page.

Thankfully, HTML5 goes extra mile by allowing us to control the appearance of these buttons on the form.

First, let us look at the regular video tag that allows us view video file on HTML5 compatible browser.

<videowidth=400"height="200"src="myVideoFile.mp4"controls/>

Browsers render this video tag differently based on the browser type and version. We can override this undesired behavior and make sure that our video control is rendered the same on all browsers. Let’s see how we can use HTML5 to accomplish this task.

First, you need to use HTML5 media attributes and DOM events. For example, there several important attributes that we’ll need while building custom video controller.

media.paused

media.defaultPlaybackRate

Media. playbackRate

media.ended

Media.play()

Media.volume

Media.muted

Media.currentTime

These attributes are all very important for our JavaScript code that will use them to modify the way date and time control looks and behaves.

Example of this JavaScript code is below:

<script>

if (video.paused)

{

video.play();

}

elseif (video.ended)

{

video.currentTime=10; //Sets position from which to stat video playing.

video.play();

</script>

Here is complete example in HTML5 and JavaScript and you can use as your boilerplate for coding your own custom video control.