Display video inside the Uiwebview not in device full screen

Question

I want to display video inside the UIWebview. When we click on the video it plays in device full screen.

How do we play video inside the UIWebview? Please note that these video files are hosted on youtube or on our server. they are not bundled along with app

Answer 1

I had the same requirement, to play video inline inside a UIWebView. Additionally, I needed the video to play immediately without waiting for the user to press the play button.

To accomplish this I added this property to the UIWebView:

webView.allowsInlineMediaPlayback = YES;

Then, in combination it is also required to add a "webkit-playsinline" attribute be included within the HTML5 video element on the web page that is providing the video source url.

<video src="assets/myMovie.m4v" webkit-playsinline></video>

See the apple doc: https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIWebView_Class/index.html#//apple_ref/doc/uid/TP40006950-CH3-SW32

Here is my complete Obj-C example to create a full screen UIWebView. Add this to a viewDidLoad method of a UIViewController:

NSURL *websiteUrl = [NSURL URLWithString:@"http://example.com/myMovie.m4v"];
NSURLRequest *urlRequest = [NSURLRequest requestWithURL:websiteUrl];

UIWebView * webView = [[UIWebView alloc] init];
webView.allowsInlineMediaPlayback = YES;
webView.mediaPlaybackRequiresUserAction = NO;
webView.opaque = NO;
webView.backgroundColor = [UIColor clearColor];
[webView setTranslatesAutoresizingMaskIntoConstraints:NO];
[webView loadRequest:urlRequest];
[self.view addSubview:webView];

// Width constraint
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:webView
                                                      attribute:NSLayoutAttributeWidth
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:self.view
                                                      attribute:NSLayoutAttributeWidth
                                                     multiplier:1
                                                       constant:0]];

// Height constraint
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:webView
                                                      attribute:NSLayoutAttributeHeight
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:self.view
                                                      attribute:NSLayoutAttributeHeight
                                                     multiplier:1
                                                       constant:0]];

// Center horizontally
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:webView
                                                      attribute:NSLayoutAttributeCenterX
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:self.view
                                                      attribute:NSLayoutAttributeCenterX
                                                     multiplier:1.0
                                                       constant:0.0]];

// Center vertically
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:webView
                                                      attribute:NSLayoutAttributeCenterY
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:self.view
                                                      attribute:NSLayoutAttributeCenterY
                                                     multiplier:1.0
                                                       constant:0.0]];

Answer 2

I think you should try this property of UIWebView class.

allowsInlineMediaPlayback

A Boolean value that determines whether HTML5 videos play inline or use the native full-screen controller.