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
Trey Smith does internet marketing and consulting. He also likes to screw off as much as possible and his favorite color is pinky.
{ 16 comments… read them below or add one }
Hey Trey awesome tech post mate, and thought you may be able to mention it to your Cousin Frank, as I recently bought his Mass Control Syndicate training and can’t watch it on my iPad , bummer dude
But on the up side love going through you iPhone App training course on the iPad
Cheers
Owen
Though this article is a little old to post on now, I felt that it would be good to mention something helpful.
Rather than having a “Click here if you’re on an iPhone or iPad” link, you can actually embed <object> tags inside of <video> tags. This way, if they are using an iPhone or iPad, it’ll play the video directly on the page, and if they are using a browser that doesn’t support it, it can fall back to flash video instead…
<video controls preload=”none”>
<source src=”VIDEO.m4v” type=”video/mp4″ />
<object width=”320″ height=”240″ type=”application/x-shockwave-flash” data=”VIDEO.swf”>
<param name=”movie” value=”VIDEO.swf” />
<param name=”flashvars” value=’config={“clip”: {“url”: “http://yourSite/VIDEO.swf”, “autoPlay”:false, “autoBuffering”:true}}’ />
</object>
</video>
With the above markup, it should play the video for the i-Devices, and if the video doesn’t work for the current user’s device, it’ll fall back to using flash in the same area on the page.
Not necessary, but useful if you don’t want people to have to leave the page to view a video.
Though this article is a little old to post on now, I felt that it would be good to mention something helpful.
Rather than having a “Click here if you’re on an iPhone or iPad” link, you can actually embed tags inside of tags. This way, if they are using an iPhone or iPad, it’ll play the video directly on the page, and if they are using a browser that doesn’t support it, it can fall back to flash video instead…
With the above markup, it should play the video for the i-Devices, and if the video doesn’t work for the current user’s device, it’ll fall back to using flash in the same area on the page.
Not necessary, but useful if you don’t want people to have to leave the page to view a video.
I have something to add, if you want a cool image as your thumbnail for the video (that image you see with the big blue play button on it if your watching on an iphone or ipod touch) you can add a poster attribute to the code with the image you want
E.g.
…..
I hope some people find this useful
WOW Dude this is Awesome love the instructions and this will be very helpful with my soon to be product launches coming up.
Thanks Trey
You are the Man!
Kind Regards
Shaun
There are plenty of different solutions out there to get one page with support for all browsers.
Firefox does support HTML5, what it doesn’t support is mp4 natively, you need to provide an alternative version of the video in ogg format.
Kylmä kalja!
Cerveza!
The video plays on Chrome.
Hopefully it won’t be long before the Firefox browser is updated to support HTML5. Thanks for the post. Will be taking action on this immediately.
Cold squeezer!
Very cool. And the html5 plays just fine in Chrome browser.
Thanks, Trey! Good stuff that I KNOW many people are curious about. You just made it super easy for anyone to do this, quick like a bunny. Thanks man!
Sweet – and witty too!
Thanks for shortening the learning curve for me on that – it’s always been a frustration to come across videos on iPhone then have to wait to get back to a computer to see them.
Cheers – Andy
(off to have a ‘cold squeezer’ after all that commenting!)
That is an awesome post dude!
It totally sucks that flash does not work on iPad – but oh well, I guess that means there will be many other nice opportunities coming along as a result.
Cheers for the detailed instructions – got this one bookmarked!
Gideon Shalwick
Hey trey – great post and very helpful in converting my video files to html5 compatible format that plays on the iphone and ipad.
You might want to check out http://videojs.com/ which is a open source video player for html5 that still enables people with non html5 browsers (like IE) to see the video.
Fantastic domain by the way – pennytraffic.com > good buzz is building around this so looking forward to learning more!
cheers
tijn @ imrat.com
Hey Trey,
I beg to difer with you that http://treysmithblog.com/html5 is not viewable in a computer browser, have a look here http://screencast.com/t/ZGFmNjYz
There is also another place that is able to help, have a look at my blog later today for a review on how I got it working, mind you, I might have a few niggles to iron out.
Hugh
{ 1 trackback }