[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 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];

如果是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.width, self.VideoWebView.frame.size.height,serverUrl];




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


 [self.view addSubview: self.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