目录。

• • • 问题描述。
    • Page Visibility API 的应用。
    • 什么是 Page Visibility API？
    • 使用 Page Visibility API 暂停音视频。
    • 完整的解决方案。
    • • 1. 监控媒体的播放和暂停。
      • 2. 防止自动播放。
      • 3. 结合 Intersection Observer 媒体控制。
      • 4. 在应用生命周期中手动处理事件。

问题描述。

在 iOS 在客户端中󿀌通过 WebView 打开 H5 页面时，视频或音频内容包含在页面中࿰中c;WebView 这些媒体将在默认情况下继续在后台播放。即使用户切换到其他应用程序，媒体也不会停止播放。，这可能会导致以下问题：

1. 用户体验差：使用者可能没有意识到音频或视频继续播放，产生意想不到的声音输出。

2. #xff1消耗电量和数据流量a;后台播放会消耗不必要的设备电量和流量，影响用户的电池寿命和流量使用。

3. 隐私问题：后台播放的音频或视频内容可能是用户不想被别人听到的，影响用户隐私。

为了解决这些问题󿀌我们可以从 H5 页面（前端代码）采取相应措施，确保在 WebView 进入后台时，音视频可以停止播放。

Page Visibility API 的应用。

在 H5 ࿰在页面上c;我们能用 Page Visibility API 监控页面的可见性变化，从而做出相应的处理。Page Visibility API 允许开发者检测页面是否在浏览器的视觉区域，当页面看不见时，#xff00c;为了暂停音视频的播放，触发相应的逻辑。

什么是 Page Visibility API？

Page Visibility API 是一种网页可见性检测机制，通过 document.visibilityState 和 visibilitychange 事件，开发人员可以知道页面的当前状态是否可见。这个 API 在处理 WebView 后台行为非常有用。这个 API 在处理 WebView 后台行为非常有用。

document.visibilityState。：用于获取当前页面的可见状态，值可以是 visible（可见）或 hidden（隐藏）。

visibilitychange。事件：当页面的可见性状态发生变化时（例如，切换到后台），这一事件将被触发。

使用 Page Visibility API 暂停音视频。

以下是一个简单的代码示例，展示如何使用 Page Visibility API 暂停页面中的所有音频和视频：

// 监控页面的可见性变化。document。.。addEventListener。(。'visibilitychange',function。(。)。{ 。observer。.。observe。(。element。)。;}。)。;

这种方法可以进一步提高音视频控制的灵活性，确保用户在滚动页面或切换标签时，视频和音频不会继续播放。

4. 在应用生命周期中手动处理事件。

对于某些场景󿀌我们可以直接与移动应用程序开发团队合作c;通过信息传递，当应用程序进入后台时，󿀌通知 WebView 执行 JavaScript 暂停媒体播放代码。iOS 开发人员可以通过 WebKit 的 evaluateJavaScript 该方法执行前端提供的暂停脚本。

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