WKWebView加载html视频自动内联播放

这两天给项目升级遇到WKWebView在ios10上不能正确内联自动播放网络视频（所谓内联播放就是在制定区域内播放），之前都是可以的，查了下原因，竟然是后台返回的html格式错误。我找了一篇文章，iOS 10 Safari 视频播放新政策

所以我就在本地写了一个简单的html文件做测试，代码如下（网页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,如有问题欢迎交流

---

结语：

欢迎大家加入ios/swift交流群

群号: 343310110