如何在WKWebView中检测YouTube播放按钮的点击动作

我之前也处理过类似的需求，分享几个亲测有效的方案给你：

方法一：注入JavaScript监听视频播放事件（适配YouTube官网页面） #

这个方案适合直接加载YouTube官网视频页的场景。核心思路是监听视频元素的play事件——毕竟不管用户点击播放按钮、用快捷键还是其他方式触发播放，都会触发这个事件，而且比直接监听按钮点击更稳定（YouTube的按钮DOM结构偶尔会变动）。

具体实现步骤 #

1. 配置WKWebView，添加消息处理器用于接收JS发来的事件通知
2. 页面加载完成后注入JS代码，监听视频的play事件，同时处理页面动态加载的情况

Swift代码示例 #

import WebKit

class YouTubePlayerVC: UIViewController, WKScriptMessageHandler, WKNavigationDelegate {
    private var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        setupWebView()
        loadYouTubeVideo()
    }

    private func setupWebView() {
        let config = WKWebViewConfiguration()
        let userContentController = WKUserContentController()
        // 注册消息处理器，要和JS里的名称对应
        userContentController.add(self, name: "youtubePlayTriggered")
        config.userContentController = userContentController
        config.preferences.javaScriptEnabled = true

        webView = WKWebView(frame: view.bounds, configuration: config)
        webView.navigationDelegate = self
        webView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        view.addSubview(webView)
    }

    private func loadYouTubeVideo() {
        guard let url = URL(string: "https://www.youtube.com/watch?v=your-video-id") else { return }
        webView.load(URLRequest(url: url))
    }

    // 接收JS传递的消息
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "youtubePlayTriggered" {
            print("YouTube播放按钮被点击啦！")
            // 这里写你的原生逻辑，比如统计、弹窗提示等
        }
    }

    // 页面加载完成后注入监听JS
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        let injectJS = """
        // 监听视频播放事件的核心逻辑
        function setupPlayListener() {
            const videoElement = document.querySelector('.video-stream.html5-main-video');
            if (videoElement && !videoElement.hasAttribute('play-listener-added')) {
                videoElement.setAttribute('play-listener-added', 'true');
                videoElement.addEventListener('play', () => {
                    // 向原生发送消息
                    window.webkit.messageHandlers.youtubePlayTriggered.postMessage('play');
                });
            }
        }

        // 首次加载时调用一次
        setupPlayListener();

        // 用MutationObserver处理页面动态变化（比如跳转视频、页面刷新）
        const observer = new MutationObserver((mutations) => {
            mutations.forEach(() => {
                setupPlayListener();
            });
        });

        observer.observe(document.body, { childList: true, subtree: true });
        """

        webView.evaluateJavaScript(injectJS) { _, error in
            if let error = error {
                print("JS注入失败：\(error.localizedDescription)")
            }
        }
    }

    deinit {
        // 记得移除消息处理器，避免内存泄漏
        webView.configuration.userContentController.removeScriptMessageHandler(forName: "youtubePlayTriggered")
    }
}

注意事项 #

• YouTube的页面DOM结构可能会更新，如果.video-stream.html5-main-video这个选择器失效，需要打开浏览器开发者工具重新定位视频元素的选择器
• MutationObserver用来监听页面DOM变化，确保用户切换视频后依然能正常监听播放事件

方法二：利用YouTube Iframe API（适用于自定义嵌入的iframe场景） #

如果是你自己的页面里嵌入了YouTube的iframe播放器，那用官方的Iframe API会更可靠，能精准监听播放按钮点击事件。

核心思路 #

通过注入JS加载YouTube Iframe API，初始化播放器后监听onPlay事件，再把事件传递回原生。

关键JS代码（替换方法一中的injectJS内容即可） #

// 加载YouTube Iframe API
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubeIframeAPIReady() {
    // 这里的"player"是你嵌入的iframe的id
    player = new YT.Player('player', {
        events: {
            'onPlay': function() {
                window.webkit.messageHandlers.youtubePlayTriggered.postMessage('play');
            }
        }
    });
}

原生部分的消息接收逻辑和方法一完全一致。

内容的提问来源于stack exchange，提问作者Abhishek Mitra