Android WebView音视频回调监听与原生播放器冲突解决

方案1：通过JS注入监听WebView内媒体播放状态 #

WebView中的HTML5媒体元素（包括iframe嵌入的YouTube视频、音频流）都支持标准的play/pause/ended事件，我们可以注入JS代码监听这些事件，再通过JS桥通知Android原生层更新播放状态。

实现步骤： #

1. 给WebView添加JS接口，用于接收媒体状态回调：

public class WebViewMediaInterface {
    private final WeakReference<ArticleDetailFragment> fragmentRef;

    public WebViewMediaInterface(ArticleDetailFragment fragment) {
        this.fragmentRef = new WeakReference<>(fragment);
    }

    @JavascriptInterface
    public void onMediaStartPlaying() {
        ArticleDetailFragment fragment = fragmentRef.get();
        if (fragment != null) {
            fragment.setIsWebViewPlayingMedia(true);
            fragment.pauseTopPlayer();
        }
    }

    @JavascriptInterface
    public void onMediaStopPlaying() {
        ArticleDetailFragment fragment = fragmentRef.get();
        if (fragment != null) {
            fragment.setIsWebViewPlayingMedia(false);
            // 可根据业务需求恢复播放（如果用户之前在播放顶部视频）
            // fragment.resumeTopPlayerIfNeeded();
        }
    }
}

2. 在WebView初始化时注入监听JS：

webView.addJavascriptInterface(new WebViewMediaInterface(this), "MediaCallback");

webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        // 注入监听所有媒体元素的JS代码
        String js = """
            (function() {
                function setupMediaListeners(media) {
                    media.addEventListener('play', () => MediaCallback.onMediaStartPlaying());
                    media.addEventListener('pause', () => MediaCallback.onMediaStopPlaying());
                    media.addEventListener('ended', () => MediaCallback.onMediaStopPlaying());
                }
                
                // 处理页面已加载的video/audio元素
                document.querySelectorAll('video, audio').forEach(setupMediaListeners);
                
                // 监听DOM变化，处理动态加载的媒体元素
                const observer = new MutationObserver(mutations => {
                    mutations.forEach(mutation => {
                        mutation.addedNodes.forEach(node => {
                            if (node.tagName === 'VIDEO' || node.tagName === 'AUDIO') {
                                setupMediaListeners(node);
                            }
                            // 处理iframe（如YouTube嵌入）
                            if (node.tagName === 'IFRAME') {
                                node.onload = () => {
                                    try {
                                        const iframeDoc = node.contentDocument || node.contentWindow.document;
                                        iframeDoc.querySelectorAll('video, audio').forEach(setupMediaListeners);
                                    } catch(e) {
                                        // 跨域iframe无法直接访问，依赖音频焦点方案兜底
                                    }
                                };
                            }
                        });
                    });
                });
                
                observer.observe(document.body, { childList: true, subtree: true });
            })();
        """;
        webView.evaluateJavascript(js, null);
    }
});

注意：跨域iframe（如官方YouTube嵌入链接）无法直接访问内部DOM，需依赖方案2兜底覆盖这类场景。

方案2：通过AudioManager监听音频焦点变化 #

Android系统中，任何媒体播放都会请求音频焦点，我们可以监听焦点的获取与丢失，判断是否有其他媒体（含WebView内的）在播放，从而控制顶部原生播放器。

实现步骤： #

1. 初始化AudioManager并注册焦点监听：

private AudioManager audioManager;
private AudioFocusRequest audioFocusRequest;

@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);
    audioManager = (AudioManager) requireContext().getSystemService(Context.AUDIO_SERVICE);
    
    audioFocusRequest = new AudioFocusRequest.Builder(AudioManager.AUDIOFOCUS_GAIN)
            .setAudioAttributes(new AudioAttributes.Builder()
                    .setUsage(AudioAttributes.USAGE_MEDIA)
                    .setContentType(AudioAttributes.CONTENT_TYPE_MOVIE)
                    .build())
            .setOnAudioFocusChangeListener(focusChangeListener)
            .build();
}

private final AudioManager.OnAudioFocusChangeListener focusChangeListener = focusChange -> {
    switch (focusChange) {
        case AudioManager.AUDIOFOCUS_LOSS:
        case AudioManager.AUDIOFOCUS_LOSS_TRANSIENT:
        case AudioManager.AUDIOFOCUS_LOSS_TRANSIENT_CAN_DUCK:
            setIsWebViewPlayingMedia(true);
            pauseTopPlayer();
            break;
        case AudioManager.AUDIOFOCUS_GAIN:
            setIsWebViewPlayingMedia(false);
            // resumeTopPlayerIfNeeded();
            break;
    }
};

2. 顶部原生播放器播放前请求音频焦点：

public void playTopPlayer() {
    if (isWebViewPlayingMedia()) {
        // WebView正在播放，拦截原生播放器播放请求
        return;
    }
    int result = audioManager.requestAudioFocus(audioFocusRequest);
    if (result == AudioManager.AUDIOFOCUS_REQUEST_GRANTED) {
        // 执行Brightcove/YouTube SDK播放逻辑
        brightcovePlayer.play();
        // 或 youtubePlayer.loadVideo(...)
    }
}

public void pauseTopPlayer() {
    brightcovePlayer.pause();
    // 或 youtubePlayer.pause();
    audioManager.abandonAudioFocusRequest(audioFocusRequest);
}

该方案能覆盖所有媒体播放场景，因为WebView和原生播放器都会遵循系统音频焦点规则。

方案3：WebChromeClient全屏播放回调（补充） #

如果WebView内媒体会进入全屏播放，可通过WebChromeClient的回调处理：

webView.setWebChromeClient(new WebChromeClient() {
    @Override
    public void onShowCustomView(View view, CustomViewCallback callback) {
        super.onShowCustomView(view, callback);
        setIsWebViewPlayingMedia(true);
        pauseTopPlayer();
    }

    @Override
    public void onHideCustomView() {
        super.onHideCustomView();
        setIsWebViewPlayingMedia(false);
        // resumeTopPlayerIfNeeded();
    }
});

综合建议 #

• 优先结合方案1+方案2，方案1覆盖可访问DOM的媒体元素，方案2兜底跨域或JS无法监听的场景。
• 在isWebViewPlayingMedia标志为true时，拦截顶部原生播放器的播放请求（比如用户点击播放按钮时先检查标志）。
• 使用WeakReference持有Fragment引用，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Er. Harsh Rathore