Today I discovered that neither Firebug (for Firefox 3.6) nor the Web Inspector (for Safari 5.0) were much help when it came to debugging some HTML5 <video> tag issues. My video worked in neither browser even though everything appeared to be done correctly.
While I got it working eventually, the hardest part was finding a place to begin. To help others that may run into the same problem, here are a couple of starting points to get you on your way.
Are the Files Uploaded?
This is one of those stupid things that is easy to overlook in the rush of it all. You’ve uploaded the files, right? I’ve found the best way to ensure that the files are there is to view your page’s source, copy the URLs from the source and paste them right into a new browser window. If your files are downloading, you’re good to go.
Sometimes you think you’ve uploaded files but haven’t. Sometimes you try to upload files but don’t (maybe you don’t have permission to do so and your FTP client is bad at telling you so). Sometimes the files have started uploaded but haven’t finished yet. This error seems the least likely, and thus becomes one of the easiest things to overlook.
Are You Behind HTTP Authentication?
The site I was working on today is currently behind basic HTTP authentication. The video files are being served off of the same document root as the rest of the website, and thus were also behind the same basic HTTP authentication. Even though my browser session was authenticated and I could view the site, Safari just would not load the video. My browser’s player hung on the “Loading…” state.
The only solution I could find was to remove the authentication. Once I did that (with no other changes), Safari magically started working.
There must be an explanation as to why this was, but I have not yet figured it out. Does anyone have any ideas on why this works this way?
Are Your MIME Types Set?
Although at that point Safari was in working order, Firefox wasn’t. I did the “is this uploaded” test and Firefox downloaded the video as expected, but couldn’t play it inline in the video player. I then tried the “is this uploaded” test in Safari and got megabytes upon megabytes of binary hullabaloo.
The problem was an unknown MIME type. While Firefox demands this type of file for videos, it cannot seem to recognize the format without a little help from the server. This is quickly remedied by adding just one line in your .htaccess file:
AddType video/ogg .ogv
A quick refresh and my video was loading nicely.
Any Other Ideas?
If you have any experience with HTML5 video gotchas, I’d love to hear them. Drop me a line and I’ll update this post with things that could be helpful to others.
