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

Was it helpful?

Solution 3

To play video in UIWebView use below code....

NSString *strVedio = @"<video controls> <source src=\"YourVideo.mp4\"> </video>";
NSString *path = [[NSBundle mainBundle] pathForResource:@"YourVideo" ofType:@"mp4"];
[Webview loadHTMLString:strVedio baseURL:[NSURL fileURLWithPath:path]];

UPDATE:

use this below code to display video in UIWebView from video URL...

  NSString *embedHTML = @"\
  <html><head>\
  <style type=\"text/css\">\
  body {\
  background-color: transparent;
  color: white;
  }\
  </style>\
  </head><body style=\"margin:0\">\
  <embed id=\"yt\" src=\"%@\" type=\"application/x-shockwave-flash\" \
  width=\"%0.0f\" height=\"%0.0f\"></embed>\
  </body></html>";

  NSString *strHtml = [NSString stringWithFormat:embedHTML, yourURLString, width,height];//set width and height which you want

  [webView loadHTMLString:strHtml baseURL:nil];
  [self.view addSubview:webView];

If you want to display in small screen only and without webview then use bellow code..

MPMoviePlayerController *videoPlayer = [[MPMoviePlayerController alloc] initWithContentURL:[NSURL fileURLWithPath:url]];
[player setControlStyle:MPMovieControlStyleNone];

player.view.frame = CGRectMake(0, 0, 150, 150);

[self.view addSubview:videoPlayer.view];

OTHER TIPS

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.

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]];
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top