How to make HTML5 videos for iPhone and iPad.

by treysmith on June 5, 2010

Hey Guys,

Here’s the setup:

I was working on a sales video for said new fancy product and was reminded of a nagging yet familiar  problem:

As you probably know, you can’t view most videos on the iPhone or the iPad.

Ol’ Stingy Job’s (that’s what Steve’s old lady calls him) will only let you view HTML5 video on the iPhone and iPad and not the classic flash video that is used in 90% of the sales videos you see online.

Well, this got me thinkin’ (which we know is typically a bad idea).

I would assume the average person doesn’t purchase a LOT of items on the iPhone.  It happens… but probably not a ton.

Now, the iPad I believe is a different story.  I’ve got one and love it… also bought a 73″ TV on it earlier today.

I would bet most of the people who own iPad’s, especially the early adopters, have a little expendable cash.  That is probably the kind of person you want to get your message to, right?

I felt the same way, so I decided to jump on Google and find the easiest way to make videos work on iPhones and iPads.

Figured it couldn’t be to hard. Unfortunately I was DEAD WRONG.

Not only was it hard, one of the ONLY “easy to use” solutions was trying to get upwards of $100 bucks a month to do it for you.

So that sucks, but I got some good news for ya.

After screwing around for an hour I made a super easy system to do this.  And even made some really bad pictures to show you how I did it.

So here ya go, but first a…

Quick Note: This trick will make a video player that works on JUST iPhones and iPads.  It’s NOT an all in one player.  You will have a regular flash video, then below it say “Click here if you’re on an iPhone or iPad“.  Anyone that clicks that link from an apple device will see a full on HTML5 Video.  From some other browsers (like firefox) it will NOT show.  So you need to make this an ADDITION to your main video. Cool?

Alrighty, now that that’s out of the way, let’s hop to it:

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:

DONE SON!

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.

Here’s a demo again of a quick 1 minute video I tested this on, and remember it ONLY works on the iPhone/iPad.  This link won’t show up correctly in most computer browsers:

http://www.treysmithblog.com/html5

Alright, thanks for letting me nerd out for a minute.

Talk soon,

Trey

Be Sociable, Share!

About

Trey Smith develops iPhone Apps (including the Top 25 game, Jump Pack) and has a couple internet marketing companies. He's been a full time internet marketer for 6 years and currently lives in San Diego.

{ 16 comments… read them below or add one }