WKWebView evaluateJavaScript 不适用于 youtube 嵌入式视频 url

Question

我已经将 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命令没有执行，error和result都是nil

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

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

不知道WKWebView里面发生了什么，有什么想法吗？谢谢！

Answer 1

使用 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

Answer 2

好的，终于弄清楚为什么它不起作用了。

如果您也在为 "why my javascript is not working in WKWebView" 苦苦挣扎，下面是找出原因的巧妙方法：

1.在桌面上打开 Safari，首选项 -> 高级，启用 "show developer menu in menu bar"

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

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

4.然后调用来自 "evaluateJavaScript"

的那个

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

借助 Safari 调试器，您可以看到 WKWebView 内部的真实情况，这真的很酷。

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

WKWebView evaluateJavaScript 不适用于 youtube 嵌入式视频 url

WKWebView evaluateJavaScript is not working for youtube embedded video url

javascript

youtube

ios

swift

wkwebview