这两天给项目升级遇到WKWebView在ios10上不能正确内联自动播放网络视频（所谓内联播放就是在制定区域内播放），之前都是可以的，查了下原因，竟然是后台返回的html格式错误。我找了一篇文章，iOS 10 Safari 视频播放新政策
所以我就在本地写了一个简单的html文件做测试，代码如下（网页html也要按照这个规范来写才能保证内联播放）：
<!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 需要设置自动内联播放，代码如下：
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
config.mediaPlaybackRequiresUserAction = NO;//把手动播放设置NO ios(8.0, 9.0)
config.allowsInlineMediaPlayback = YES;//是否允许内联(YES)或使用本机全屏控制器(NO)，默认是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];//禁止滚动
[self addSubview:_wkWebView];
当然，写到这里还没有完，当我尝试使用loadRequest:url加载ios8的本地html文件时，会提示Could not create a sandbox extension for / a web game using the new WKWebView API. 这个错误， 我们都知道ios8以上才引用的WKWebView，在ios8中 如果你想通过loadHTMLString:url baseURL:baseURL来加载内容也是加载不出来，经过尝试，可以把本地html文件copy到一个临时文件夹再去加载，是可以的。至于为什么这么做，我想应该是苹果的ios8上的一个bug。当然在ios9上就不需要这么麻烦，可以通过 loadFileURL:url allowingReadAccessToURL:url来加载，看代码：
//本地html测试
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;
}
写到这里基本算是完了，不过当你发现视频还是无法自动播放时，那就需要用js调用了
- (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,如有问题欢迎交流
