Schalk Neethling

Scripting on Caffiene

Exploring HTML ~ the Video Element

| Comments

I have been working with HTML for a number of years now but, in especially the last 2 to 3 years, the language has grown and evolved at a very rapid pace.

Both as part of the work done by the W3C and the WHAT-WG. Over and above the rapid evolution of HTML itself, the web ecosystem has exploded with advancement in CSS, JavaScript and tooling.

I have come to realize that there are bound to be a lot that has flown by me as one goes through the day to day flow of work and life so, it is time to step back and do a deep dive, one technology at a time. With that, I have started to explore the HTML language, as it stands now as a recommendation, as well as the continued work happening at the WHAT-WG.

This is then the first of many posts about the various elements and pieces that make up the language. While these posts will not be in any particular order, everything will also be collected in the exploring-html repo on Github. The repo will be structured in folders that follow the structure of the specification itself. I sincerely hope that this will help other explore the language and learn more. Also, please feel free to contribute to the repo if you find errata or want to suggest additions or improvements. Just open a pull request or file an issue.

The video element

Known as one of the Flash killers, native video and audio support is a really big deal, and one of the most important advancements in HTML. Below I will explore the video element, it's use, best practice, and various attributes.

The most basic use

The most basic use of the video element is to simply specify the media source using the src attribute. Note that this is not a best practice as there is no fallback content for browsers that do not support the codec, nor for browser who does not support the video element itself, more on this later.

1
<video src="video/wine_pouring.mp4"></video>

Another blindingly obvious problem you will notice is that there is no way to play the video. Let's take care of that first. To enable your users to interact with the video you need to add the boolean controls attribute.

1
<video src="video/wine_pouring.mp4" controls></video>

That's much better. But, why would you not want to add controls to your video, you might ask. Well, often people want to use a video element as the background for the hero area of their website [see the AirBnB website for an example of this]. In these cases, you do not want any controls overlayed and and will use the autoplay attribute to start playing the video without the need for user interaction.

The preload attribute

One of the things we as developers need to be conscious of is the data we push down to our users, and with video, this is especially important. If we are not very certain that our users will be watching the video, we should not be pushing or preloading anything until they initiate it themselves.

This then is where the preload attribute comes into play. Note: The two videos above and any others in this post, has the preload="none" attribute set so your data is saf :).

As mentioned above, being conscious of our the data we push down to our users is important. Therefore it is best practice to add the preload="none" attribute to your video and audio elements, especially if you have multiple of these elements on a page.

Sometimes however, you might want the user agent to download the video metadata (such as dimensions, track list, duration etc.), in these cases you use the "metadata" value.

1
<video src="video/wine_pouring.mp4" controls preload="metadata"></video>

The default for the preload attribute is "auto", and with this, the user agent might optimistically download the entire resource. Definitely not something you want when you have multiple media sources on a page or, when the user is accessing the page from a mobile device.

The loop attribute

The loop attribute of the video element allows you to automatically loop your video continuously once it has reached the end. Being a boolean attribute, it only allows you to either loop the video or not, there is currently no way to indicate the number of times you want the video looped.

Again, a use case for this might be as the backdrop of a hero section on a website.

1
<video src="video/wine_pouring.mp4" loop></video>

The autoplay attribute

The autoplay attribute allows you to play a video without any user interaction. This is the certainly an attribute that needs to be used very sparingly. It is also a boolean attribute so, in it's presence a video will autoplay and in it's absence, the logical default is to not autoplay.

A valid use case for the autoplay attribute then is much in the same fashion as the loop attribute above, but with even greater care.

1
<video src="video/wine_pouring.mp4" autoplay></video>

The mute attribute

The best example I can give here is, think about the autoplaying videos on your Facebook timeline(although that is already a horrible default). I magine those videos also having the audio enabled by default :-/

The muted attribute is again a boolean attribute, and will mute the audio if present and not, when omitted.

1
<video src="video/wine_pouring.mp4" muted></video>

The poster attribute

So, you maybe thinking, well if I should always use preload="none" then my video page is going to look pretty dreary. All the videos will just be these gray or black boxes with controls.

This is where the poster attribute comes into play. This allows you to specify an image to be displayed in place of the default.

1
<video src="video/wine_pouring.mp4" poster="/img/frame.png" controls preload="none"></video>

As you can see from the above, we have a nice preview image of the video with controls overlayed, but, it is not loading anything by default as preload="none" is set.

The crossorigin attribute

I am not going to cover this attribute here as I have an entire post dedicated to it.

The Others

There are three attributes that remain but, these do not warrant separate discussion. The first and second of these are the width and height attributes. Whilst you can specify these on the element, you can also control it via CSS, which is the better option as it keeps the presentation separate. Note Specifying a smaller size for a media element does not affect the physical(MB) size of the resource.

There is one more attribute, and that is the mediagroup attribute. The word on the web is that this is most likely going to be removed from the spec so, we can ignore this one for now.

I hope you found this post useful. Should you have any questions or comments, let mw know in the comment section below.

Update: Part 2 of this series has been posted and deals with best practices when using the video element.

Update: A reader on reddit asked what the status is with video on Opera on Mac. I tested on Opera 31 and 33, and the MP4 file format works just fine. From the comments there, also see caniuse.com website for support details regarding the webm and mpeg4 formats. Thanks aamarks and x-skeww

Comments