flowplayer video on ipad/ipod touch not working in drupal7 using ipad plugin - byte range headers problem

Question

I've successfully integrated Flowplayer into my Drupal installation using the video and flowplayer . I upgraded flowplayer files to the latest release 3.2.7 and all works ok, but not on iPad - iPod Touch.

I loaded the js for the iPad plugin in the Flowplayer module like this:

drupal_add_js(drupal_get_path('module', 'flowplayer') . '/flowplayer/example/flowplayer.ipad-3.2.2.js');

and I see that it is loaded fine.

then in Flowplayer js I had this line

$(selector + ':not(.flowplayer-processed)').addClass('flowplayer-processed').flowplayer(settings.basePath + settings.flowplayerSwf, config);

I changed this in this way:

//I added the first line because in  the example it worked that way
$(selector + ':not(.flowplayer-processed)').attr('url', config.clip.url);
$(selector + ':not(.flowplayer-processed)').addClass('flowplayer-processed').flowplayer(settings.basePath + settings.flowplayerSwf, config);
//then i add ipad support (the selctor is hardcoded to maike things work)
$f('flowplayer-video').ipad();

In this way, on my iPod touch (I think it's the same on iPad) I see the player but the video doesn't start (there is some kind of blocked overlay).

You can look at the site here

EDIT - now i got it working thanks to teddy suggestion. now i'll try to find out how to setup my script so that it returns byte-range headers.

If anyone knows how to do this, please post here.

Answer 1

The server that serves the actual MP4 video to the iPad must support the HTTP header called byte-range .

I would try using an alternate video source from another server, as a proof-of-concept to see if this is the cause of the problem.

Here is an MP4 video served with the byte-range header: http://mediaelementjs.com/media/echo-hereweare.mp4