I’ve written a couple of articles now on optimizing HTML5 video, specifically focusing on MP4 videos. That is because all modern browsers support HTML5 video using the MP4 video format, so it’s wildly used and offers a lot of great opportunities to optimize. However, there are two other HTML5 video formats, WebM and Ogg Video. Of these, WebM is the most interesting. Modern versions of Chrome and Firefox support it, and support for WebM in Microsoft Edge is currently “in development”.

We know that for images, the same image might be a smaller file when saved as a JPEG instead of a PNG, or vice versa. This happens because different image formats compress and store graphical data differently, so you can get a smaller-sized image file by trying different formats. This idea applies to videos as well: the same video may be smaller as a WebM instead of an MP4. It just depends on the video content. While many sites include references to video content in WebM or Ogg Video format for maximum capability, we can actually take advance of this difference and turn it into a performance optimization.

How Browsers Choose which HTML5 Video Format to Play

To see how we can use leverage different video formats into performance optimizations, we need to understand how a browser decides what type of HTML5 video to play. Consider the HTML example below, where a website has embedded an HTML5 video via the <video> tag, and is offering the video content in several different formats:

<video controls="controls" width="400" height="300">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  <source src="video.ogv" type="video/ogv" />
</video>

 

When given a choice of multiple <source> tags, a browser starts at the first <source> tag and looks at the type attribute, trying to find a support video format. The browser will play the video content from the first supported <source> tag, even if the browser supports more than one of the possible video sources. For this example, a modern version of Google Chrome supports MP4 video, WebM videos, and OggV Videos, so it is able to play all content from all 3 video sources referenced. Chrome would look at the first <source> tag, see that it is an MP4 video which it supports, and play that content.

Now imagine the MP4 video is 10 MB, the WebM video is 8 MB, and the OggV video is 11 MB. Both Google Chrome and Firefox support MP4 and WebM formats, but the MP4 version is listed first, they would download and use that video. This is not good for performance. The browsers are wasting 20% by using the MP4 version instead of the WebM version, simply because the designer put the MP4 video <source> tag first!

Optimizing the Default HTML5 Video

We’ve seen the browsers default using the first <source> tag they can play. We can optimize this default HTML video by rearrange <source> tags so the smaller video files are listed first and gets used by default. Below we have optimized our example:

<video controls="controls" width="400" height="300">
  <!-- WebM is 8 MB -->
  <source src="video.webm" type="video/webm" />

  <!-- MP4 is 10 MB -->
  <source src="video.mp4" type="video/mp4" />

  <!-- OggV is 11 MB -->
  <source src="video.ogv" type="video/ogv" />
</video>

Now, Chrome and Firefox will play the WebM video by default, since it is the first <source> tag listed with a support video format in the type attribute.

Does this optimization hurt browsers that don’t support other formats besides MP4? No, it does not. For example Microsoft Internet Explorer and Microsoft Edge only support MP4. When encountering our example <video> block above, the browser would skip the first source, since it does not support WebM. The second source is MP4, which is supported, and that option would be selected. Back in the very early days of HTML5 video (think first iPad) there were some browser compatibility issues which required specific ordering of <source> tags. Those aren’t a concern anymore. If you find online content specifying a certain ordering of <source> elements for backwards compatibility, check the date it was written. You are probably looking at out-of-date content.

Testing for Unoptimized Default HTML5 Videos

It’s easy to test for unoptimized default HTML5 videos since basically we are testing that the videos linked from the <source> elements are ordered smallest to largest. For example, consider the SaaStr Annual conference website, that I wrote about in a previous blog post about muted videos. It is using an HTML5 video as part of its banner background. Look in the HTML source and you can see the <video> tag in your HTML source which has multiple <source> tags as shown below:

mp4-listed-first

For each of the video sources, we can use the command line program curl to check its file size, and grep to filter the result. The command for that looks like this:

 curl -I -s http://www.example.com/video-file-here.mp4 | grep "Content-Length"

This tells us SaaStr’s MP4 video is 10.8 MB, while the WebM video is only 6.8 MB. The MP4 video is listed first, so the SaaStr website has an unoptimized default HTML5 video.

For our Splunk customers, we have added a new check to Zoompf, our performance analysis product, which will detect unoptimized default HTML5 videos. Zoompf will alert you to the issue and tell you exactly what the savings would be by rearranging the video sources, as shown in the screen shot below:

check-in-zoompf

If you just want a quick check of your site for unoptimized default HTML5 videos, you can use our Free Performance Report.

A Caveat on Comparing Apples to Apples

Sharp eyed readers might notice that we didn’t check the Ogg Video version of the video on SaaStr’s site. This is because that video is substantially smaller. Wait, isn’t that a good thing? No. It’s smaller because the video content quality is terrible. Looking at the video’s information via FFMpeg reveals that the video stream is only encoded at 85 kb/s, which is just awful. More importantly, it is not an apples to apples comparison: The MP4 and WebM are of one level of quality, while the Ogg is at a far lower level. It is crucial when testing for optimized default HTML5 videos to verify all the different videos are of equivalent quality. This is especially true if you see a huge differences between the in file sizes. You can easily do this by watching a few seconds of each video in a video player to confirm they all look the same.

Conclusions

As we have seen, while all modern browsers support MP4, most browsers support additional HTML5 video formats. Even though MP4 is the common standard, vendors continue to add support for more video formats, as evidenced by Microsoft adding WebM support to their Edge Browser. We can use turn this into a performance optimization:

  • Understand that the same video can produce different sized files based on the different video compression algorithms and formats used, so we can want to find the format that is the smallest.
  • Determine the size of each video format. You can do this via via your computer’s file manager for local files, or use curl and grep as described above. You can also test for this automatically with Splunk.
  • Be sure that all the video formats are of equivalent quality by checking them in a video player.
  • Rearrange the <source> tags underneath the <video> tag, ordering them so the smallest video file is first.