This is a message.

HTML control bar for the iPad

Use Javascript to effortlessly play videos on the iPad

standalone demo

This is same demo as the Apple-style controlbar with iPad support enabled. This demo has device simulation enabled so it displays the HTML5 video player on all browsers that support the HTML5 video tag. You can check this page on your iPad to see how it really works!

HTML

The video container refers to the video file as usual. Note that for iPads the video should be in a format supported by Apple QuickTime.

<a class="player plain" id="player"
href="http://stream.flowplayer.org/flowplayer-700.mp4">
<h3>Note: HTML5 video tag is being used on all browsers</h3>
<img src="/media/img/player/btn/play.png" alt="Play video"/>
</a>
 
<!-- HTML-based controlbar -->
<div id="appleControls" class="controls"></div>

HTML

Configuration

$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
 
// disable default controls
plugins: { controls: null }
 
// .. and use JavaScript based controlbar plugin
// and the iPad plugin so that this also works on the iPad
}).controls("appleControls").ipad({ simulateiDevice: true, controls: false });

JavaScript

Using the iPad plugin in browsers without flash

The iPad plugin can also be used to play mp4 videos on desktop browsers without flash.

var video = document.createElement("video"),
idevice = /ip(hone|ad|od)/i.test(navigator.userAgent),
noflash = flashembed.getVersion()[0] === 0,
simulate = !idevice && noflash &&
!!(video.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, ''));
 
$f("playerContainer", "/path/to/flowplayer.swf", {
// player configuration goes here
}).ipad({simulateiDevice: simulate});

JavaScript

View the entire discussion thread on this topic.