Schalk Neethling

Scripting on Caffiene

Exploring HTML ~ the Video Element - Part 2

| Comments

In part 1 of this series I covered the bulk of the attributes as well as the basic usage of the video element.

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 source elements.

1
2
3
4
<video preload="none" controls>
  <source src="/images/video/record_stock.mp4" type="video/mp4" />
  <source src="/images/video/record_stock.webm" type="video/webm" />
 </video>

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

With the 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
 <video preload="none" controls>
   <source src="/images/video/record_stock.mp4" type='"video/mp4"; charset="avc1.42E01E, mp4a.40.2"' />
   ...
</video>

A full discussion of codecs is beyond the scope of this post but, if you would like to learn more, have a look at the W3C page covering this topic or read more on Wikipedia.

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
<video preload="none" controls>
  <source src="/images/video/record_stock.mp4" type="video/mp4" />
  <source src="/images/video/record_stock.webm" type="video/webm" />
  Your browser does not support the video tag. Please <a href="/images/video/record_stock.mp4">download the video</a> to view it offline.
 </video>

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.

Comments