Published on June 5th, 2010 | by treysmith19
How to make HTML5 videos for iPhone and iPad.
How To Make HTML5 Videos For iPhone & iPad
*I did this with Quicktime Player on the Mac. They make a quicktime for windows as well that you can download here. I’m assuming it works about the same way. But I could be wrong. But probably not. But it’s possible. Not likely though.
Step 1 – HTML5 Video for iPhone/iPad
Open up your video file in Quicktime. Just right click it and choose “open in quicktime”.
Whew! Hard stuff. Now take a break and drink a beer.
Step 2 – HTML5 Video for iPhone/iPad
Now choose “File” then “Save for Web”… WHEW! Like working in a damn coal mine all day.
Time for another cold squeezer! YOU DESERVE IT!
Step 3 – HTML5 Video for iPhone/iPad
Think we can all agree that “Cold Squeezer” is the best name ever for beer.
Ok, now you can choose which quality setting you want to use.
I just chose the top one (1 mbit/s) and it looks ok. Kinda grainy really, you can see an example by going to www.treysmithblog.com/html5 on your iPhone or iPad. NOTE: That link will not work on a regular browser.
If it’s a short video you can go with “Computer”. A medium sized video can go with “iPhone”. A super long ass video can run with that ol’ “iPhone Cellular”.
Ain’t nuthin’ to it.
Step 4 – HTML5 Video for iPhone/iPad
Now you wanna rename the file so it’s something short without spaces (no good reason for this).
Step 5 – HTML5 Video for iPhone/iPad
After you rename it something totally awesome, then just drag it to your server via whatever FTP program you use.
You ready to watch the magic happen? Yeh baby. Magic time. UNGH.
Step 6 – HTML5 Video for iPhone/iPad
Almost done there, Captain.
Here’s the last step:
Make an HTML file that has the line of code below when you want to show the video on the iPhone/iPad.
So if you are doing a sales video, you can have a headline, then this line of code (where the video will show) and then a “buy it now” button below that.
Here it is:
<video controls preload="none"> <source src="VIDEO.m4v" type="video/mp4" /> </video>
You CAN just put that line of code into an HTML file with nothing else, like I did with index.html in the picture below:
Congrats… like Bachman Turner Overdrive in 1974 you are Takin’ Care of Business. Everyday. Just taking care of that business. Every way.
So that’s it… Not really that hard to do and probably won’t take you more than a few minutes to setup.
And who knows, if you’re selling stuff online it might make you a few extra bucks.
Alright, thanks for letting me nerd out for a minute.