如何处理 iOS 客户端内 Webview H5 中后台播放的音视频问题

问题描述

在 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 来暂停页面中的所有音频和视频：

javascript 复制代码

// 监听页面的可见性变化
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 事件。当页面进入后台时，强制暂停所有的音视频播放。

javascript 复制代码

// 强制控制音视频播放
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 属性移除：

javascript 复制代码

<video controls>
    <source src="example.mp4" type="video/mp4">
    您的浏览器不支持 HTML5 视频。
</video>

确保视频元素没有 autoplay 属性，这样可以避免不必要的自动播放。

结合 Intersection Observer 进行媒体控制

除了 Page Visibility API 之外，还可以使用 Intersection Observer API 来检测视频或音频元素是否在视口内，如果它们不可见，则暂停播放。

javascript 复制代码

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 方法执行前端提供的暂停脚本。

javascript 复制代码

let js = "document.querySelectorAll('video, audio').forEach(media => media.pause());"
webView.evaluateJavaScript(js, completionHandler: nil)