在Android应用开发场景中，WebView是承载H5页面的重要组件，当H5页面包含音视频资源时，开发者常常需要实现音视频的精确暂停功能，避免页面切换、应用后台运行等场景下音视频持续播放的问题。
WebView基础配置准备
要实现音视频的精确控制，首先需要正确配置WebView的基础参数，开启必要的功能支持，以下是基础配置的代码实现：
// WebView基础配置方法
private void initWebView(WebView webView) {
WebSettings settings = webView.getSettings();
// 开启JavaScript支持，否则无法和H5页面进行交互
settings.setJavaScriptEnabled(true);
// 开启媒体播放支持
settings.setMediaPlaybackRequiresUserGesture(false);
// 设置WebChromeClient，用于处理音视频相关的回调
webView.setWebChromeClient(new WebChromeClient() {
@Override
public void onProgressChanged(WebView view, int newProgress) {
super.onProgressChanged(view, newProgress);
}
});
// 设置WebViewClient，处理页面加载相关逻辑
webView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
});
}
原生与H5交互实现暂停控制
通过原生和H5的JavaScript交互，可以直接调用H5页面中音视频元素的方法实现暂停，这是最常用的精确控制方式。
注入JavaScript接口
首先在原生端注入JavaScript接口，让H5可以调用原生的方法，同时原生也可以调用H5的JavaScript方法：
// 定义JavaScript交互接口
public class JsInterface {
private WebView mWebView;
public JsInterface(WebView webView) {
this.mWebView = webView;
}
// H5调用该方法，通知原生需要暂停所有音视频
@JavascriptInterface
public void pauseAllMedia() {
// 调用H5的暂停方法
mWebView.post(() -> mWebView.evaluateJavascript("pauseAllMedia();", null));
}
}
// 在初始化WebView时添加接口
webView.addJavascriptInterface(new JsInterface(webView), "AndroidInterface");
H5端实现暂停逻辑
在H5页面中，需要编写对应的JavaScript方法，遍历页面中的所有音视频元素并执行暂停操作：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>音视频页面</title>
</head>
<body>
<video id="testVideo" src="https://ipipp.com/test.mp4" controls></video>
<audio id="testAudio" src="https://ipipp.com/test.mp3" controls></audio>
<script>
// 暂停所有音视频的方法
function pauseAllMedia() {
// 获取所有video元素
const videoList = document.getElementsByTagName('video');
for (let i = 0; i < videoList.length; i++) {
videoList[i].pause();
}
// 获取所有audio元素
const audioList = document.getElementsByTagName('audio');
for (let i = 0; i < audioList.length; i++) {
audioList[i].pause();
}
}
// 原生调用H5的示例，也可以由H5主动调用AndroidInterface.pauseAllMedia()
</script>
</body>
</html>
原生主动触发暂停
当应用退到后台或者页面切换时，原生端可以直接调用H5的暂停方法：
// 应用退到后台时调用该方法暂停音视频
public void pauseWebViewMedia(WebView webView) {
// 调用H5的pauseAllMedia方法
webView.evaluateJavascript("pauseAllMedia();", null);
}
基于MediaSession的控制方式
Android 5.0及以上版本提供了MediaSession框架，可以和WebView的媒体播放进行联动，实现更系统的暂停控制。
// 初始化MediaSession
private void initMediaSession(WebView webView) {
MediaSession mediaSession = new MediaSession(this, "WebViewMediaSession");
mediaSession.setCallback(new MediaSession.Callback() {
@Override
public void onPause() {
super.onPause();
// 触发暂停逻辑
webView.evaluateJavascript("pauseAllMedia();", null);
}
@Override
public void onPlay() {
super.onPlay();
// 触发播放逻辑，对应H5中的播放方法
webView.evaluateJavascript("playAllMedia();", null);
}
});
// 激活MediaSession
mediaSession.setActive(true);
}
常见问题与解决方案
- 问题：调用暂停方法后音视频仍然播放。解决方案：检查JavaScript是否成功注入，H5中的暂停方法是否正确遍历了所有音视频元素，部分动态加载的音视频需要延迟调用暂停方法。
- 问题：应用后台运行后音视频自动恢复播放。解决方案：在Activity的onPause生命周期中调用暂停方法，同时结合MediaSession的回调处理。
- 问题：全屏播放时无法暂停。解决方案：重写WebChromeClient的onShowCustomView和onHideCustomView方法，在全屏切换时处理暂停逻辑。
注意事项
在使用<code>evaluateJavascript</code>方法时，需要注意该方法只能在主线程调用，否则会抛出异常。另外，如果H5页面中有iframe嵌套的音视频，需要递归遍历iframe中的音视频元素才能实现完全暂停，具体实现可以在H5的pauseAllMedia方法中添加iframe遍历逻辑。
Android_WebView音视频暂停WebChromeClientJavaScript交互MediaSession修改时间：2026-07-21 05:03:26