iOS Integration

In this article we will show you how to use the cross platform player in your within a webview for your iPhone/iPad app. I will be using the iOS 7.0 SDK and Xcode 5.0.2.

Open up Xcode and create a new project, select the iOS field then Single View Application. Hit next, and give your sample app a name and a class prefix. Make sure the value “Universal” is selected from the dropdown menu then hit next to create your app.

Now that are base app has been created, we will add four additional views for our app. Two of the views will be for the iPhone/iPod screen and the other two for iPad’s screen. Two views will contain a UI WebView control and the other will be the view the user goes to when the video is done. Make sure the four Objective-C classes you added subclass UIViewController and have ‘With XIB for User Interface’ checked. Since two of the classes are for iPad devices you need to make sure you check the ‘Targeted for iPad’ checkbox.

The classes I’ve created are:

  • VideoViewForiPadController(Targeted for iPad)
  • AfterVideoViewController(Targeted for iPad)
  • iPhoneWebViewViewController
  • AfterViewForiPhoneController

Open up the iPad and iPhone storyboards, and add a Button view then create the IBAction touchDown listener in ViewController.m. For the iPad Button I’ve created the IBAction method playVideoForiPad and for the iPhone it’s playVideo. I’ll add the methods below.

- (IBAction)playVideoForiPad:(id)sender {
self.videoiPadController =
[[VideoViewForiPadController alloc] initWithNibName:@"VideoViewForiPadController"
bundle:nil];
[self presentViewController:self.videoiPadController animated:YES completion:nil];
}

and

- (IBAction)playVideo:(id)sender {

self.videoiPhoneController =
[[iPhoneWebViewViewController alloc] initWithNibName:@"iPhoneWebViewViewController"
bundle:nil];
[self presentViewController:self.videoiPhoneController animated:YES completion:nil];
}

Now let’s add our UIWebView and methods. In your iPhoneWebViewViewController and VideoViewForiPadController xib files add a WebView control and make sure it takes up the whole view. Now head to the .m files and add the code below.

Note: In VideoViewForiPadController.m I call the WebView _ipadView and in PhoneWebViewViewController I call it _iphoneWebView.

In VideoViewForiPadController add:

- (void)viewDidLoad
{
[super viewDidLoad];

[[NSURLCache sharedURLCache] removeAllCachedResponses];
[[NSURLCache sharedURLCache] setDiskCapacity:0];
[[NSURLCache sharedURLCache] setMemoryCapacity:0];

NSString *url = @"http://www.yoursite.com/player.html?publishedid=999961&customerid={insertcustomerid}&reporttag=iphone_player&playerid={insertplayerid}";
NSURL *webviewURL = [NSURL URLWithString:url];
NSURLRequest *request = [NSURLRequest requestWithURL:webviewURL];
_ipadView.opaque = YES;
_ipadView.delegate = self;
_ipadView.mediaPlaybackRequiresUserAction = NO;
_ipadView.userInteractionEnabled = true;
[_ipadView loadRequest:request];
}

- (BOOL)webView:(UIWebView *)webView2 shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {

NSString *requestString = [[request URL] absoluteString];
NSArray *components = [requestString componentsSeparatedByString:@":"];

if ([components count] > 1 &&
[(NSString *)[components objectAtIndex:0] isEqualToString:@"myapp"]) {
if([(NSString *)[components objectAtIndex:1] isEqualToString:@"myfunction"])
{
UINavigationController *navController = [[UINavigationController alloc] initWithRootViewController:self];

NSLog(@"Before ");
[self performSelector:@selector(dismissView) withObject:nil afterDelay:0.5];

NSLog(@"After");

}
return NO;
}

return YES; // Return YES to make sure regular navigation works as expected.
}

-(void)dismissView
{
self.nextController =
[[AfterVideoViewController alloc] initWithNibName:@"AfterVideoViewController"
bundle:nil];
[self presentViewController:self.nextController animated:YES completion:nil];
}

In iPhoneWebViewViewController add:

- (void)viewDidLoad
{
[super viewDidLoad];

[[NSURLCache sharedURLCache] removeAllCachedResponses];
[[NSURLCache sharedURLCache] setDiskCapacity:0];
[[NSURLCache sharedURLCache] setMemoryCapacity:0];

NSString *url = @"http://www.yoursite.com/player.html?publishedid=999961&customerid={insertcustomerid}&reporttag=iphone_player&playerid={insertplayerid}";
NSURL *webviewURL = [NSURL URLWithString:url];
NSURLRequest *request = [NSURLRequest requestWithURL:webviewURL];
_iphoneWebView.opaque = YES;
_iphoneWebView.mediaPlaybackRequiresUserAction = NO;
_iphoneWebView.delegate = self;
_iphoneWebView.userInteractionEnabled = true;
[_iphoneWebView loadRequest:request];
}

- (BOOL)webView:(UIWebView *)webView2 shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {

NSString *requestString = [[request URL] absoluteString];
NSArray *components = [requestString componentsSeparatedByString:@":"];

NSLog(@"alphia");

if ([components count] > 1 &&
[(NSString *)[components objectAtIndex:0] isEqualToString:@"myapp"]) {
NSLog(@"Test");
if([(NSString *)[components objectAtIndex:1] isEqualToString:@"myfunction"])
{
NSLog(@"Test 2");
UINavigationController *navController = [[UINavigationController alloc] initWithRootViewController:self];

NSLog(@"Before ");
[self performSelector:@selector(dismissView) withObject:nil afterDelay:0.5];

NSLog(@"After");

}
return NO;
}

return YES; // Return YES to make sure regular navigation works as expected.
}

-(void)dismissView
{
self.nextController =
[[AfterViewForiPhoneController alloc] initWithNibName:@"AfterViewForiPhoneController"
bundle:nil];
[self presentViewController:self.nextController animated:YES completion:nil];
}

Now head to the header files and add this:

In VideoViewForiPadController.h add:

#import “AfterVideoViewController.h”
@property (strong, nonatomic) IBOutlet UIWebView *ipadView;
@property (strong, nonatomic) AfterVideoViewController *nextController;

and in iPhoneWebViewViewController.h add

#import “AfterViewForiPhoneController.h”
@property (strong, nonatomic) IBOutlet UIWebView *iphoneWebView;
@property (strong, nonatomic) AfterViewForiPhoneController *nextController;

And that’s it. When you run your app and click the button you should be presented with the trailer. When the video is done playing the onComplete event will fire and launch a new View to the user in this view you can add your own custom code.