微信H5视频播放时，如何可靠监听页面关闭事件？

微信环境下H5页面视频播放与可靠的页面关闭事件监听

在微信小程序内嵌H5页面中，准确监听页面关闭事件对于保存视频播放进度或记录用户行为至关重要。然而，iOS微信浏览器中visibilitychange和pagehide事件在视频播放期间常常失效。本文提供一种更可靠的解决方案，解决iOS设备上微信H5页面视频播放时页面关闭事件监听失效的问题。

问题：

在iOS微信内置浏览器中，使用visibilitychange和pagehide事件监听H5页面关闭，在视频播放过程中，这些事件可能无法被触发。

解决方案：

由于iOS微信环境下visibilitychange和pagehide事件的不可靠性，我们采用多事件监听策略，并结合localStorage和navigator.sendBeacon，提高事件捕获的可靠性。

改进后的代码：

window.addEventListener('beforeunload', sendDataToServer);window.addEventListener('unload', sendDataToServer);window.addEventListener('pagehide', sendDataToServer);window.addEventListener('visibilitychange', sendDataToServer);function sendDataToServer() {    clearInterval(timer); // 清除可能存在的定时器，避免内存泄漏    let params = { /* your data here */ };    let blob = new Blob([JSON.stringify(params)], { type: 'application/json' });    navigator.sendBeacon(window.location.origin + '/your-api-endpoint', blob); // 替换'/your-api-endpoint' 为你的服务器端点    // 可选：localStorage 用于调试和验证哪个事件成功触发    localStorage.setItem('pageClosed', 'true'); }// ... your existing code ...

登录后复制