如何在Android WebView中检测视频点击事件？

刚好之前做过类似的需求——要在WebView加载的网页（比如Facebook）里检测视频点击并弹出Toast提示。核心思路是通过注入JavaScript脚本监听网页中的视频交互，再将事件回调到Android原生层。下面给你详细的实现步骤：

一、基础配置WebView #

首先要确保WebView启用JavaScript，并且允许JS与原生代码通信：

WebView webView = findViewById(R.id.webview);
WebSettings webSettings = webView.getSettings();

// 启用JavaScript
webSettings.setJavaScriptEnabled(true);
// 允许JS与原生交互（API 17+需注意安全限制）
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

// 注入JS接口，让网页能调用原生方法
webView.addJavascriptInterface(new VideoClickInterface(this), "VideoClickHandler");

二、实现原生回调接口 #

创建一个带@JavascriptInterface注解的类，用来接收JS传递的视频点击事件：

public class VideoClickInterface {
    private Context mContext;

    public VideoClickInterface(Context context) {
        this.mContext = context;
    }

    // 必须添加@JavascriptInterface注解，否则JS无法调用该方法
    @JavascriptInterface
    public void onVideoClicked() {
        // JS调用原生方法是在后台线程，弹Toast需要切回主线程
        ((Activity) mContext).runOnUiThread(() -> {
            Toast.makeText(mContext, "视频已被点击", Toast.LENGTH_SHORT).show();
        });
    }
}

注意：API 17及以上版本，只有标注@JavascriptInterface的方法才能被JS调用，这是Android的安全机制，防止恶意网页调用原生敏感方法。

三、注入JavaScript监听视频点击 #

很多网站（比如Facebook）的视频是动态加载的（滚动页面才会加载新视频），所以不能只监听初始DOM里的视频，还要用MutationObserver监听DOM变化，确保新添加的视频也能被绑定点击事件：

// 在WebView页面加载完成后注入JS脚本
webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        // 编写监听视频点击的JS逻辑
        String jsScript = "(" +
            "function() {" +
                // 定义绑定点击事件的函数
                "function bindVideoClick() {" +
                    "var videos = document.getElementsByTagName('video');" +
                    "for(var i=0; i<videos.length; i++){" +
                        // 标记已绑定的视频，避免重复绑定
                        "if(!videos[i].hasAttribute('data-click-bound')){" +
                            "videos[i].setAttribute('data-click-bound', 'true');" +
                            "videos[i].addEventListener('click', function() {" +
                                // 调用原生的回调方法
                                "window.VideoClickHandler.onVideoClicked();" +
                            "});" +
                        "}" +
                    "}" +
                "}" +
                // 先给页面已有的视频绑定点击事件
                "bindVideoClick();" +
                // 监听DOM变化，给新加载的视频绑定事件
                "var observer = new MutationObserver(function(mutations) {" +
                    "mutations.forEach(function(mutation) {" +
                        "if(mutation.addedNodes.length > 0){" +
                            "bindVideoClick();" +
                        "}" +
                    "});" +
                "});" +
                "observer.observe(document.body, {" +
                    "childList: true," +
                    "subtree: true" +
                "});" +
            "})()";
        // 执行注入的JS脚本
        view.evaluateJavascript(jsScript, null);
    }
});

四、针对Facebook等特殊网站的调整 #

有些网站的视频点击触发元素不是直接的<video>标签，比如Facebook的视频播放按钮是外层的div（带有data-testid="video-play-button"属性）。这时候需要修改JS中的选择器，比如把document.getElementsByTagName('video')换成document.querySelectorAll('[data-testid="video-play-button"]')，监听实际的点击触发元素。

你可以用Chrome开发者工具（电脑打开网页按F12）查看页面元素，找到实际的视频点击节点，再调整JS选择器即可。

注意事项 #

• 安全风险：如果WebView加载的是不可信网页，谨慎使用addJavascriptInterface，可以考虑用WebMessagePort（API 23+）替代，安全性更高。
• 线程切换：JS调用原生方法在后台线程，更新UI操作必须切换到主线程。
• 兼容性：MutationObserver是HTML5特性，Android WebView在API 16及以上版本支持。

内容的提问来源于stack exchange，提问作者Aasim Pervaiz