The mystery of the non-playing video

Also known as be sure to keep your local, customised versions of web development frameworks, in this case, HTML5 Boilerplate, up to date if you don't want to lose many hours of fruitless searching, chin scratching and eventually hair pulling (which is pretty hard when it's not that long to start with).

This story starts when a client asked me to add some video to his site. Being one of the hip kids, and up with all the latest developments, I immediately thought of using the HTML5 video element in combination with the Video for Everybody technique which would provide fallbacks for those browsers that don't support the video element.

First I needed to covert the .mov file into formats that browsers would understand and I first came across EasyHTML5Video which creates the files required but also outputs code based onVideo for Everybody. With video and code in hand, I set up a test page on the site being developed in Concrete5 (which I've been trying out on a couple of smaller projects recently). All was good in Chrome, Safari, Firefox, Opera and IE9, but not in IE8 or 7 or on my iPod Touch or the client's iPhone.

I thought there must be something with the code I'd used or the way I'd implemented it so I began looking around at other options. VideoJS was a site I'd come across in my travels, and I liked the look of the skins they provided, so I thought I'd give their implementation a try. Same result. But their video played fine in IE so I wondered if there was something wrong with the way I was encoding the videos. I saw a mention of the Miro Video Converter and thought using that might make a difference, but no, that just stopped the videos playing in IE9 too. The poster image with play button would appear but when you clicked on it, it would just be replaced with a white spot.

After a while I determined that the Flowplayer Flash fallback wasn't working correctly for IE<9 and reverting to the one that came with the code output by EasyHTML5Video fixed that. But the IE9/iOS problem was still there.

And so began my quest for an answer that led me across various forums, Twitter and mailing lists. Some of the suggestions I got included:

  • Change the codecs the .mov file was exported with, that it should be AVC instead of AAC.
  • Change the bitrate the movie was encoded with.
  • Try different encoding software.
  • Make sure that I had added the mp4, webm and ogg mimetypes to my .htaccess.
  • Change the file's extension manually from .mov to .mp4.
  • Change the file's permissions.

It wasn't until I went back to basics that I finally found my answer, and I don't know why I didn't do it earlier, as it was the sort of action I'd often suggest to people who post questions on the web development forum I moderate. I created a ‘reduction’ test using the code from the VideoJS home page but served up with Concrete5.

Eventually I determined that the .mp4 hosted on VideoJS's servers would play fine, but a copy hosted on the test site wouldn't. Even though I'd already researched adding the different mimetypes to .htaccess, I went looking again and found an issue on HTML5 Boilerplate's Github page, which basically described all the problems I was having and laid the blame at H5B's .htaccess deflate configuration. This was fixed back in June but I'd be using an older copy of their .htaccess. If I'd kept my copy of H5B up to date, I could've saved myself serious time.

I love H5B and use modified versions of their CSS, HTML, javascript and .htaccess for all my projects, but I think this is a good example of a reason to keep these sort of things as up to date as possible.