iPad & iPhone

Make your videos play in iPhone/iPad/iPod

Play your videos on Apple devices effortlessly

The iPad plugin provides support for iPad/iPhone and iPod touch devices to play your videos without any additional code.

The above video plays on your iPad and even on the iPhone and iPod like you expect it would. The only difference to the Flash version you see in your desktop browser is that playback does not automatically start, even though autoPlay is enabled by default in Flowplayer. But iOS does not allow to play videos automatically on page load. For consistency we therefore recommend embedding with a splash image.

Features

Flowplayer supports iPad and iPhone even without this plugin. This support comes from the fallback embedding features that are included in the flowplayer.js script. This plugin offers the following additional features and benefits that are not included in the default fallback of flowplayer.js:

Exposes the full Flowplayer API to be used from JavaScript - except for some features which iOS does not support yet, like the onSeek event or scripted volume control.
Provides compatibility with the playlists and controlbar JavaScript plugins.
The video plays embedded in the page. With the normal embedding method using flowplayer.js it always plays fullscreen like shown in this demo.

To really see how this works use your iPad or iPhone to view the demo on this page. If you view this on some other device/browser that supports Flash you will see the default Flowplayer.

Video Encoding

As iOS does not support Flash, videos in Flash format - FLV, F4V etc. - cannot be played on iDevices.

Videos deployed on iDevices must be encoded in the MPEG4 Part 10 format using the h.264 video codec. Within the MPEG4 specs make sure that your videos meet the constraints of the devices of your target audience. Older and small (iPhone, iPod) iDevices allow only lower h.264 profiles and levels because higher levels and profiles are expensive to decode. To achieve maximum backwards compatibility with early iPhones and iPods you must use the Constrained Baseline Profile (CBP) at maximum Level 3.0, and the video's dimensions must not exceed 640x480 pixels. Moreover, you should not permit more than 2 reference frames to avoid the risk of square artifacts during playback.

Ensure that the transcoding program or service of your choice provides the appropriate options, and, if you can, test a sample video created with your encoding settings by importing it via iTunes onto an iDevice which matches your desired backwards compatibility.

HTML Coding

The player container has the video URL in its href value. Note that your media must be available via the http protocol. If you deploy via a Flash specific protocol like rtmp, you must make a version of your video available via http as well. You can then configure this video to be played on iOS by specifying the ipadUrl in the clip object or for the respective playlist item.

<!-- player container-->
<a href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-ios.mp4"    class="player"
    style="display:block;width:425px;height:300px;margin:10px auto"
    id="player">
    </a>

HTML

Note: playback of audio files is currently not supported.

JavaScript coding

We just add the ipad() call to the Flowplayer embedding call.

$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf").ipad();

JavaScript

Additional demos

Configuration

The following configuration options are supported:

Name	Default Value	Description
`simulateiDevice`	`false`	Uses the HTML5 video tag on all web browsers - not only when the user agent is one of the Apple devices.
`controls`	`true`	Show the video player controlbar? Set this to `false` when you use the JavaScript controlbar plugin with iPad

ipadUrl

Furthermore the plugin provides this additional clip property:

Clip Property	Default Value	Description
`ipadUrl`	value of the clip's `url` property	Alternative HTTP URL pointing to a media file playable on iOS - configured as clip property in the clip object

Download

flowplayer.ipad-3.2.9.js	source code
flowplayer.ipad-3.2.9.min.js	minified with Douglas Crockford's minifier

Please right-click and choose "Save link as..." (or similar)

See the version history for this tool.

NOTE We are no longer providing packed scripts. Although they may have smaller file size they offer less performance than minified scripts. See details from JavaScript Library Loading Speed.

Found a bug?

If you encounter problems in this script, please send a bug report to the bug reporting forum. If you have a problematic page, including a direct URL to that page is by far the most effective way of helping us to find a bug.