How to Customize HTML5 Video Controls with jQuery and CSS

Now, you will be glad to know that one of the most robust and excellent feature in HTML5 is under your reach. Yes, I am talking about HTML5 video element which is supported by almost all latest browser even more so for IE9. However, it incorporates several distinct outstanding features having a consistent HTML5 video control throughout all browsers. Almost every web-developers are attempting to implement at the earliest. Moreover, it comprises some marked barriers too about the notably problem of which codecs backings in each browser, with a controversy among IE/Safari and Firefox/Opera.

Therefore, this controversy may not exist even as most recently Google has unleashed VP8 codec and the WebM project is about to open its eyes. Firefox, Chrome, Opera and IE9 all are supported in developer builds, final or at least support proclaimed for this format as well as Flash will be also capable to sport VP8. Hence, we can expect to build a single common version of the video that can play excellently in the video element in almost all browsers and flash player even in those which are not supported by WebM.

So, in order to build a customized player for HTML5 video element, you are required to hand code all JavaScript, CSS3, HTML5 and other useful open standards. So, you are supposed to go through this entire tutorial post How to Customize HTML5 Video Controls with jQuery and CSS, where we have implement own custom HTML5 video controls instead of employing default controls. It seems to be not too confounded to achieve custom HTML5 video controls. Here, I am going to teach you how you can create your own customized HTML5 video controls employing jQuery.

Basic Markup of HTML5 Video Element

Before we get into the nitty gritty, first you are supposed to recall for HTML5 video basic markup.

This has been referred as the best practice to add three video formats as source elements – WebM, MP4 and Ogg in order to achieve your HTML5 video that would be capable to work cross-browser platforms. You may include some text as fallback inside a video element, when the HTML5 video doesn’t supported by the user’s browser. No doubt, in the mean time you might employ Flash as fallback.

Getting Started with Custom HTML5 Video Controls

It is amazing that we have media elements API and is supported by HTML5 media elements including both video and audio, that can be easily accessible through implementing JavaScript and employ them accordingly to wire up your HTML5 video controls.

Prior to start with coding, let me tell you about jQuery video element targeting. In JavaScript we employ getElementByld(videoID‘) targeting the video element. However, in return you will have a DOM object. This is not equivalent to jQuery $ (‘#videoID’) targeting that will deliver a jQuery object, not a DOM object as a result. Therefore, you can’t use jQuery selector directly to use/call HTML5 video DOM attributes as well as functions prior to convert in DOM object.

Video Play/Pause Controls

Fine, it’s all about introduction. Now, come to start coding. First of all we will attempt to include a simple Play/Pause control to our video.

Now, you can control video status without any hassles through HTML5 video DOM functions and these are .play() and .pause()

Displaying Video Current Playback Time & Duration

It will be very interesting to know that HTML5 video support video playback too. Therefore, next we will attempt to display video current playback time & duration.

However, in context to achieve HTML5 video duration ensure that video metadata is loaded appropriately. Through employing HTML5 video loadedmetadata event you can easily detect it. You can implement HTML5 video timeupdate events in order to track it for a current video playback time.

Video Processor Bar

Since you are able to make show video current playback time and video duration, but how much it will be pleasant to render these data into marvelous looking video progress bar.

This JavaScript code being assigned below is the formula that can convert video duration and video current playback time into a progress bar.

Now, you are almost done. You are required to make this progress bar seekable and draggable. You will have to put a little bit of efforts to employ mousedown, mouseup and mouse move listeners and entangled this with progress bar. However, you can also change it with sliders according to your wish.

Showing Buffering Bar

Of course, you can get a buffering bar for your HTML5 video. When a user’s browser retrieves the data the HTML5 video progress event will be fired. However, it is very convenient to build a video buffering bar. The current version of Chrome might be confounded with progress event. Therefore, you are required to transform it with javascript setTimeout () function.

Hence, you will require to employ the last value of buffer data because the HTML5 video buffer attributes will deliver already buffered object.

Video’s Volume Control

In this section, you will learn to add video’s volume controls of two distinct volume controllers one is mute button control and another volume bar control.

Here, we will design the video’s volume bar in such a way that when a user click on volume bar control the width will alter as well as the video will be mute accordingly when click on mute button. Moreover, you might render the design in a dragable too.

Fast Forward, Slow Motion, and Rewind Controls

HTML5 video is capable to change the speed of playback in a very handy manner. You can alter the playback speed to video through changing the video playback rate attribute.

But, the playback rate attribute is not supported by Firefox as well as Chrome doesn’t support rewind. However only Safari is there that is fully supported with.

What’s More in HTML5 Video?

Besides  getting these features, even though you can find out some additional events and attributes that will add extra value in your custom HTML5 video controls. Let’s check out here.

HTML5 video ended Event, successfully fire out the event when video ends.
HTML5 video can play Event, with this the video can be played even the event fired out, but in the mean time buffering still continues.
HTML5 video can play through Event, It fires the event even the whole video can be played.
HTML5 video seeking Event, When browser looks for a position the event fired.
HTML5 video waiting Event, here the event will fire when it waits for more data in order to play video.

Beyond these you can designate here some cool control that can be implemented in your custom HTML5 Video control.

You can add Fullscreen video control through implementing this code:

For Light on/off control you can employ this:

 

Williams Heilmann

Williams Heilmann has been associated with PSDtoWordPressExpert for many years. He has extensive experience as a web developer and works with this company to offer the best WordPress solutions to suit the specific needs of the clients. Also, he has got a flair for writing which he consumes in writing the informational blogs for submission on different websites.