PDA

View Full Version : Video on Sencha Touch via php and htaccess problem



thelbig
1 Jun 2011, 8:24 AM
Hello,
i am currently working on a Sencha Touch application, where movie-clips are shown after selecting them from a list (like a preview feature). The movies are located on a protected file system, where direct access is permitted. I get the movies content with a php script, which sets the headers and loads the file:


$size = filesize($path);
ob_clean();
header("Content-type: video/quicktime");
header('Last-Modified: Thu, 05 May 2011 14:05:24 GMT');
header('Etag: "1e003-1eae760-4a287dd4df100"');
header('Accept-Ranges: bytes');
header("Content-Length: ".$size);
echo readfile($path);This headers are the same as when I load the movie directly from the file system (I've tested this with the FireFox Addon "Live HTTP Headers").[/CODE]


When I use this script to load the video in Safari 5.0.5 on my PC, everything works fine, but when I try to load it on the iPad (4.3.3) Safari, then I get the error "MEDIA_ERR_SRC_NOT_SUPPORTED".
I thought that the php-ending is the problem, so I made a rewrite Rule in the .htaccess that the browser requests a *.mov file, but this didn't help either.



Options +FollowSymLinks
RewriteEngine On
RewriteRule ^(.+).mov$ http://172.64.1.78:8080/previewer/data//$1.mov

I tried to embed the video via the Sencha Touch xtype:'video', via an Ext Panel with an HTML 5 <video> Tag and via Quicktime cab:



var thePreviewerMovie = 'http://172.64.1.78:8080/previewer/sonntagsfahrer_45sek.mov';
var popup = new Ext.Panel({
floating: true,
id:'videoElement',
modal: false,
draggable:false,
centered: true,
fullscreen: false,
width: 700,
height: 400,
html: '<video width="700" height="400" src="'+thePreviewerMovie+'" autoplay controls onerror="failed(event)" type="video/quicktime"></video>',
/*html:'<object CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab" HEIGHT="320" WIDTH="240"><PARAM NAME="src" VALUE="'+thePreviewerMovie+'"></object>',*/
scroll: 'vertical',
listeners: 'show'
});In every case, the video works on Safari on the PC, but not on the iPad.

Did anyone have a problem like this before? I am running out of ideas :-?

thelbig
2 Jun 2011, 11:41 PM
*bump*

thelbig
3 Jun 2011, 6:44 AM
I finally got the solution:

The Ipad needs byte-ranges...

A quick guide is here:

http://mobiforge.com/developing/story/content-delivery-mobile-devices (http://mobiforge.com/developing/story/content-delivery-mobile-devices)

in the chapter "Appendix A: Streaming for Apple iPhone".

Greetings