Encoding and Delivering Video to the iPhone

This article will outline how to have your Brightcove videos encoded and delivered in a format that can be played back inside a native iPhone application or a web application. To differentiate between a native and a web based application — a native application is a custom application that is coded in objective-c and delivered through the iTunes app store. All those little apps that you have on your iPhone (Pandora, Evernote, foursquare, etc.) are examples of native applications. A web application is simply a web site that a user navigates to on their iPhone using the built-in safari browser. The same encoding and delivery technique can be applied to both the native and web based application.

Encoding

The iPhone supports the following codecs:

• File container: MPEG-4
  
• Video codec: H.264, baseline profile
  
• Audio codec: AAC 

In addition to making sure you use a supported codec, you will want to deliver the videos at an encoding rate that can be expected to play back reasonably well on a mobile device. You need to find a balance that will not take too long to buffer while still delivering a high quality viewing experience. Brightcove recommends the following data rates for your video and audio channel in your file:

• Total data rate: 256kbps
• Video data rate: 192kbps
• Audio data rate: 64kbps

If you are using Brightcove to encode your videos, then we will output files that match these specifications when you choose to encode your videos to H.264 (and not VP6) and create multiple renditions. To ensure that your videos are encoded to multiple renditions in the H.264 format do the following:

• If you're using the Media Module to upload your videos, ensure that the 'Upload Settings' screen looks like this:
  

• If you're using FTP batch ingest to upload your videos ensure that the encode-to parameter is set to MP4 and that the encode-multiple parameter is set to true. For more details, consult the batch manifest DTD reference.

• If you're using the Media API to upload your videos, ensure that the encode_to parameter of the create_video method is set to MP4. Additionally, make sure that create_multiple_renditions is set to true.

Delivery

The iPhone supports only the HTTP protocol for delivery of video files — FMS based RTMP streams are not supported. That means that you need to ensure that your files are set up for HTTP based delivery. Your Brightcove account is usually configured for either progressive download (PD) (HTTP) or streaming (FMS) (RTMP) based delivery. You can check what delivery mechanism a particular file is using by going into the Media module, selecting a file to edit, and then checking the 'Video Files' tab to make sure that the 'Delivery Type' of your renditions is 'Progressive Download'. Here is a screenshot that shows what the Delivery Type should look like:

 If your files are not showing up as Progressive Download, then contact Brightcove support.

Retrieving the Video URL

Now that you've made sure that your files are being encoded correctly and are being delivered using a protocol that the iPhone understands, the next step is to retrieve an appropriate URL that can be fed to the native iPhone video player. This is done by using Brightcove's Media APIs to query for your videos. Part of the data returned in the Media API query is a list of renditions for a particular video and the associated URLs of those renditions. Read more about how this works in the Media API. The image below shows the structure of the JSON response from a Media API call with the first rendition in the renditions list expanded.  

Click to expand.

To retrieve the correct HTTP URL to use in your application, go through the array of renditions and find the rendition whose encodingRate is closest to 256kbps. You can then pass this URL to the iPhone player either in a native application or a web application. As an example, the rendition that is expanded in the image above shows a URL of:

http://brightcove.vo.llnwd.net/d7/unsecured/media/5843304001/5843304001_8374171001_Bugs-Bee-iStock-000005443233PAL.mp4

We could write this URL into the HTML video tag in order to enable playback of this video on the iPhone. Here is our resulting HTML:

<video id="trailerVid" 
       poster="http://brightcove.vo.llnwd.net/d7/unsecured/media/5843304001/5843304001_8374170001_th-5843304001-vid8373469001-img0000.jpg?pubId=5843304001" 
       width="480" height="360" controls="true">
  <source src="http://brightcove.vo.llnwd.net/d7/unsecured/media/5843304001/5843304001_8374171001_Bugs-Bee-iStock-000005443233PAL.mp4" 
       type="video/mp4"/>
</video>