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:
[html]
<!DOCTYPE html>
<head>
<meta charset=”utf-8″>
<meta name=”apple-mobile-web-app-capable” content=”yes” />
<title>My Video</title>
<link rel=”apple-touch-icon” href=”icon.png” />
<style>
body {margin:0;}
</style>
</head>
<body>
<video width=”1024″ height=”750″ controls=”true”>
<source src=”videos/video-name.mov” /><!– WebKit video –>
</video>
</body>
</html>
[/html]
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 markup 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 fullscreen 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 not 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.
Cheers!
What are you using to display code in your blog posts? Looks great!
Thanks Eric. It’s called “SyntaxHighlighter Evolved”
I have the html code for music on my web site but I cannot get the music to play on any of the notepads, Ipad, Visual Land, etc. Could you please send me the html code that I can have for my web pages and for the notepads both to hear.
Thank you so much.
Norma
I am attempting to develop a web app using HTML5 video to run on the iPad, and I am encountering the same problem as Norma – the sound of the video won’t play, though it works just fine on other platforms. I have isolated the problem to the tag. Without the tag the page runs in the regular iPad Safari browser (even if you have saved it to the desktop). and the sound plays just fine. I have ios version 6.1.3 running on my iPad. So Allison, do you know what version of ios you were running when it worked? I strongly suspect it’s a bug in the version of ios that I am running, and I want to nail down as many details as I can before I submit the bug to Apple.
Thanks so much. Working great. Is there a way to code in auto play?
Does all browsers today play HTML5 video?
Does this work on Windows OS as well?