How to Configure Flowplayer for an iPhone

If you use Flowplayer to display videos on your website, you may find that it doesn't work too well on the Apple iPhone or other iOS devices like the iPad and iPod Touch. However, Flowplayer is actually quite iPhone-friendly, provided you use a video format that's compatible with the iPhone, as well as add a few lines of extra code on your Web page. Once configured, your Flowplayer videos will play on the iPhone as soon as the visitor taps the "Play" button.

Because Apple iOS devices don't support Flash videos, you can't use Flash formats like FLV or F4V if you want the video to play on an iPhone. Instead, your video must be encoded in MPEG4 Part 10 format using the H.264 video codec. To ensure your video is compatible with early iPhone models, Flowplayer recommends using a baseline profile at Level 3.0 using one reference frame.

To convert videos to an MP4 format with the H.264 codec acceptable by the iPhone, you can download a free app like Handbrake or Free FLV to MP4 Converter. Another option is to use a free online service like Online-Convert.com, which can convert a variety of video formats as well (see Resources). After converting a video to MP4, or if your video is already in MP4 format, you can optimize it for the iPhone by opening the video in Apple iTunes. Once it's loaded, click the iTunes "File" menu, and then select the "Create New Version" option to create a new version of the file that is iPhone-friendly.

The embedded video link on your website must use the HTTP protocol if you want the video to be seen on an iPhone. Apple iOS devices can't use Flash-specific protocols like RTMP, so insert the link to the MP4 video in the "<a href>" value, just as you would with any other video format. For the JavaScript code, just add the "ipad()" call to the Flowplayer embedding call:

$f("player", "http://website.com/media/video.swf").ipad();

One last tweak you may want to make to your website for displaying Flowplayer videos on an iPhone is to include a splash image. Unlike most Web browsers, the iPhone doesn't support autoplay. Until your viewer actually touches the "Play" button, all he will see is a black rectangle where the video is supposed to be. To make the tweak, embed an image on your website, and then link the image to your video. Alternatively, use the Flowplayer's playlist option by including the "playlist: [" code, followed by the image URL, and then the video file's URL.

Information in this article applies to Flowplayer as of October 2013, as well as iTunes 11 and iPhones with iOS 7. It may vary slightly or significantly with other versions or products.