這兩天給項(xiàng)目升級(jí)遇到WKWebView在ios10上不能正確內(nèi)聯(lián)自動(dòng)播放網(wǎng)絡(luò)視頻（所謂內(nèi)聯(lián)播放就是在制定區(qū)域內(nèi)播放），之前都是可以的，查了下原因，竟然是后臺(tái)返回的html格式錯(cuò)誤。我找了一篇文章，iOS 10 Safari 視頻播放新政策
所以我就在本地寫了一個(gè)簡(jiǎn)單的html文件做測(cè)試，代碼如下（網(wǎng)頁(yè)html也要按照這個(gè)規(guī)范來(lái)寫才能保證內(nèi)聯(lián)播放）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>iphone-inline-video demo with playsinline</title>
</head>
<body>
<video loop playsinline autoplay="autoplay" id="video1" muted="muted" poster="http://image.baby-kingdom.com/images2/2016/b/html5/wyeth_20161122_320x280/poster.jpg" type="video/mp4" width="100%" src="http://image.baby-kingdom.com/images2/2016/b/html5/wyeth_20161122_320x280/video.mp4">
</video>
</body>
</html>
本地WKWebViewConfiguration 需要設(shè)置自動(dòng)內(nèi)聯(lián)播放，代碼如下：
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
config.mediaPlaybackRequiresUserAction = NO;//把手動(dòng)播放設(shè)置NO ios(8.0, 9.0)
config.allowsInlineMediaPlayback = YES;//是否允許內(nèi)聯(lián)(YES)或使用本機(jī)全屏控制器(NO)，默認(rèn)是NO。
config.mediaPlaybackAllowsAirPlay = YES;//允許播放，ios(8.0, 9.0)
_wkWebView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 300) configuration:config];
_wkWebView.navigationDelegate = self;
_wkWebView.UIDelegate = self;
[_wkWebView.scrollView setScrollEnabled:NO];//禁止?jié)L動(dòng)
[self addSubview:_wkWebView];
當(dāng)然，寫到這里還沒有完，當(dāng)我嘗試使用loadRequest:url加載ios8的本地html文件時(shí)，會(huì)提示Could not create a sandbox extension for / a web game using the new WKWebView API. 這個(gè)錯(cuò)誤， 我們都知道ios8以上才引用的WKWebView，在ios8中 如果你想通過loadHTMLString:url baseURL:baseURL來(lái)加載內(nèi)容也是加載不出來(lái)，經(jīng)過嘗試，可以把本地html文件copy到一個(gè)臨時(shí)文件夾再去加載，是可以的。至于為什么這么做，我想應(yīng)該是蘋果的ios8上的一個(gè)bug。當(dāng)然在ios9上就不需要這么麻煩，可以通過 loadFileURL:url allowingReadAccessToURL:url來(lái)加載，看代碼：
//本地html測(cè)試
NSString * htmlPath = [NSBundle.mainBundle pathForResource:@"index" ofType:@"html"];
NSURL *fileURL = [NSURL fileURLWithPath:htmlPath];
if ([UIDevice currentDevice].systemVersion.doubleValue >= 9.0) {
[_wkWebView loadFileURL:fileURL allowingReadAccessToURL:fileURL];
}else{
NSURL *endURL = [self fileURLForBuggyWKWebView8:fileURL];
NSURLRequest *request = [NSURLRequest requestWithURL:endURL];
[_wkWebView loadRequest:request];
}
- (NSURL *)fileURLForBuggyWKWebView8:(NSURL *)fileURL {
NSError *error = nil;
if (!fileURL.fileURL || ![fileURL checkResourceIsReachableAndReturnError:&error]) {
return nil;
}
// Create "/temp/tempHTML" directory
NSFileManager *fileManager= [NSFileManager defaultManager];
NSURL *temDirURL = [[NSURL fileURLWithPath:NSTemporaryDirectory()] URLByAppendingPathComponent:@"tempHTML"];
[fileManager createDirectoryAtURL:temDirURL withIntermediateDirectories:YES attributes:nil error:&error];
NSURL *dstURL = [temDirURL URLByAppendingPathComponent:fileURL.lastPathComponent];
// Now copy given file to the temp directory
[fileManager removeItemAtURL:dstURL error:&error];
[fileManager copyItemAtURL:fileURL toURL:dstURL error:&error];
// Files in "/temp/www" load flawlesly :)
return dstURL;
}
寫到這里基本算是完了，不過當(dāng)你發(fā)現(xiàn)視頻還是無(wú)法自動(dòng)播放時(shí)，那就需要用js調(diào)用了
- (void)playVideo{
NSString *script = @"var videos = document.querySelectorAll(\"video\"); for (var i = videos.length - 1; i >= 0; i--) { var ivideo = videos[i]; ivideo.setAttribute(\"webkit-playsinline\",\"\"); ivideo.play(); };";
[_wkWebView evaluateJavaScript:script completionHandler:nil];
}
- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation {
NSLog(@"%s", __FUNCTION__);
}
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
NSLog(@"%s", __func__);
[self playVideo];
}
最后附上 Demo,如有問題歡迎交流
