Playing remote videos

581 views
Skip to first unread message

rich

unread,
Feb 5, 2010, 10:20:24 AM2/5/10
to phonegap
Hi, I've been struggling a bit to get my iPhone app to play back my
H264 videos off of my remote server. I know I can use the html5 video
tag, but it seems to be a bit buggy, at least when running with
jqTouch - the video control often leaves "ghost" images when
transitioning between divs with jqTouch, and it seems to make the
phone slow down and perform poorly in general.

Ideally I would like to simply link the user directly to the mp4 file
over http, and launch the native video player without the need of the
video tag. I've overridden shouldStartLoadWithRequest in my
AppDelegate to make external links load directly in the UI rather than
Safari, and that seems to work great for launching the videos - but
the problem now is that when I click "Done" after watching the video,
index.html is reloaded and I end up back in my initial jqTouch view
(login screen).

Is there any way to prevent that reload? Or just a better way of
handling remote videos in general? Any suggestions greatly
appreciated.

Using the latest and greatest PhoneGap (0.9.0) with jQuery and jqTouch.

PanMan

unread,
Feb 7, 2010, 10:07:13 AM2/7/10
to phonegap
I have integrated the iphone movieplayer into phonegap (but in a kinda
hackish way). Really only a few lines of code.
I think ther are/were people working on an "official" method to do
this.
This has as advantage that the movieplayer is loaded "over" the
webview, instead of replacing it.
Kind Regards,
PanMan.

rich

unread,
Feb 7, 2010, 2:38:39 PM2/7/10
to phonegap

Hi PanMan, that sounds awesome. Care to share a code sample? Or a git
repo I can look at?

Thanks!

Gunit

unread,
Feb 21, 2010, 2:18:28 PM2/21/10
to phonegap
Hi All,
In my case the <video> tag doesnt even load, it will merely exit the
app when loaded.
Is this the same issue?

Thanks,
Gunit

jonathanstark

unread,
Feb 22, 2010, 11:33:35 AM2/22/10
to phonegap
FWIW - I've posted a video that might help people using jQTouch and
the <video> tag:

http://jonathanstark.com/blog/2010/02/11/html5-video-css-animations-and-jqtouch/

rich

unread,
Feb 23, 2010, 12:05:34 PM2/23/10
to phonegap
For me, the big issue was crashing (Gunit, I think that is what you're
seeing as well). Admittedly this is probably because we were using
video along with jqt.scrolling.js for scrollable panels - playing a
video would work fine, but as soon as you clicked Back, the
application would exit. The drag on memory was just too great.

Scrolling was something we couldn't live without, so what we ended up
doing was overriding the shouldStartLoadWithRequest function in
PhoneGapDelegate.m, and adding two new functions, playMovieAtURL and
myMovieFinishedCallback. Now we just link directly to the mp4 files
in the app (window.location.href='http://myserver.com/myvideo.mp4'),
and this bit of Objective-C code captures the URL and launches the
media player instead. Credit goes to PanMan for this solution.

- (BOOL)webView:(UIWebView *)theWebView shouldStartLoadWithRequest:
(NSURLRequest *)request navigationType:
(UIWebViewNavigationType)navigationType
{
NSURL *url = [request URL];

if ([[[url path] pathExtension] isEqualToString:@"mp4" ] || [[[url
path] pathExtension] isEqualToString:@"m4v" ] || [[[url path]
pathExtension] isEqualToString:@"m3u8" ]) {
//video files are .mp4 or m4v, stream indexes are m3u8
//it's a movie, go play!
[self playMovieAtURL:url];
return NO;
} else {
return [ super webView:theWebView shouldStartLoadWithRequest:request
navigationType:navigationType ];
}

}

-(void)playMovieAtURL:(NSURL*)theURL {
MPMoviePlayerController* theMovie=[[MPMoviePlayerController alloc]
initWithContentURL:theURL];
theMovie.scalingMode=MPMovieScalingModeAspectFit;
// Register for the playback finished notification.
[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(myMovieFinishedCallback:)
name:MPMoviePlayerPlaybackDidFinishNotification
object:theMovie];

// Movie playback is asynchronous, so this method returns
immediately.
[theMovie play];
}

-(void)myMovieFinishedCallback:(NSNotification*)aNotification
{
MPMoviePlayerController* theMovie=[aNotification object];
[[NSNotificationCenter defaultCenter] removeObserver:self
name:MPMoviePlayerPlaybackDidFinishNotification
object:theMovie];
[theMovie stop];
// Release the movie instance created in playMovieAtURL
//Bug fix for autoplay bug on 3.0
float version = [[[UIDevice currentDevice] systemVersion]
floatValue];
if (version >= 3.0) {
// iPhone 3.0 code here
// theMovie.initialPlaybackTime = -1.0; //Breaks on 2.x compiling
[theMovie setInitialPlaybackTime: -1.0]; //Only gives a warning on
2.x :)
}
[theMovie release];
NSLog(@"Go STOP received");

}

Vasim Padhiyar

unread,
Apr 5, 2010, 9:56:05 AM4/5/10
to phonegap
should i just copy and paste this code in PhoneGapDelegate.m before
@end ?

On Feb 23, 10:05 pm, rich <rich.thiba...@gmail.com> wrote:
> For me, the big issue was crashing (Gunit, I think that is what you're

> seeing as well).  Admittedly this is probably because we were usingvideoalong with jqt.scrolling.js for scrollable panels - playing avideowould work fine, but as soon as you clicked Back, the


> application would exit.  The drag on memory was just too great.
>
> Scrolling was something we couldn't live without, so what we ended up
> doing was overriding the shouldStartLoadWithRequest function in
> PhoneGapDelegate.m, and adding two new functions, playMovieAtURL and
> myMovieFinishedCallback.  Now we just link directly to the mp4 files
> in the app (window.location.href='http://myserver.com/myvideo.mp4'),
> and this bit of Objective-C code captures the URL and launches the

> mediaplayerinstead.  Credit goes to PanMan for this solution.


>
> - (BOOL)webView:(UIWebView *)theWebView shouldStartLoadWithRequest:
> (NSURLRequest *)request navigationType:
> (UIWebViewNavigationType)navigationType
> {
>         NSURL *url = [request URL];
>
>         if ([[[url path] pathExtension] isEqualToString:@"mp4" ] || [[[url
> path] pathExtension] isEqualToString:@"m4v" ] || [[[url path]
> pathExtension] isEqualToString:@"m3u8" ]) {

>                 //videofiles are .mp4 or m4v, stream indexes are m3u8

Reply all
Reply to author
Forward
0 new messages