Tech html5

Published on June 5th, 2010 | by treysmith

19

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.

Talk soon,

Trey

Be Sociable, Share!

Tags: , , , , , , , ,


About the Author

Trey Smith is the founder of Kayabit, a game company with over 10,000,000 downloads on mobile devices, Secret Headquarters, Inc, a marketing company that teaches entrepreneurs how to build their businesses and L-System records, a house music label from San Diego, CA.



19 Responses to How to make HTML5 videos for iPhone and iPad.

  1. Malik says:

    Awesome love the instructions and this will be very helpful with my soon to be product launches coming up

  2. Great Tut Man, Awesome, huge thanks!!

  3. Owen says:

    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

  4. Travis Leptich says:

    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.

  5. Travis Leptich says:

    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.

  6. Alex says:

    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

  7. 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

  8. Andy Beard says:

    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.

  9. Steve says:

    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.

  10. Jason says:

    Very cool. And the html5 plays just fine in Chrome browser.

  11. Mike Paul says:

    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!

  12. 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!)

  13. Pingback: Play Video on your iPhone OS device | Hugh Fraser

  14. 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

  15. imrat says:

    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

  16. Hugh Fraser says:

    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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Back to Top ↑