objective-C : add a html5 video in iOS app

If we don't have a streaming server and wanna let our video "looks like" we have a steaming effect in our app, such as seek or preview, we can use "html5 video" as a solution.We can check this documents offered by Apple.

When I used UIWebview to include HTML5 video in our app, I got some questions. I tried to find answers and here's what I found and a lot of people often ask.

Q1. Can I use html5 video "without fullscreen" in iPhone?

Ans.  No. If you want to play the video, it must be played in fullscreen. I also have tried some ways, but failed. You can check the document provided by Apple. They don't allow us to play html5 video without fullscreen. But in iPad, you can play the video without fullscreen. According to the document, this is for better user experience...

Q2. Can I use autoplay?

Ans. Yes. You need to add control in your html code,

<video controls = "controls" autoplay ="autoplay">

 and set your webview like this :

self.WebView.allowsInlineMediaPlayback = YES; // for autoplay


self.WebView.mediaPlaybackRequiresUserAction = NO; //for autoplay

Q3. How could I load a HTML5 Video in objective-c code?

Ans.

self.WebView = [[UIWebView alloc] init];

 self.WebView.scalesPageToFit = YES;

 self.WebView.allowsInlineMediaPlayback = NO; // for autoplay

 self.WebView.mediaPlaybackRequiresUserAction = YES; //for autoplay

        



 NSString *serverUrl = [NSString stringWithFormat:@"http://%@:%@@domain.com/video.mp4", username,password];

 serverUrl = [serverUrl stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];

        

 NSURL *url = [NSURL URLWithString:serverUrl];

 NSURLRequest *req = [NSURLRequest requestWithURL:url];

 [self.WebView loadRequest:req];

 [self.view addSubview: self.VideoWebView];

if you want to set video's frame,  you can use this code (let webview load HTMLString):

 NSString *serverUrl = [NSString stringWithFormat:@"http://%@:%@@domain.com/video.mp4", username,password];

 serverUrl = [serverUrl stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];



NSString *videoHTML= [NSString stringWithFormat: @"<style type='text/css'>body { margin:0;background-color:black}</style><video width='%f' height='%f' frameborder='0' controls autoplay><source src=\"%@\" type=\"video/mp4\"></video><meta name='viewport' content='width=device-width, initial-scale=1,user-scalable=no,minimum-scale=1.0, maximum-scale=1.0'>", self.VideoWebView.frame.size.width, self.VideoWebView.frame.size.height,serverUrl];




[self.VideoWebView loadHTMLString:videoHTML baseURL:nil];


 [self.view addSubview: self.VideoWebView];

Q4. My url is https, and I cannot play the video, why?

Ans. If you try to link the url with https, your server needs certificate.

Q5. I have logged in to my server, but I still cannot get the video by url, why?

Ans. Maybe  you need to use basic authentication to connect with server, which means you need to use "http://username:password@domain.com/video/sample.mp4" replace the origin url "http://domain.com/video/sample.mp4"

Q6. I want to let video play from certain time, not from 0, can I do that?

Ans. Yes. You need to add js to your videoHTML. For example, you want to play at 10s, you can do this : set the current time and you can set the begin time.

 NSString *videoHTML= [NSString stringWithFormat: @"<style type='text/css'>body { margin:0;background-color:black}</style><video id='video1' width='%f' height='%f' frameborder='0' controls autoplay><source src=\"%@\" type=\"video/mp4\"></video><script>document.getElementById('video1').addEventListener('loadedmetadata', function() {this.currentTime = 10;}, false);</script><meta name='viewport' content='width=device-width, initial-scale=1,user-scalable=no,minimum-scale=1.0, maximum-scale=1.0'>", self.WebView.frame.size.width, self.WebView.frame.size.height,serverUrl];

Q7. Can I know what time user is watching now? (Can I get the current time in APP?)

Ans. I think we cannot get the current time in app but I cannot sure that. If you can, please let me know!!!