微信H5视频关闭事件监听：iOS设备捕捉技巧

微信H5视频播放页面在iOS设备上关闭时，监听事件（如`visibilitychange`和`pagehide`）存在可靠性问题，导致无法可靠地执行诸如保存播放进度等操作。本文针对iOS微信浏览器环境下H5视频页面关闭事件监听的可靠性问题，提出了一种更稳健的解决方案：通过同时监听`beforeunload`、`unload`、`pagehide`和`visibilitychange`四个事件，并结合`sendBeacon` API异步发送数据，有效提高数据上传成功率，避免数据丢失，最终实现可靠的页面关闭事件监听。

微信H5视频播放页面关闭事件监听：iOS设备可靠性解决方案

在微信小程序内嵌H5页面播放视频时，开发者通常需要在用户关闭页面时执行特定操作，例如保存播放进度或上传播放记录。然而，iOS设备上常用的visibilitychange和pagehide事件在某些情况下并不可靠。本文提供一种更稳健的方案。

问题： iOS微信浏览器中，H5页面播放视频后，用户关闭页面时，visibilitychange和pagehide事件监听器可能无法正常工作。例如：

window.addEventListener("pagehide", handler);
const handler = (e) => {
    localStorage.setItem("videoplay", true);
};

这段代码在iOS微信环境下，pagehide事件可能失效。

解决方案： 为了提高可靠性，我们采用多事件监听器结合sendBeacon API 的方法：

window.addEventListener('beforeunload', sendData);
window.addEventListener("unload", sendData);
window.addEventListener("pagehide", sendData);
window.addEventListener("visibilitychange", sendData);

function sendData() {
    clearInterval(timer); // 清除定时器，防止内存泄漏
    let blob = new Blob([JSON.stringify(params)], { type: 'application/json' });
    navigator.sendBeacon(window.location.origin + '请求路径', blob);
}

这段代码监听了beforeunload、unload、pagehide和visibilitychange四个事件。sendBeacon API 允许在页面卸载时异步发送数据，即使页面已关闭，也能最大程度保证数据发送成功。 clearInterval(timer) 用于防止潜在的内存泄漏（假设timer是一个在页面中使用的定时器）。 我们使用单个sendData函数来避免代码冗余。

由于不同设备和浏览器对事件的支持程度不同，建议同时监听多个事件以确保覆盖所有情况。 通过这种方法，可以显著提升在iOS微信环境下捕捉页面关闭事件的可靠性。

今天关于《微信H5视频关闭事件监听：iOS设备捕捉技巧》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！