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.
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.
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
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
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.
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
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.
The autoplay attributeThe
autoplayattribute 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.
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 :-/
muted attribute is again a boolean attribute, and will mute the audio if present and not, when omitted.
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.
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.
There are three attributes that remain but, these do not warrant separate discussion. The first and second of these are the
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
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