Today we are going to cope with the task of creating your own video player on HTML5 Video. Let me remind you that the video-element by itself already provides the necessary set of controls for playback controlling. In order you could see the playback control panel, it’s necessary to set the controls attribute.

However, there is a problem with the standard controls the difficulty is lies in the fact that they have a nonstandard look. In other words, in every browser, they look differently (you can check out how the controls look like in different browsers on the example of the Video Format Supportietestdrive.com – just open it in two or three different browsers).

API for Playback Control

HTML5 standard for video introduces a new interface in the DOM – HTMLVideoElement, which in its turn inherits interface from HTMLMediaElement.

HTMLMediaElement Interface

This is a common interface for both media elements (audio and video) which describes the access to basic features for working with the media content: control of the content source, playback control, changing the sound level and error handling. The main properties and methods that we’ll need:

Network status and availability performance

Playback and controls

currentTime – the current time of playback (sec.)
duration – the duration of media content (sec.)
paused – whether the playing is on a pause
ended – whether the playing ended or not
muted – on / off the sound
volume – the sound level [0, 1]
play () – start playback
pause () – pause

Events

oncanplay – you can start playing
ontimeupdate – the position of playing is changed
onplay – media player is running
onpause – paused
onended – playing is over

Important: it is not all methods and properties that can be implemented with HTMLMediaElement interface.

HTMLVideoElement Interface

Video differs from the audio in several additional properties:

width and height – width and height of the container for video playback;
videoWidth and videoHeight – internal width and height of the video, if the dimensions are not known, than they equal to 0;
poster – link to an image that can be shown so far video is not available (usually one of the first non-empty frames).

The difference between the width / height and videoWidth / videoHeight is that the last one are their own characteristics of video, in particular, the aspect ratio and other characteristics, while the container for the video can be of any size (larger, smaller, of the other ratio.)

Play & Pause

We’ll start the creation of our own video player with a simple task: learn how to run the video on playback and stop the playback. To do this we need play () and pause () methods and several properties that describe the current state of the video stream (we’ll also use the jQuery library, do not forget to connect it).

The first thing we need is video-element, which we want to control, and an element which can be pressed to control the current state:

If desired, you can immediately add some css-styles for buttons and their various states. It might seem that everything is cool and works fine, but that’s not how it turns out! There are a few details that we also need to consider.

Playing again from the beginning

First, we need to properly handle the end of the video playback (unless, of course, it is not fixated), and at this point to switch the buttons so that instead of the state «pause» was the state «play»:

Context menu

Second, browsers typically add the ability to control playback via the context menu. This means that generally user can make changes bypassing our controls. This point should be also mentioned and the necessary changes to the appearance of controls should be applied too. It’s enough to subscribe to onplay and onpause events.

The first thing we need to understand is what is the duration of the movie – for this purpose video-element has a duration property. To track this value is possible, for example, at the moment when the clip is ready for the playback – with the help of oncanplay event:

In this case, we simultaneously determine whether to display the number of hours in video player (generally speaking, the specification suggests that the duration of the clip can be changed -at this moment fires the ondurationchange event, and also be infinite – for example, streaming radio).

An important nuance regarding the property buffered, which must be kept in mind is that it provides not only time, in seconds, and time intervals in the form of TimaRanges object. In most cases it will be only one period with an index of 0, and starting with a mark of 0sec.
However, if the browser uses HTTP range requests to the server, for example, in response to attempts to switch to other fragments of the video stream, there might be several gaps. It also should be taken into account that depending on the implementation, the browser can remove already played chunks of video from the buffer.

Intermediate result:

The Sound

Finally, let’s add a little touch to our video player – ability to enable or disable the sound. To do this, we’ll add a little control to with a speaker (SVG-icon taken from the site The Noun Project):

Standard jQuery methods for toggling css-class do not work with SVG-elements. If you want to change the volume, then you will need the volume property, which takes values over the range of [0, 1].

The final result:

And some more…

Besides the fact that you can easily set the styles of the control elements on your own, there are a few important points that remain outside the article, but they are very useful to be remembered about in a real project:

Also don’t forget that you should do the binding of events to the control elements after it became clear that the video is available for playback (oncanplay):

video.addEventListener("canplay", function() {
...
}, false);

Also you should do the appropriate checks or capture the possible exceptions. Generally, you should always pay attention to such exceptions as onerror event, which occurs when there is an error of loading the video stream.

And the additional option that you might need is changing the playback speed. Especially for this case there is a playbackRate property and the corresponding onratechange event.

Ready-made Players

I think it won’t be difficult for you to find some ready-made solutions for HTML5 Video with all relying features, up to a comfortable appearance customization via CSS. Here are some useful links:

Thanks for the valuable post. Before reading this post, I tried out a few techniques to create a video but didn’t actually click. Now I think I have got a better idea on how to go about it. let me just try and implement these steps and make my video. I will get back to this post once I make my first video. Thanks

This is a wonderful tutorial. Your post gives us a clear idea on how to create videos. This is an interesting thing that I love doing. Thank you so much for the step by step explanation. Sound is always a problem in my videos. I think this is going to solve them.

Thanks for the valuable post. Before reading this post, I tried out a few techniques to create a video but didn’t actually click. Now I think I have got a better idea on how to go about it. let me just try and implement these steps and make my video. I will get back to this post once I make my first video. Thanks

This is a wonderful tutorial. Your post gives us a clear idea on how to create videos. This is an interesting thing that I love doing. Thank you so much for the step by step explanation. Sound is always a problem in my videos. I think this is going to solve them.