全局监听visibilitychange事件,定义有两个只读的document属性: hidden和visibilityStat
document.hidden是一个布尔值,简单的表示标签页显示或者隐藏(隐藏包括页面在后台标签页中或者浏览器最小化,但是不包括被其他软件比如打开的sublime遮盖)
document.visibilityState属性更详细,有四个值
=》visible: 页面在前台标签中
=》hidden: 页面在后台标签页或者浏览器最小化
=》uploaded: 页面正在从内存中卸载
=》prerender: 页面在屏幕外执行预渲染处理,document.hidden的值为true
mounted() {
let that = this
document.addEventListener('visibilitychange', function() {
if (document.visibilityState == 'hidden' && that.play) { // play:已点击播放
if (that.$refs.videoPlayer) { // 如果当前子页面有播放器
that.$refs.videoPlayer.player.pause() // 触发暂停,这是vue-video-player触发暂停的方法,其他播放器可能不一样
}
}
})
}