问题描述
在 iOS 客户端中，通过 WebView 打开 H5 页面时，如果页面中包含视频或音频内容，WebView 默认情况下会继续在后台播放这些媒体。即使用户切换到了其他应用，媒体也不会停止播放，这可能导致以下几个问题：
-
用户体验差：用户可能没有意识到音频或视频在继续播放，产生意外的声音输出。
-
电量和数据流量的消耗：后台播放会消耗不必要的设备电量和流量，影响用户的电池续航和流量使用。
-
隐私问题：后台播放的音频或视频内容可能是用户不希望被别人听到的，影响用户隐私。
为了解决这些问题，我们可以从 H5 页面（前端代码）的角度采取相应的措施，确保在 WebView 进入后台时，音视频能够停止播放。
Page Visibility API 的应用
在 H5 页面中，我们可以使用 Page Visibility API 来监听页面的可见性变化，从而做出相应的处理。Page Visibility API 允许开发者检测页面当前是否在浏览器的可视区域中，当页面不可见时，触发相应的逻辑来暂停音视频的播放。
什么是 Page Visibility API？
Page Visibility API 是一种网页的可见性检测机制，通过 document.visibilityState 和 visibilitychange 事件，开发者可以得知页面当前的状态是否为可见。这个 API 在处理 WebView 的后台行为时非常有用。
document.visibilityState：用于获取页面当前的可见状态，值可以是 visible（可见）或 hidden（隐藏）。
visibilitychange 事件：当页面的可见性状态发生变化时（例如切换到后台），这个事件就会被触发。
使用 Page Visibility API 暂停音视频
以下是一个简单的代码示例，展示如何使用 Page Visibility API 来暂停页面中的所有音频和视频：
// 监听页面的可见性变化
document.addEventListener('visibilitychange', function() {
if (document.visibilityState === 'hidden') {
// 获取页面中所有的视频和音频元素
var videos = document.querySelectorAll('video');
var audios = document.querySelectorAll('audio');
// 遍历所有视频并暂停播放
videos.forEach(function(video) {
video.pause();
});
// 遍历所有音频并暂停播放
audios.forEach(function(audio) {
audio.pause();
});
} else if (document.visibilityState === 'visible') {
// 可选：页面重新可见时恢复播放
var videos = document.querySelectorAll('video[data-autoplay-resume="true"]');
var audios = document.querySelectorAll('audio[data-autoplay-resume="true"]');
videos.forEach(function(video) {
video.play();
});
audios.forEach(function(audio) {
audio.play();
});
}
});
代码解析：
-
监听 visibilitychange 事件：当页面的可见性发生变化时，会触发 visibilitychange 事件。
-
判断页面是否不可见：通过 document.visibilityState 判断页面是否为 hidden。
-
暂停视频和音频播放：当页面不可见时，获取页面中的所有 video 和 audio 元素，调用它们的 pause() 方法，确保音视频在后台不会继续播放。
-
页面重新可见时的自动恢复播放：当页面重新可见时，可选地恢复之前暂停的音视频播放，具体由自定义属性 data-autoplay-resume 标记需要恢复的媒体元素。
-
这种方法对于前端开发者来说简单且有效，无需与原生应用代码交互即可实现后台播放控制。
完整解决方案
尽管 Page Visibility API 是一种非常好的解决方法，但它有时可能并不完全可靠，尤其是在一些边界场景下（如不同的浏览器环境，或者由于其他因素导致的未检测到页面的可见性变化）。为了应对这些潜在的问题，我们可以进一步采取以下措施：
- 监听媒体的播放和暂停事件
为了增强控制的可靠性，我们可以监听页面中媒体元素的 play 和 pause 事件。当页面进入后台时，强制暂停所有的音视频播放。
// 强制控制音视频播放
function handleMediaPlayback() {
var videos = document.querySelectorAll('video');
var audios = document.querySelectorAll('audio');
videos.forEach(function(video) {
video.addEventListener('play', function() {
if (document.visibilityState === 'hidden') {
video.pause();
}
});
});
audios.forEach(function(audio) {
audio.addEventListener('play', function() {
if (document.visibilityState === 'hidden') {
audio.pause();
}
});
});
}
document.addEventListener('DOMContentLoaded', handleMediaPlayback);
通过监听媒体播放事件，我们可以更精确地控制音视频的播放，确保用户在切换页面或 WebView 进入后台时不会继续播放。
- 防止自动播放
在前端代码中，尽量避免设置音视频的自动播放属性。在 iOS WebView 中，如果设置了 autoplay，即使页面进入后台，媒体可能仍会继续播放。因此，应将 autoplay 属性移除：
<video controls>
<source src="example.mp4" type="video/mp4">
您的浏览器不支持 HTML5 视频。
</video>
确保视频元素没有 autoplay 属性，这样可以避免不必要的自动播放。
- 结合 Intersection Observer 进行媒体控制
除了 Page Visibility API 之外，还可以使用 Intersection Observer API 来检测视频或音频元素是否在视口内，如果它们不可见，则暂停播放。
let observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (!entry.isIntersecting) {
entry.target.pause();
}
});
});
// 观察所有视频和音频元素
let mediaElements = document.querySelectorAll('video, audio');
mediaElements.forEach((element) => {
observer.observe(element);
});
这种方法可以进一步提高音视频控制的灵活性，确保用户在滚动页面或切换标签时，视频和音频不会继续播放。
- 手动处理应用生命周期中的事件
对于一些场景，我们可以直接与移动应用开发团队合作，通过消息传递的方式，当应用进入后台时，通知 WebView 执行 JavaScript 代码来暂停媒体播放。iOS 开发者可以通过 WebKit 的 evaluateJavaScript 方法执行前端提供的暂停脚本。
let js = "document.querySelectorAll('video, audio').forEach(media => media.pause());"
webView.evaluateJavaScript(js, completionHandler: nil)
