Always fresh new new things!

Web Content Development primer for iPhone [Part 2] : Media

without comments

[Find the Part 1 here.]

First obstacle you will face to develop content for iPhone – there is no Java or Adobe Flash support (not yet, but we can always hope).
In videos iPhone supports .mov, .mp4, .m4v, and .3gp. iPhone uses the native video player application to playback video when video is embedded in your webpages. Video automatically expands to the size of the screen and rotates when the user changes orientation. The controls automatically hide when they are not in use and appear when the user taps the screen.

Creating Video for iPhone

In landscape orientation, the iPhone screen is 480×320 pixels. Users can switch the view-mode between scaled-to-fit (letterboxed) and full-screen (centered and cropped). You should use a size that preserves the aspect ratio of your content and fits within a 480×360 rectangle. 480×360 is a good choice for 4:3 aspect ratio content and 480×270 is a good choice for widescreen content as it keeps the video sharp in full-screen view-mode. You can also use 640×360 or anamorphic 640×480 with pixel aspectratio tagging for widescreen content.

The following compression standards are supported:

  1. H.264 Baseline Profile Level 3.0 video, upto 640×480 at 30fps. Note that B frames are not supported in the Baseline profile.
  2. MPEG-4 Part2 video (Simple Profile)
  3. AAC-LC audio, upto 48kHz

The best tool to encode optimize videos for iPhone is Quick Time Pro, the iPhone video export is set as a default option there.

Creating a Reference Movie
A reference movie contains a list of movie URLs, each of which has a list of device sniffer. When opening the reference movie, a playback device or computer chooses one of the movie URLs by finding the last one that passes all its tests. Tests can check the capabilities of the device or computer and the speed of the network connection.

If you use Quick Time Pro to export your movies for iPhone, then you already have a reference movie. Otherwise, you can use the Make Ref Movie tool (Free) to create reference movies.


Embedding Movies in Web pages

iPhone does not decode video until the user enters movie playbac kmode. Consequently, when displaying a web page with embedded video, users see a ugly gray rectangle with a Quick Time logo until they press the Play button. To avoid this, use a poster JPEG as a preview of your movie. If you use Quick Time Pro to export your movies for iPhone, then a poster image is already created for you.)
For example, if you are using an <embed> HTML element, provide a preview image that is displayed in the web page by specifying the image for src, the movie for href, the media MIME type for type, and myself as the target:
<embed src="poster.jpg" href="movie.m4v" type="video/x-m4v" target="myself" scale="1"...>

Configuring Your Server

HTTP servers hosting media files for iPhone need to support byte-range requests, which iPhone uses to per form random access in media playback. (Byte-range support is also known as content-range or partial-range support.) Most, but not all, HTTP 1.1 servers already support byte-range requests.

If you are not sure whether your media server supports byte-range requests, you can open the Terminal application in Mac OS X and use the curl command-line tool to download a short segment from a file on the server:

curl --range 0-99 http://example.com/test.mov -o /dev/null

If the tool reports that it downloaded 100 bytes, the media server correctly handled the byte-range request.
If it downloads the entire file, you may need to update the media server.

Ensure that your HTTP server sends the correct MIME types for the movie filename extensions shown in Table

That’s all for media. Coming up next, primer for dynamic web content on iPhone.

[Cross posted at Macchiato]

Written by anol

December 29th, 2008 at 5:38 am

Leave a Reply