Embedded vimeo video in iPhone app using iOS 6 not playing

Question

I can't seem to get any videos playing in iOS 6. Both on the device (iP4) and simulator.

What I have is a UIWebView setup in IB. Then in my viewDidLoad I have the following code:

NSURL *url = [NSURL URLWithString:[NSString stringWithFormat:@"http://domain.com/app/player.php?vid=%@", [videoDetails objectForKey:@"vid"]]];
NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];
[videoWebView loadRequest:requestObj];

Just to explain, the video settings on vimeo are that it is only allowed to be hosted on a specific domain, otherwise it will display an error message. So I have some simple HTML set up in player.php that just calls the vimeo embed code.

When I go to the view that has the UIWebView on it, and the video has loaded in and you see the 'play' icon in the vimeo video, I click that and then the video shows a loading icon and then after about 5-10 seconds, the console outputs the below and the UIWebView just goes white.

Console output:

2013-01-30 16:50:11.809 My App[2807:907] [MPAVController] Autoplay: Enabling autoplay
2013-01-30 16:50:11.821 My App[2807:907] [MPAVController] Autoplay: Skipping autoplay, disabled (for current item: 0, on player: 1)
2013-01-30 16:50:11.831 My App[2807:907] [MPAVController] Autoplay: Enabling autoplay
2013-01-30 16:50:12.042 My App[2807:907] [MPCloudAssetDownloadController] Prioritization requested for media item ID: 0
2013-01-30 16:50:21.254 My App[2807:907] [MPAVController] Autoplay: Skipping autoplay, disabled (for current item: 0, on player: 1)
2013-01-30 16:50:22.000 My App[2807:907] [MPAVController] Autoplay: Enabling autoplay
2013-01-30 16:50:22.244 My App[2807:907] [MPAVController] Autoplay: Disabling autoplay for pause
2013-01-30 16:50:22.246 My App[2807:907] [MPAVController] Autoplay: Disabling autoplay
2013-01-30 16:50:22.354 My App[2807:907] [MPAVController] Autoplay: Disabling autoplay
2013-01-30 16:50:22.591 My App[2807:907] [MPAVController] Autoplay: Enabling autoplay
2013-01-30 16:50:22.593 My App[2807:907] [MPAVController] Autoplay: Skipping autoplay, disabled (for current item: 0, on player: 1)
2013-01-30 16:50:22.655 My App[2807:907] [MPAVController] Autoplay: Enabling autoplay
2013-01-30 16:50:22.973 My App[2807:907] [MPAVController] Autoplay: Enabling autoplay
2013-01-30 16:50:23.057 My App[2807:907] [MPAVController] Autoplay: Skipping autoplay, disabled (for current item: 0, on player: 1)

On iOS 5, the video just plays as expected. The thing is, this isn't related to just vimeo. I've tried the following:

Vimeo random public video (no embedding in a file hosted on domain.com)

NSString *htmlStringToLoad = [NSString stringWithFormat:@"http://player.vimeo.com/video/32424117?title=0&byline=0&portrait=0&width=320&height=181&frameborder=0"];
[videoWebView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:htmlStringToLoad]]];

And then again with YouTube:

[videoWebView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.youtube.com/watch?v=dABo_DCIdpM"]]];

My only concern is getting it working with Vimeo videos, as this is where they are all stored. But I can't see vimeo being the problem here as it doesn't work on YT either so there must be something I'm doing wrong to keep iOS 6 happy? I've Googled around a bit and I can't seem to find any solution at all, even though I don't think it's just me this has happened to.

Thanks in advance.

Answer 1

For this I had to ditch the UIWebView completely.

I don't know if you get this on free vimeo accounts, but on our PRO account, in the video settings there's a tab for 'video file' and at the bottom there's a field labelled 'HTTP Live Streaming' and there's practically a direct link to your video.

And then instead of the UIWebView, I used MPMoviePlayerViewController to play the video.

Add the MediaPlayer.framework into your 'Link Binary With Libraries' setting. In the .h file of my view controller that has a UIImageView, a couple of labels, and a play button, I imported #import <MediaPlayer/MediaPlayer.h> and setup a property @property(nonatomic, readonly) MPMoviePlayerViewController *player;

Then, in the .m file:

-(IBAction)playVideo:(id)sender{
    NSString *videoString = @"http://player.vimeo.com/external/THE_VIDEO_ID.m3u8?p=standard,mobile&s=UNIQUE_VALUE_FOR_EACH_VIDEO";
    player = [[MPMoviePlayerViewController alloc] initWithContentURL:[NSURL URLWithString:videoString]];
    [player.moviePlayer prepareToPlay];
    [player.view setFrame: self.view.bounds];
    [self.view addSubview: player.view];
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(MPMoviePlayerDidExitFullscreen:) name:MPMoviePlayerDidExitFullscreenNotification object:nil];
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(MPMoviePlayerDidExitFullscreen:) name:MPMoviePlayerPlaybackDidFinishNotification object:nil];
    [player.moviePlayer play];
}

- (void)MPMoviePlayerDidExitFullscreen:(NSNotification *)notification{
    [[NSNotificationCenter defaultCenter] removeObserver:self name:MPMoviePlayerDidExitFullscreenNotification object:nil];
    [[NSNotificationCenter defaultCenter] removeObserver:self name:MPMoviePlayerPlaybackDidFinishNotification object:nil];
    [player.moviePlayer stop];
    [player.moviePlayer.view removeFromSuperview];
}

I did try loading the HTTP Live Stream URL into the UIWebView, but it doesn't seem to work. A black screen briefly appears with the vimeo play button in the middle. Then within a second of that the fullscreen player opens for about a second, closes and then the UIWebView goes white.

I'm still testing around with this and so far have managed to play our longest video, 1hr 45min without issue over WiFi on iOS 6 and 5.1. But hopefully this will help others out as a start.

Answer 2

You can still use UIWebview by registering to notifications from UIMoviePlayerController and handling the corresponding events...

-(void)viewDidLoad
{

...

[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(videoStarted:)   name:@"UIMoviePlayerControllerDidEnterFullscreenNotification" object:nil];
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(videoFinished:) name:@"UIMoviePlayerControllerDidExitFullscreenNotification" object:nil];
}

-(void)videoStarted:(NSNotification *)notification{
// your code here
}

-(void)videoFinished:(NSNotification *)notification{
// your code here
}