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

作者: 背着相机去旅行 | 来源:发表于2017-04-14 10:48 被阅读1954次

    这两天给项目升级遇到WKWebViewios10上不能正确内联自动播放网络视频(所谓内联播放就是在制定区域内播放),之前都是可以的,查了下原因,竟然是后台返回的html格式错误。我找了一篇文章,[iOS 10 Safari 视频播放新政策][linkurl]
    [linkurl]: http://www.cocoachina.com/ios/20161013/17754.html

    所以我就在本地写了一个简单的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,如有问题欢迎交流


    结语:

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

    群号: 343310110

    相关文章

      网友评论

      本文标题:WKWebView加载html视频自动内联播放

      本文链接:https://www.haomeiwen.com/subject/mrfvattx.html