Android WebView暂停音视频且不中断页面渲染的实现难题

问题分析 #

你尝试的几种方法都存在缺陷：

• webView.onPause() 及其反射调用：会暂停WebView的所有渲染、解析和JavaScript执行，直接中断页面渲染，不符合需求。
• 原有JavaScript脚本：未处理iframe内的媒体（很多网页视频嵌入在iframe中），currentTime=-1存在兼容性问题，且无法覆盖动态加载的媒体元素，导致部分音频仍继续播放。

优化方案 #

1. 完善的JavaScript暂停脚本 #

该脚本会遍历当前页面及同域iframe内的所有音视频元素，确保暂停并重置状态，同时处理同源策略限制：

function pauseAllMedia(targetWindow) {
    // 暂停当前窗口的所有音视频
    const mediaElements = [...targetWindow.document.querySelectorAll('video, audio')];
    mediaElements.forEach(media => {
        if (!media.paused) {
            media.pause();
            media.currentTime = 0; // 重置到开头，避免残留播放
            media.volume = 0;
        }
    });

    // 处理同域iframe内的媒体（跨域iframe受同源策略限制无法访问）
    const iframes = targetWindow.document.querySelectorAll('iframe');
    iframes.forEach(iframe => {
        try {
            pauseAllMedia(iframe.contentWindow);
        } catch (e) {
            console.log('无法访问跨域iframe:', e);
        }
    });
}

// 执行暂停操作
pauseAllMedia(window);

2. 在Android中调用脚本 #

使用evaluateJavascript执行上述脚本，确保仅暂停媒体而不影响页面渲染：

val pauseMediaJs = """
function pauseAllMedia(targetWindow) {
    const mediaElements = [...targetWindow.document.querySelectorAll('video, audio')];
    mediaElements.forEach(media => {
        if (!media.paused) {
            media.pause();
            media.currentTime = 0;
            media.volume = 0;
        }
    });

    const iframes = targetWindow.document.querySelectorAll('iframe');
    iframes.forEach(iframe => {
        try {
            pauseAllMedia(iframe.contentWindow);
        } catch (e) {
            console.log('无法访问跨域iframe:', e);
        }
    });
}
pauseAllMedia(window);
""".trimIndent()

// 执行脚本
webView.evaluateJavascript(pauseMediaJs) { result ->
    // 可选：处理脚本执行结果
}

3. 处理动态加载的媒体元素 #

如果页面存在滚动或交互后动态加载的音视频，可以结合MutationObserver监听新增元素，自动暂停：

function setupMediaObserver(targetWindow) {
    const observer = new MutationObserver((mutations) => {
        mutations.forEach(mutation => {
            mutation.addedNodes.forEach(node => {
                if (node.tagName === 'VIDEO' || node.tagName === 'AUDIO') {
                    node.pause();
                    node.currentTime = 0;
                    node.volume = 0;
                } else if (node.tagName === 'IFRAME') {
                    try {
                        pauseAllMedia(node.contentWindow);
                        setupMediaObserver(node.contentWindow);
                    } catch (e) {}
                }
            });
        });
    });

    // 监听body下所有子元素变化
    observer.observe(targetWindow.document.body, {
        childList: true,
        subtree: true
    });
}

// 初始化观察者+暂停现有媒体
setupMediaObserver(window);
pauseAllMedia(window);

注意事项 #

• 跨域iframe内的媒体无法通过JS脚本控制，这是浏览器同源策略的限制，此类场景可考虑通过Android的音频焦点管理来间接暂停（比如申请音频焦点后，系统会暂停其他音频播放）。
• 确保在合适的时机调用脚本，比如App进入后台、用户触发暂停按钮时。

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