flowplayer iPad plugin 3.2.2 not working (mostly) Created Aug 21, 2011

Your movie is on localhost, but don't think you have a web server running on iPad or iPhone, that's why no video plays on iOS.

Firefox does not play mp4 in a html5 video tag - which is what the ipad plugin creates on the fly - only webm and ogg video. Firefox cannot simulate an iDevice.

Thanks (doh!)
OK, got it. Now I've got the video playing on all four platforms!

Next, I noticed that I see different autoPlay behavior on the four
platforms. Does iOS not support autoPlay?

• mac firefox: automatically starts playing
• mac safari: automatically starts playing
• iphone: shows image of first frame and play button
• ipad: shows image of first frame and play button

If I configure autoPlay off, via

$f("ipad", "flash/flowplayer-3.2.7.swf", {
    clip: {
      autoPlay: false
    }
  }).ipad();

Then I see:

• mac firefox: displays grey gradient with play button
• mac safari: displays grey gradient with play button
• iphone: shows image of first frame and play button (no change)
• ipad: shows image of first frame and play button (no change)

So OK, I need to add a splashImage and a button.
If I then change the "a" tag to a <div> and add the splash images as a background-image and an <img> of a button to the div, AND set autoPlay to false. I see:

• mac firefox: displays background image with play button. Clip starts after click on image.
• mac safari: displays background image with play button. Clip starts after click on image.
• iphone: displays background image with play button. Clip starts after click on image.
• ipad: displays background image with play button. Clip starts after click on image.

All consistent, and the behavior I want. Yay.

Will this same setup work on Android?

Thanks,
--Jim

Android phones supporting html5 also support Flash, so you will have the "normal" Flowplayer.

To display the first frame of the video:

clip: {
  autoPlay: false,
  autoBuffering: true
}

Not sure how consistent this will work on iOS - it might differ even from devide to device - html5 is quite young.

For the splash image setup I do not think you need autoPlay: false - otoh, as long as it works, don't change it ;-)

Thanks Christian,
Using these settings I see consistent behavior on all four
test cases. So if the first frame of the video is usable as
a splash image I will go with this config for its simplicity.

...
<a href="flowplayer-960.mp4"
   style="display:block;width:520px;height:330px;"
   id="ipad"></a>

...
<script>
  var ip = $f("ipad", "flash/flowplayer-3.2.7.swf", {
    clip: {
      autoPlay: false,
      autoBuffering: true
    }
  }).ipad();
</script>

Great. - Personally I tend to prefer splash images though because the page loads faster (Flash only on demand) - a technique easily done in Flowplayer thanks to its API. YMMV.

Marking thread as solved.