如何在Android WebView或视频播放器中加载Twitch直播并实现自动播放

Twitch 官方嵌入播放器默认仅在页面首次加载时校验目标频道的直播状态，若页面加载完成后频道才开播，播放器不会自动触发状态刷新和播放逻辑，需主动触发状态检测才能正常播放，可通过以下方案实现自动播放：

一、WebView 基础配置（必须配置） #

先完成WebView基础权限配置，保证播放器可以正常加载和自动触发播放：

val webSettings = webView.settings
// 允许执行JS，Twitch播放器依赖JS运行
webSettings.javaScriptEnabled = true
// 关闭媒体播放需要用户手势的限制，允许自动播放
webSettings.mediaPlaybackRequiresUserGesture = false
// 开启DOM存储，播放器需要存储临时配置
webSettings.domStorageEnabled = true
// 允许加载混合内容，避免HTTPS页面下的资源加载失败
webSettings.mixedContentMode = WebSettings.MIXED_CONTENT_ALWAYS_ALLOW
// 禁用跳转外部浏览器，所有内容都在当前WebView加载
webView.webViewClient = WebViewClient()
webView.webChromeClient = WebChromeClient()

注意：你当前使用的加载链接中parent参数需要替换为你实际使用的域名，否则Twitch播放器会触发跨域限制无法正常加载。

二、核心方案：注入JS实现直播状态轮询与自动播放 #

通过WebView注入自定义JS逻辑，定时调用Twitch嵌入播放器的公开API检测直播状态，检测到频道开播后自动触发播放：

• 注入时机选择在WebView页面加载完成回调onPageFinished中执行
• 轮询间隔建议设置为20~30秒，避免频繁请求消耗资源

代码示例：

webView.webViewClient = object : WebViewClient() {
    override fun onPageFinished(view: WebView?, url: String?) {
        super.onPageFinished(view, url)
        // 注入轮询检测JS
        val checkJs = """
            setInterval(() => {
                // 检测当前是否处于离线状态
                const isOffline = document.querySelector('.tw-player-offline-banner') != null;
                const livePlayer = document.querySelector('video');
                if (!isOffline && livePlayer && livePlayer.paused) {
                    // 检测到直播已开播且未播放，主动触发播放
                    livePlayer.play();
                }
            }, 30000); // 每30秒检测一次
        """.trimIndent()
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            webView.evaluateJavascript(checkJs, null)
        } else {
            webView.loadUrl("javascript:$checkJs")
        }
    }
}

如果上述JS选择器无法匹配新版Twitch播放器界面，可以根据实际DOM结构调整离线状态的判断逻辑。

三、兜底优化方案 #

如果注入JS的方案存在兼容性问题，可以增加原生侧的兜底逻辑：

• 预先请求Twitch公开的频道直播状态接口，确认频道开播后再加载WebView播放器页面
• 若页面加载后10分钟仍未检测到播放行为，自动触发webView.reload()重新加载页面，无需用户手动操作

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