Video API

When the <video> was first introduced the native controls were not always the most visually exciting and certainly lacked some features such as full screen which sometimes made Flash a better option. The native players in all the major browsers have come on leaps and bounds and most now have the likes of fullscreen but they all certainly differ in appearance.

Native controls are switched on by the use of the controls attribute of the <video> tag.

If you want to do away with the native controls and create your own with a view to maintaining some consistency across browsers then you can do so via the Video API. A full set of the properties, methods and events is available on w3c – we’ll look at some of the headline features you may find useful.

First of all we’ll remove the native controls by dropping the controls attribute of the <video> tag ie:

<video width="360" height="202" id="myVideo">

We’ll also need some Javascript to get hold of the video in the DOM. We can do this with ‘vanilla’ Javascript using a DOM selector like getElementById:

var mediaPlayer = document.getElementById('myVideo');

or if you prefer to use jQuery then use:

var mediaPlayer = $('#myVideo').get(0);

Warning: Notice with jQuery that we have to use get() which is used to get the native DOM element before applying the Video api to it.

Tip: The buttons in the demos that follow are all created using the HTML <button> tag and I have left them to be styled by the CSS in the same style as other buttons are on this blog. You can, of course, style these or any other elements up as you choose and then use them as the controls for your video.

Playing and Pausing

When you drop the controls attribute the first thing you’ll notice is that is now quite difficult to play the video (you can right-click). We do however have a play() method we can use:

Detecting the Length and Current Time

To work out the percentage of a video played we have the duration and the currentTime properties. We’ll need an event as well to get the latest currentTime property and the timeupdate is perfect for this as it is triggered when the currentTime property changes. To display the percentage played we’ll add a simple bit of HTML to our example:

<p id="progress"></p>

Then we’ll use the following Javascript to calculate the percentage played.

Recent Posts

Posted in capacity as Module Leader Group Software Development, Department of Computing Sheffield Hallam University A Morgue One hundred students, 10 clients, 5 labs of University PCs, overzealous Facilities department and the Sheffield weather. What could possibly go wrong? Last week was ‘Scrum Week’. Nineteen groups of students working flat out 9-5, Monday to Friday…

Before reading the following ensure you are happy with the flexbox concepts of main axis and cross axis discussed in my previous post. Justification on the main axis The CSS property justify-content is used to control spacing between and around items along the main axis (assuming extra space is available). It is applied to the…

The concept of ‘flexible box’ or flexbox is name of the CSS3 flex layout model. Flexbox is based around flex containers and flex items. A flex container is a parent element to flex items. Flex items are the immediate children of the flex container and can be laid out in any direction. Take the following simple…