27 August 2011
HTML5 Video Web Server Configuration Gotcha
While finishing up a project over the weekend I ran into an issue where the video player just displayed an infinite loading screen rather than actually playing. Odd. I checked the JavaScript console to see if there were any JavaScript errors or if there was a 404 request for the video, which neither of those were actually the case. I tried to visit the file directly, and what do you know, it’s asking me to download the video, it didn’t start playing in the browser like it should’ve. After realizing the only reason this would happen would be because the server must not be returning the correct Content-Type header and the browser didn’t know what to do with it, I gathered the MIME types for the few videos formats we were using and updated the nginx mime.types file and restarted the server. What do you know, that solved the problem and after refreshing it displayed the video and it played as expected. So to help anyone else who may have ran into this issue and not really sure what to do, I have both the nginx and Apache solutions for you. Hopefully soon all web servers include these new MIME types to their default configuration files, but until then be sure to include these in your server setups for future projects.
Apache