20 HTML5 video and Chrome’s one video per page problem

Being a web developer for nearly ten years has taught me to expect the unexpected when creating web pages for the many different browsers used around the world. CSS, accessibility, JavaScript and many other web technologies can’t be relied upon to produce the same results.

But this is a quirk that I didn’t expect – it isn’t possible to have more than one mp4 video on a page in the Chrome browser.

Perhaps we should expect that Chrome will not work well with mp4 video since moving to support the webm format at the beginning of 2011. http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html. But Chrome does still play mp4 and in fact makes its default selection mp4 not webm.

Attempting to play multiple mp4 videos in Chrome causes these problems:

·         Chrome does not load one or more of the mp4 videos.

·         Causes Chrome to crash.

·         Will at best play only one video at a time.

The overarching problem is the state of HTML5 and browser implementation of it. When embedding video on web pages we are told current best practice is to have different video sources for different web browsers – mp4 for Safari, iOS, Android and IE and then  webm for Mozilla and Chrome (even though Chrome will still play the mp4). You may even elect to have Flash in there as well. A browser will then select the video it can play and will ignore the rest. It’s an elegant solution to the current issue of differing video format support in browsers. The big problem with this method is that Chrome defaults to the mp4 file. That is fine if only one video is on the page but causes serious problems when there are more.

So what is the answer, how is it fixed?

Use mp4 only in the video tag and show Chrome (and Firefox) the webm file. Chrome happily plays multiple webm files.

I know that seems counterintuitive after all that has just been written. I also know that Firefox, and of course Chrome, will be unable to play mp4 files effectively which is why we need a scripting fix.

JavaScript to the rescue

A JavaScript fix is needed, there isn’t anything else that can be done that I am aware of. Also keep in mind the two video file formats mp4 and webm are still required.

The video tag on your page should be (at a minimum) similar to:

<video width="640" height="360">

<source src="video/example.mp4" type="video/mp4" /> 

</video>

JavaScript, or in my case jQuery, is used to change the .mp4 file extension of the “src” to .webm when the page loads and the video/mp4 type attribute to video/webm when the page loads.

Below is the JavaScript (well jQuery) function that I have used: (the content argument in the function is the html that will be searched through looking for the video tag)

function SwapMP4forWEBM(content){

  if(jQuery.browser.chrome || jQuery.browser.mozilla){

    content.find("video").each(function(){

      $(this).find("source").attr("src", $(this).find("source").attr("src").replace(".mp4", ".webm"))

      $(this).find("source").attr("type", $(this).find("source").attr("type").replace("mp4", "webm"))

    })

  }

  return content.html()

}

That’s it.

Of course it is possible to do it the other way around; webm to mp4, but then you’ll just have to check for more browsers anyway. Added to this is the early iPad quirk of making sure that the mp4 file is the first one in the list of video files, otherwise it confuses the iPad and it can’t find the video to play. While the method really should work anyway on iPad(swapping webm for mp4) I haven’t tried it and why poke the tiger with a big stick if you don’t need to.