This is a message.

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 on iPad. With the normal embedding method using flowplayer.js it always plays fullscreen as shown in this demo and on iPhone and iPod due to device restrictions.

  • Supports playlist based splash images.

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 should stick with:

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://stream.flowplayer.org/flowplayer-700.mp4" class="player"
style="display:block;width:425px;height:300px;margin:10px auto"
id="player">
</a>

HTML

JavaScript coding

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

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

JavaScript

Additional demos

Configuration

The following configuration options are supported:

NameDefault ValueDescription

controls

true

Show the video player controlbar? Set this to false when you use the JavaScript controlbar plugin with iPad

simulateiDevice

false

Uses the HTML5 video tag on all web browsers - not only when the user agent is one of the Apple devices.

validExtensions

mov|m4v|mp4|avi|mp3|m4a|aac|m3u8|m3u|pls

Regular expression matching filename suffixes for files which are considered for playback, thereby dropping files which can only be played in Flash automatically from playlists.

To disable the suffix check, set this property to null or ''.

ipadUrl

Furthermore the plugin provides this additional clip property:

Clip PropertyDefault ValueDescription

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.13.js

source code

flowplayer.ipad-3.2.13.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 with this script, please turn to the Flowplayer Flash plugin forum with a link to a minimal sample page (no extra html, css, javascript) demonstrating the issue.