Setting up locally hosted HTML5 video
HTML5 Video is a great thing. There is a built in player in all of the major browsers, and ideally, it should be to throw a video on the page with the new video tag. No more outside hosting or struggling to get your flash player working inside your frames. Of course, the browsers still are all implementing this feature in different ways. Simple is coming. but we’re not quite there yet. It’s still not as difficult as it used to be.
The video tag is easy to use. It has two components, unlike the IMG tag. You have to wrap the <source> inside the video tag:
It doesn’t stop there though, because you have to specify the sources.
<source type=”video/ogg” src=”/video/myVideo.ogv” />
<source type=”video/mp4″ src=”/video/myVideo.mp4″ />
I start by rendering my video as a high quality .mov, and pass that to this website: http://www.online-convert.com/ twice, and those files get uploaded to the server, not the bloated .mov file.
More about the video file types: (taken from the w3schools website)
Browser MP4 OGG
Internet Explorer 9 YES NO
Firefox 4.0 NO YES
Google Chrome 6 YES YES
Apple Safari 5 YES NO
Opera 10.6 NO YES
* MP4 = MPEG 4 files with H264 video codec and AAC audio codec
* Ogg = Ogg files with Theora video codec and Vorbis audio codec
Confusing? Yup. But don’t worry so much. As long as you provide the two file types on the server, the browser will pass over any types it doesn’t like and play the first file it recognizes.
You can pass attributes to the video as well, for standard things like height and width, but also for things like whether or not the video preloads or auto plays.
<video controls=”controls” preload=”auto” width=”1000″ height=”480″>
Looks weird, I know, but this is the correct way to set it up. See the w3schools spec page for all attributes that can be used. http://www.w3schools.com/tags/tag_video.asp
It is possible to add a subtitle track for accessibility, but it is not natively supported by any of the browsers yet. For accessibility in general, i suggest using a JS plug in that will skin your player, create a flash fall back, and allow for sub titles. Personally, I recommend Video.JS, because it was easy to use and I was able to get it working inside a fancy box light box.
It isn’t uncommon for a server to not have the MIME types set up for these video files. It is fairly easy to add them using the web.config and the .htaccess files, and you should add them if you start getting “no files with the correct MIME type” errors from the browser.
For .htaccess it would look something like this: AddType audio/ogg .ogv
For the web.config file I recommend using IIS Express’s mime types configuration tool to add them. If you do this, make sure you do it at the site level for your project, and then remove and re-add each item, and it will save into the web.config file. I had issues with Visual Studio and editing in the remove/add lines inside the web.config file manually. Each time i did, it broke the file. The IIS express way is safer and relatively easy to do. Include this config file with your deployment, and you should have success.