How to Configure Flowplayer for an iPhone

Remember to test your video on an iPhone after uploading it.
... Justin Sullivan/Getty Images News/Getty Images

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.

1 Video Configuration

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.

2 Converting Video

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.

3 HTML and JavaScript Configuration

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();

4 Adding a Splash Image

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.

5 Disclaimer

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.

A published author and professional speaker, David Weedmark has advised businesses and governments on technology, media and marketing for more than 20 years. He has taught computer science at Algonquin College, has started three successful businesses, and has written hundreds of articles for newspapers and magazines throughout Canada and the United States.

×