With the launch of the iPad earlier this week a lot of video sites have been frantically reworking their code so it will display correctly. The iPad doesn’t run flash (which is the most popular video distribution platform) but does run videos using HTML5. I don’t believe that HTML5 is a flash killer yet. It would be great not to have to install different plugins for your browser, but there aren’t any browser standards right now.
File Formats
Right now there isn’t a standard for HTML5 video. Safari and Chrome use H.264 video, which is usually rendered out as mp4, while FireFox uses the OGG format. This means that both file formats have to be uploaded to the server. Internet Explorer does not currently support HTML5 video. There are rumors that IE9 will support it, but that is a ways off.
Hopefully a format standard will be established soon to help control the duplication of video content.
Converting to MP4 and OGG
I have been using an open source tool called Super. The majority of the files I receive are MOV’s from our student videographers. I used Super to convert my files to Mp4 and OGG formats.
Demo
This will work in the latest versions of Firefox, Safari and Chrome:
Code
<video controls autoplay>
<source src="alumni.ogg" type="video/ogg" />
<source src="alumni.mp4" type="video/mp4" />
</video>
Yup, that’s it. When you add controls within the <video> tag, the player will add playback controls automatically. They do look different if you are on a mac or pc. Autoplay is another option that you can add or remove.
Within the <video> tag there are two source tags, the first one is for FireFox and the second one is for Safari.
This article was published on Wednesday, April 7th, 2010 at 10:30 am. View other posts in the Code, video category.
If you found this article helpful please share it. If you have questions please ask them in the Comments section.