Android中如何让WebView内嵌入Tweet的视频点击播放即全屏

要实现点击WebView中Tweet视频的播放按钮直接进入全屏，核心是拦截视频播放事件并主动触发全屏请求，结合自定义WebChromeClient完成全屏渲染。以下是具体实现步骤：

关键配置与代码修改 #

1. 配置WebView基础参数 #

首先确保WebView启用JavaScript支持，并关闭媒体播放的手势限制（默认Android要求用户手势才能触发播放/全屏）：

webView.apply {
    settings.javaScriptEnabled = true
    settings.domStorageEnabled = true
    // 允许JS触发媒体播放和全屏，无需额外用户手势
    settings.mediaPlaybackRequiresUserGesture = false
    webChromeClient = CustomChromeClient(this@YourActivity)
}

2. 注入JavaScript监听视频播放事件 #

在页面加载完成后，注入JS代码监听所有视频元素的play事件，一旦触发播放就主动请求全屏。同时处理动态加载的Tweet视频（比如滚动加载的内容）：

webView.webViewClient = object : WebViewClient() {
    override fun onPageFinished(view: WebView?, url: String?) {
        super.onPageFinished(view, url)
        val injectJs = """
            document.addEventListener('DOMContentLoaded', function() {
                function bindVideoPlayListener() {
                    const videos = document.getElementsByTagName('video');
                    for (let i = 0; i < videos.length; i++) {
                        const video = videos[i];
                        if (!video.hasAttribute('data-fullscreen-bound')) {
                            video.addEventListener('play', function() {
                                if (!document.fullscreenElement) {
                                    this.requestFullscreen().catch(err => {});
                                }
                            });
                            video.setAttribute('data-fullscreen-bound', 'true');
                        }
                    }
                }

                // 初始化绑定已有视频
                bindVideoPlayListener();

                // 监听DOM变化，处理动态加载的视频
                const observer = new MutationObserver(function(mutations) {
                    mutations.forEach(mutation => {
                        if (mutation.addedNodes.length > 0) {
                            bindVideoPlayListener();
                        }
                    });
                });
                observer.observe(document.body, { childList: true, subtree: true });
            });
        """.trimIndent()
        loadUrl("javascript:$injectJs")
    }
}

3. 完善自定义WebChromeClient #

优化全屏逻辑，处理系统UI的显示/隐藏，确保全屏体验和iOS一致：

class CustomChromeClient(val activity: ComponentActivity) : WebChromeClient() {
    private var customView: View? = null
    private var customViewCallback: CustomViewCallback? = null

    override fun onHideCustomView() {
        customView?.let {
            (activity.window.decorView as FrameLayout).removeView(it)
            customView = null
        }
        customViewCallback?.onCustomViewHidden()
        customViewCallback = null
        // 恢复系统UI
        activity.window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_VISIBLE
        activity.supportActionBar?.show()
    }

    override fun onShowCustomView(paramView: View, paramCustomViewCallback: CustomViewCallback) {
        if (customView != null) {
            onHideCustomView()
            return
        }
        customView = paramView
        customViewCallback = paramCustomViewCallback
        // 隐藏状态栏、导航栏，进入沉浸式全屏
        activity.window.decorView.systemUiVisibility = (View.SYSTEM_UI_FLAG_FULLSCREEN
                or View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
                or View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY)
        activity.supportActionBar?.hide()
        val layoutParams = FrameLayout.LayoutParams(
            FrameLayout.LayoutParams.MATCH_PARENT,
            FrameLayout.LayoutParams.MATCH_PARENT
        )
        (activity.window.decorView as FrameLayout).addView(customView, layoutParams)
    }

    // 兼容部分WebView的全屏回调重载
    override fun onShowCustomView(paramView: View, paramInteger: Int, paramCustomViewCallback: CustomViewCallback) {
        onShowCustomView(paramView, paramCustomViewCallback)
    }
}

核心说明 #

• mediaPlaybackRequiresUserGesture = false 是关键，否则JS触发的全屏请求会被WebView拦截
• MutationObserver用于监听动态加载的Tweet内容，确保新出现的视频也能绑定全屏逻辑
• 自定义WebChromeClient处理全屏视图的添加/移除，同时管理系统UI状态，保证全屏体验的完整性

内容的提问来源于stack exchange，提问作者Adil Bhatty