顯示具有 iPad 標籤的文章。 顯示所有文章
顯示具有 iPad 標籤的文章。 顯示所有文章

2015年11月4日 星期三

[iOS] 透過UIWebview內嵌Html5 video影片到APP時常見問題

最近在著手研究關於iOS內嵌影片的問題,最簡單的方式是在設計APP時把影片包進APP裡,但是這樣的方式雖然簡單卻不見得符合需求,因為這樣操作等APP上架後就無法隨時更新,給使用者看新影片了!

因此我們接下來要討論的就是希望能把放在網路上的影片拿到手機上來播放。最基本的方式當然是先從網路上把整個影片下載下來,然後再拿播放器放映。不過這方法如果是一些應付大檔案就麻煩了,光是要等待影片下載好的時間可能就會讓使用者受不了。於是第二個好方法就是透過串流方式,不過要串流需要streaming server的配合,並不好說做就做。因此,最近我試著使用webview內嵌html5 video來進行播放。這樣的好處自然是使用者不用下載就可以觀看影片,同時,他不用straming server也有類似streaming的效果可以邊播邊載,他的載影片方式是一次一個request去load一部分的影片,不一個request就把所有的影片載完,同時他也可以做seek,就是讓使用者直接點擊影片時間條,點擊到哪裡就播哪裡。

關於html5 video內嵌,可以從Apple的文件上取得一些相關資訊,以下我就幾個我自己在過程中遇到且很常會有人想問的問題做簡單說明。

Q1. 在iPhone內嵌html5 video是否一定要全螢幕才可以播放?

Ans. 是的。官方文件說要播影片就是要全屏,我試了一陣子真的沒辦法,只要要播就會跳到全屏。但是iPad的話就不需要,可以不用全屏就能播影片。

Q2. 可以讓影片自動進行播放嗎?

Ans. 可以。在html端要設定control。

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

在app端你的webview要設定以下屬性:

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


Q3. 如何透過objective-C內嵌html5 video,代碼來一下?

self.WebView = [[UIWebView allocinit];
 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 addSubviewself.VideoWebView];

如果是iPad,可以設定video的frame來fit你的webview,因此你可以透過loadHTMLString來做。
 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.widthself.VideoWebView.frame.size.height,serverUrl];
[self.VideoWebView loadHTMLString:videoHTML baseURL:nil];
 [self.view addSubviewself.VideoWebView];



Q4. 網址一旦使用https:// 影片就無法播了拉!!!怎麼這樣?

Ans. 因為你的server需要先裝憑證。

Q5. 我已經在app登入過拉,為什麼拿不到伺服器的影片,哭哭,怎麼辦?

Ans. 因為在web裡面要用basic authentication才行,他沒有幫你記住...所以你要把原本的連結由:"http://domain.com/video/sample.mp4"改為在前面加上帳號密碼,來通過認證,變這樣:
"http://username:password@domain.com/video/sample.mp4" 那你會問我這樣不就被人家發現帳號密碼...對啊,但這是資安問題了QQ

Q6. 現在我已經會透過webview來播影片了,但是我想要從特定時間點開始播可以嗎?例如直接從十秒開始播!

Ans. 可以的,請參考以下代碼。把<script>寫進去,然後currenttime設定一下,設定幾秒就會從幾秒開始播嘍!他的方式是從開始就從10秒處打request,所以前面1~9秒就不會loading了!

 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.  我有辦法知道他正在看哪裡(第幾秒)嗎?

Ans. 應該是不行,因為我試了好一陣子,我也想知道答案,誰知道快教教我XDD

2015年11月1日 星期日

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 allocinit];
 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 addSubviewself.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.widthself.VideoWebView.frame.size.height,serverUrl];
[self.VideoWebView loadHTMLString:videoHTML baseURL:nil];
 [self.view addSubviewself.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!!!