How to stream video to Mobile / Smartphones – iPhone, Android, and Blackberry

Tuesday, 03 August 2010 23:02

Learn how to stream high quality video to a Mobile / Smartphone such as the iPhone, Android, and Blackberry.

Skip the background and go straight to how to stream video to a Mobile / Smartphone.

Background

The amount of visitors using Mobile / Smartphones to view my company's website has doubled over the last 6 months from 2.5% of all visitors to 5.0% of all visitors. This trend is common, and I read a report recently that said that by the end of 2013, people using Mobile / Smartphones to view websites will account for more than 50% of all visitors. In some countries, this is ALREADY the case.

With this is mind, most Web developers are beginning to create Mobile / Smartphone versions of their websites, that are specifically created for resolutions of 320 x 480 pixels (the average smartphone screen resolution), have no mouse hover overs (as that isn't supported on Mobile / Smartphones), and have menu options that are "fat finger proof" and are large enough to be selected on the touch screen of a modern Mobile / Smartphone.

One key component to any website is video. However, you can't just use your existing web video technology, such as using the ubiquitous Flash Video Player embedded on the web page playing an MP4 (H.264 encoded video) via progressive download. Why? 1) Flash isn't supported on all Mobile / Smartphones, such as iPhone and Android 2.1 (I don't know about Blackberry), so you can't play your video with a flash player, and 2) MP4 H.264 encoded videos are too big to download via a cellular 3G network, and are probably NOT encoded correctly for a Mobile / Smartphone. Mobile / Smartphones require specially encoded videos.

Solution – how to stream video to a Mobile / Smartphone

While flash may not be supported on all Mobile / Smartphones, and thus you don't have the option of using a Flash Video Player, the iPhone, Android, and Blackberry DO have their own video players. So while you can't play video embedded on a web page, you can click a link that launches the native Video Player for that device which is actually better, as the video will then be displayed full screen and be practical for the visitor to view.

So now the only remaining challenges are 1) encoding the video for smartphones, and 2) streaming the video to the Mobile / Smartphone. This is where AudioVideoWeb.com comes in. AudioVideoWeb overcomes both challenges and is remarkably inexpensive compared with other similar companies such as LimeLight Networks who, at the time of writing this article, is used by ESPN for their Mobile content. But don't think that AudioVideoWeb is a mickey mouse startup company, it has a very impressive client list, with names such as Sears, ABC, AT&T and Martha Stewart.

How to use AudioVideoWeb

Setup a FREE TRAIL account by going to https://www.audiovideoweb.com/orders?m=default&a=main. Click the On Demand tab and click the top Select button which corresponds to the free 10 Day Trail.
You only need to check Flash | MP3 | HTTP | Progressive but it won't hurt you to check any of the others if you wish to experiment.
Walk through the rest of the signup process, you will be asked for Credit Card info, but you won't be charged within the 10 day trial period.
Once you've received your signup confirmation email which contains your username and password, logon to AudioVideoWeb.com and you'll see the home page.
Click your name in the bottom left corner under Active Accounts. Then click the File Management tab.
From the dropdown menu select the web folder.

AudioVideoWeb File Manager

To the right of the dropdown menu, click the Add button and select the video you wish to stream to Mobile / Smartphones, it's ok if the video is a normal MP4 you've downloaded from YouTube, you will encode it for Mobile / Smartphones next. Once you've selected it, click the Upload button. There is no real progress indicator except for an image download indicator at the bottom of your browser.
Once the upload has finished, right-hand click on the web folder (see below) and select Reload to make sure the newly uploaded video is shown.

AudioVideoWeb Web Folder

Right-hand click on the newly added video and click Encode. In order to get the best results for an iPhone, Android, and Blackberry, you will have to encode that same video differently, as a lot of Blackberry Smartphones do not support the higher resolution videos that an iPhone and Android do.

For iPhone and Android

If video is widescreen format – Under Video Size select Specify custom size and quality, and select 480x270 (16:9) from the Preset dropdown menu (making sure Preset is still selected).

For 4:3 non-widescreen format - Under Video Size select Specify custom size and quality, and select Custom and enter 480 for the width, and 360 for the height (making sure Custom is still selected).

For Blackberry

If video is widescreen format - Under Video Size select Specify custom size and quality, and select 320x180 (16:9) from the Preset dropdown menu (making sure Preset is still selected).

For 4:3 non-widescreen format - Under Video Size select Specify custom size and quality, and select 320x240 from the Preset dropdown menu (making sure Preset is still selected).

Under Bitrate select Custom and enter 300 for the Video Bitrate and 64 for the Audio Bitrate. This in my opinion gives the best tradeoff between video quality and file size (speed of download, and thus how quickly the video starts to play).
Under Output Formats check Quicktime and select the Web folder from its dropdown menu, leaving H.264 MP4 checked.

AudioVideoWeb Encoding

Finally, click the Begin Encode button followed by the Close Window button to start the encoding. You don't have to wait for the first encoding job to finish before submitting a second. You will receive a notification email once the encoding job is finished, or you can perform #8 above to just refresh the folder to see when it's finished. The newly encoded video file will be the same filename with a "1" on the end.
I strongly suggest that you rename the newly created encoded video file with a suffix of how you encoded it. For example, original filename may have been skiinginutah.mp4. You may want to rename the encoded file to skiinginutah_480x270-v300-a64.mp4. To rename the newly created encoded file, just right-hand click on it and click Rename.
If you wish to create a directory/folder structure to organize your videos, just right-hand click on the Web folder name and click new folder. Right-hand click on the newly created folder to add subfolders, etc. To move a file to a folder, just drag it there.
Lastly, get the hyperlink to the encoded video file that you'll use on a web page, email, etc by right-hand clicking on the file and clicking Get Link. Then you simply copy and paste the hyperlink that appears on the right-hand side.