Recently I had the opportunity to build an HTML5 video player for the iPad. I wanted to share the code and markup with you all, since I never got to use it. Just to make sure you all know, this is just specifically for the iPad since a presentation was supposed to be given on it. Nothing fancy. I just wanted it to play a video:
<meta name=”apple-mobile-web-app-capable” content=”yes” />
<link rel=”apple-touch-icon” href=”icon.png” />
<video width=”1024″ height=”750″ controls=”true”>
<source src=”videos/video-name.mov” /><!– WebKit video –>
So let’s take a look at this.
New HTML5 Doctype
<!DOCTYPE html> is the new HTML5 doctype which is reverse compatible, so you can start using it now if you’d like. I think the rest of the mark-up is pretty self-explanatory.
Apple iPad meta tags for controlling the viewport / iPad in full screen mode
The apple meta tag controls whether or not to put mobile Safari into full screen mode- or removing the address bars from Safari. Also note the link in the head to the apple icon. This is just incase the user bookmarks the page on their iPad home page, they’ll have a custom icon to look at.
Native Video Player for HTML5
The video tag enables you to play a video right in the browser without any third-party plugins like Flash, etc. This tag is also reverse compatible too. If the browser does not support HTML5, then you can place an object like Flash into the video tags just in case. And just like Flash, you can place alternate content in those tags just in case the use doesn’t have Flash! In this particular example, I have no done this since this was just specifically for the iPad. Please note the video file format as well. This video format will only play with Safari. For firefox you’ll need to use a convertor to convert to and .ogg file.
Also as a side note, don’t forget about compression. Some compression methods are acceptable, while others are not. You should be safe with just regular MPEG compression.
So have fun, learn something, and have at it. For more resources on building web apps for mobile safari, visit The Safari Reference Library.
Great resources there!
I’m sure by the time you read this there are a million free HTML5 video resources out there. When I did this, I had a hard time finding information on putting the iPad in full screen mode. I didn’t know that it was called the “viewport.” If you haven’t already, I’d also register on Apple as a developer and download the SDK so you can use the iPad/iPhone simulator.