WKWebView evaluateJavaScript 不适用于 youtube 嵌入式视频网址答案

【问题标题】：WKWebView evaluateJavaScript is not working for youtube embedded video urlWKWebView evaluateJavaScript 不适用于 youtube 嵌入式视频网址
【发布时间】：2017-09-03 10:35:37
【问题描述】：

我已将 youtube 嵌入视频加载到 WKWebView： https://www.youtube.com/embed/amtuB-2wGeQ?playsinline=1&autoplay=1

然后在 WKWebView didFinishNavigation 事件被触发后，我调用：

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {

webView.evaluateJavaScript("document.querySelector('video').play()", completionHandler: { (result, error) in
    if let r = result {
        print(r)
    }
    if let e = error {
        print(e)
    }
  })
}

但是，javascript命令没有被执行，错误和结果都是nil。

当我在 Chrome 开发者工具中执行相同的 javascript 命令时，它成功播放了视频，并通过调用“play()”和“pause()”暂停了视频。

document.querySelector('video').play()
document.querySelector('video').pause()

我不知道 WKWebView 内部发生了什么，有什么想法吗？谢谢！

【问题讨论】：

标签： javascript ios swift youtube wkwebview

【解决方案1】：

好的，终于知道为什么它不起作用了。

如果您还在为“为什么我的 javascript 无法在 WKWebView 中工作”而苦苦挣扎，以下是找出原因的好方法：

1.在桌面打开 Safari，偏好设置 -> 高级，启用“在菜单栏中显示开发者菜单”

2。在 Safari 菜单中，开发 -> 模拟器，连接你的 iPhone 模拟器

3.现在您可以在 Safari 中看到网页 html 和脚本，在控制台输入区域中，尝试运行不同的 javascript 以查看哪个有效。

4.然后从“evaluateJavaScript”调用那个工作

在我的案例中它不起作用的原因是嵌入式网页在普通网络浏览器和 WKWebView 之间呈现不同。我以浏览器脚本为例，它不起作用。

在 Safari 调试器的帮助下，你可以看到 WKWebView 里面到底发生了什么，真的很酷。

如果您遇到同样的问题，希望对您有所帮助。谢谢！

【讨论】：

【解决方案2】：

使用 UIWebView 代替 WKWebView 并使用此代码播放 youtube 视频。

#pragma mark - Embed Video

- (UIWebView *)embedVideoYoutubeWithURL:(NSString *)urlString andFrame:(CGRect)frame {
    NSString *videoID = [self extractYoutubeVideoID:urlString];

    NSString *embedHTML = @"\
    <html><head>\
    <style type=\"text/css\">\
    body {\
    background-color: transparent;\
    color: white;\
    }\
    </style>\
    </head><body style=\"margin:0\">\
    <embed id=\"yt\" src=\"http://www.youtube.com/v/%@\" type=\"application/x-shockwave-flash\" \
    width=\"%0.0f\" height=\"%0.0f\"></embed>\
    </body></html>";
    NSString *html = [NSString stringWithFormat:embedHTML, videoID, frame.size.width, frame.size.height];
    UIWebView *videoWebView = [[UIWebView alloc] initWithFrame:frame];
    [videoWebView loadHTMLString:html baseURL:nil];

    return videoWebView;
}

/**
 @see https://devforums.apple.com/message/705665#705665
 extractYoutubeVideoID: works for the following URL formats:

 www.youtube.com/v/VIDEOID
 www.youtube.com?v=VIDEOID
 www.youtube.com/watch?v=WHsHKzYOV2E&feature=youtu.be
 www.youtube.com/watch?v=WHsHKzYOV2E
 youtu.be/KFPtWedl7wg_U923
 www.youtube.com/watch?feature=player_detailpage&v=WHsHKzYOV2E#t=31s
 youtube.googleapis.com/v/WHsHKzYOV2E
*/

- (NSString *)extractYoutubeVideoID:(NSString *)urlYoutube {
    NSString *regexString = @"(?<=v(=|/))([-a-zA-Z0-9_]+)|(?<=youtu.be/)([-a-zA-Z0-9_]+)";
    NSError *error = NULL;
    NSRegularExpression *regex = [NSRegularExpression regularExpressionWithPattern:regexString options:NSRegularExpressionCaseInsensitive error:&error];
    NSRange rangeOfFirstMatch = [regex rangeOfFirstMatchInString:urlYoutube options:0 range:NSMakeRange(0, [urlYoutube length])];

    if(!NSEqualRanges(rangeOfFirstMatch, NSMakeRange(NSNotFound, 0))) {
        NSString *substringForFirstMatch = [urlYoutube substringWithRange:rangeOfFirstMatch];

        return substringForFirstMatch;
    }

    return nil;
}

或使用 google 的 youtube-ios-player-helper pod

【讨论】：

我不能...我的项目已固定为仅使用 wkwebview...不过谢谢