In part 1 of this series I covered the bulk of the attributes as well as the basic usage of the
An important aspect I did not cover is some of the best practices when using the
video, or other media, elements. Although I did mention the use of
preload="none", to prevent automatically downloading media and, using the
autoplay attribute sparingly, there are two more important topics left to discuss.
Those topics are, adding support for the widest possible audience through the use of widely supported video formats with fallback content and, not being exclusionary by addressing the inherit accessibility concerns that comes with using video. In this post I will be discussing the first of these two topics.
In the not so distant past, the number of video formats you had to provide to support the widest possible audience would have been around four. Thankfully things in this regard has improved a lot since then and we now really only need to include two different formats. The first being H.264(in an MP4 container), and the second being VP8/VP9(in a WebM container).
The source element
In order to do this, we are going to strip of the
src attribute from the
video tag, and instead use nested
1 2 3 4
Above we then specify our two media sources, the first uses H.264, as this enjoys the widest support, and second, the WebM format.
The type attribute
type attribute we specify the container that wraps our video and audio channel data. As part of the
type attribute you can include a
codecs attribute to specify the encoding used for you video and audio.
1 2 3 4
Providing fallback conent
With the above we have now added support for most users on the web but, we still have no fallback content for users whose browser does not support the tag at all. Let’s remedy that.
1 2 3 4 5
And with the above we have provided a text string with a link to download the video. Now, one could argue that instead of the text content I could have offered the video in Flash but, I don’t know. That kinda feels to me like providing a link so a user can download IE6. So, in the interest of moving the web forward, I am going to not do that.
I hope you found this post of interest, and I welcome your comments.