IOS H5页面离开/隐藏videojs视频无法暂停

移动端兼容性问题

问题：IOS H5页面离开/隐藏videojs视频无法暂停

• 环境：IOS 16.x，iPhoneXR IOS App中嵌入H5
• 软件版本：vue：3.3.4，videojs: 8.16.1
• 现象：Vue3页面，H5无法监听页面离开事件，导致路由离开或者息屏，videojs播放器无法暂停播放/静音
• 解决方法：

// player是播放器实例
const handlePageLeave = (): void => {
  player.value?.pause()
}

const handleVisibilityChange = (): void => {
  if (document?.hidden) {
    player.value?.pause()
  }
}

// 组件挂载
onMounted(async () => {
  // 添加事件监听器
  window.addEventListener('beforeunload', handlePageLeave)
  window.addEventListener('pagehide', handlePageLeave)
  document.addEventListener('visibilitychange', handleVisibilityChange)
})

// 组件卸载
onUnmounted(() => {
  // 移除事件监听器
  window.removeEventListener('beforeunload', handlePageLeave)
  window.removeEventListener('pagehide', handlePageLeave)
  document.removeEventListener('visibilitychange', handleVisibilityChange)
})