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

在微信H5页面中，视频播放时监听页面关闭事件（如用户关闭页面或切换到其他应用）是一个常见的需求。由于微信环境的特殊性，直接使用标准的beforeunload或unload事件可能无法在所有情况下可靠触发。以下是一些可行的解决方案：

1. 使用 pagehide 和 visibilitychange 事件

微信内置浏览器（基于X5内核）支持标准的pagehide和visibilitychange事件，可以用来监听页面隐藏或关闭的情况。

// 监听页面隐藏事件
window.addEventListener('pagehide', function() {
    console.log('页面即将关闭或隐藏');
    // 在这里执行视频暂停或其他清理操作
});

// 监听页面可见性变化
document.addEventListener('visibilitychange', function() {
    if (document.visibilityState === 'hidden') {
        console.log('页面隐藏');
        // 在这里执行视频暂停或其他清理操作
    }
});

2. 使用 beforeunload 事件

虽然beforeunload事件在微信中可能不会在所有情况下触发，但在某些场景下仍然可以使用。

window.addEventListener('beforeunload', function() {
    console.log('页面即将关闭');
    // 在这里执行视频暂停或其他清理操作
});

3. 使用微信JS-SDK

如果你在微信环境中开发H5页面，可以使用微信JS-SDK来监听页面的生命周期事件。

wx.ready(function() {
    wx.onMenuShareTimeline(function() {
        console.log('用户分享到朋友圈');
        // 在这里执行视频暂停或其他清理操作
    });

    wx.onMenuShareAppMessage(function() {
        console.log('用户分享给朋友');
        // 在这里执行视频暂停或其他清理操作
    });
});

4. 使用 setInterval 轮询检测

如果上述方法都无法满足需求，可以考虑使用setInterval轮询检测页面的状态。

let lastVisibleTime = Date.now();

setInterval(function() {
    if (document.visibilityState === 'hidden') {
        console.log('页面隐藏');
        // 在这里执行视频暂停或其他清理操作
    }
}, 1000); // 每秒检测一次

5. 结合 onHide 和 onShow 事件

如果你使用的是微信小程序或公众号H5页面，可以使用微信提供的onHide和onShow事件来监听页面的隐藏和显示。

wx.onAppHide(function() {
    console.log('小程序进入后台');
    // 在这里执行视频暂停或其他清理操作
});

wx.onAppShow(function() {
    console.log('小程序回到前台');
    // 在这里执行视频恢复或其他操作
});

总结

在微信H5页面中监听页面关闭事件，推荐使用pagehide和visibilitychange事件，因为它们在现代浏览器中支持较好，并且在微信环境中也能可靠触发。如果需要在微信小程序或公众号中使用，可以结合微信JS-SDK或小程序的生命周期事件来实现。