HTML5 Video for iPad

Not long ago I seen a tweet by Ed Dale, here is the link, It was how Trey Smith got HTML5 working on an iPad, I have been able to do this also!

Here how I have done my set up, I saw a tweet (sorry can’t remeber who it was), but it was along the lines that LongTail Video, had an Beta version of they’re really nice Flash Player, JW Player, I was on the home page on LongTail Video, and I seen this link to a service called Bits On The Run & I thought, nice service, I think I’ll give the free trail a go and see what it was like, it was only when I was on the inside, I saw the video you upload to the service was in H.264, which if you don’t know already, is the recommended format for HD Video playback on the web.

BINGO!Now before we go on, let me tell you what Bits On The Run does for you as a service.

It will host (although, you can plugin your Amazon S3 account), stream & encode! I knew I was onto something when I saw what the service does and the fact that you can upload H.264(HD) Video.

I don’t have an iPad but I do have a iPod, these two gadget run the iPhone OS 3 Software so I was almost certern that If the video I uploaded to the service played on my iPod, it would play on an ipad.

I really am not that sure how you get a H.264 video but as the service encodes the video as well I think you would be able to upload say a Flash video and it will spit out a H.264 video for you! Even less work for you!

So here is how I would use the serive for your iPad videos.

Get you video ready for upload, I am using a trial version of Camtasia and as I am on a Netbook I have to flip the screen 90°s (it’s on it’s side) like so:

You’ll notice how narrow it is compared to to the height, now if I try to do this in the normal way I wouldn’t be able to see the buttons on the screen! Handy tip!

Once you have your video encoded, you can begin to upload your video.

Log in & You will see on the video tab there is a video upload link, click the link. it will display a dialog box, find you video file and click Save.

Give your video time to upload you’ll see this screen next:

Click For A larger Picture

You can pick a Player size from the dorop down box & click Regenerate embad codes, this then gives you the embed code for your web site like below:

<script type=”text/javascript” src=”http://content.bitsontherun.com/players/aOiQEgef-bbid4B4z.js”></script>

Now for this to work on a blog you’ll want to click on the HTML tab so you can enter the code otherwise it will appear like it does above! For a normal HTML editor you want to do the same thing find where you enter Raw HTML not text but HTML code.

Hey Presto You now have videos that can be played on an iPad!!!

Hugh

BTW Here is link to the Bits On The Run.  It is a stright link, none affiliated!

This entry was posted in Marketing, Videos and tagged , , , . Bookmark the permalink.
  • Sally_Neill

    Hey Hugh, great post, way too technical for me, but I am sure it would help lots of people, Sally :)

  • http://www.hugh-fraser.co.uk/ Hugh Fraser

    Hey Sally,
    Perhaps I over complicated, I have a very bad habit of doing that :( It is amazingly simple. Once you have done it once, you'll be able to do it again and again without instruction

  • Rich

    Do you have an iPad Hugh?

  • http://www.hugh-fraser.co.uk/ Hugh Fraser

    Hi Richard,
    I don't have an iPad as yet but I do have an iPod Touch and since these two work on the iPhone OS (Soon to be iOS 4) I am 90% sure the video above works on a iPad as it works on my iPod Touch.

    Hugh

  • Jeroen Wijering

    Hey, thanks for this small tutorial on our service!

    Not sure if you already noticed, but as of today your Bits on the Run videos supports the native iPad controlbar (with fullscreen feature). The iPad will also receive a higher-resolution video than iPhone/Nokia/Android/BlackBerry, so it'll still look good.

  • http://www.hugh-fraser.co.uk/ Hugh Fraser

    Hey Jeroen,
    No Worries, I love Bits On The Run, infact I love all of the Long Tail Video Products.

    Hugh

blog comments powered by Disqus