如何使用html5的PageVisibilityAPI来实现获取焦点js事件

//当前窗口得到焦点 
window.onfocus = function() { 
 //播放动画或视频 
}; 
 
//当前窗口失去焦点 
window.onblur = function() { 
 //暂停动画或视频 
};

document.addEventListener('visibilitychange', function() { 
 var isHidden = document.hidden; 
 if (isHidden) { 
 // 动画视频暂停 
 } else { 
 // 动画视频开始 
 } 
});

var videoElement = document.getElementById("videoElement"); 
 
// 如果页面被隐藏，则暂停播放，如果页面恢复，则继续播放 
function handleVisibilityChange() { 
 if (document[hidden]) { 
 videoElement.pause(); 
 } else { 
 videoElement.play(); 
 } 
} 
 
// 判断浏览器的支持情况 
if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") { 
 consol.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API."); 
} else { 
 // 监听visibilityChange事件 
 document.addEventListener(visibilityChange, handleVisibilityChange, false); 
 
 // 当播放器暂停的时候，将页面标题设置为：Paused. 
 videoElement.addEventListener("pause", function(){ 
 document.title = 'Paused'; 
 }, false); 
 
 // 当播放器正常播放时，将页面标题设置为：Playing. 
 videoElement.addEventListener("play", function(){ 
 document.title = 'Playing'; 
 }, false); 
}