如何使用html5的Page Visibility API來實作取得焦點js事件

當前視窗獲得焦點js事件，html5發布之前我們使用window.onfocus和window.onblur來獲得視窗焦點和失去視窗焦點

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

這個方法可以實現切換標籤暫停動畫視頻，但是會帶來一個問題，由於是判斷焦點，如果是在當前頁面上鋪上一個小窗口，那麼當前頁面就暫停了動畫，試想，如果你一邊看片，一邊開個聊天窗口與MM聊天，當你操作聊天視窗的時候，影片暫停了，這並不是你想要的效果。

現在我們來看看HTML5是怎麼解決的。 H5 提供了許多簡單實用的 API，Page Visibility API 就是其中之一。 Page Visibility API能有效的幫助我們完成這樣的判斷。

使用html5的Page Visibility API來實作

這個 API 本身非常簡單，由以下三個部分組成。

document.hidden：表示頁面是否隱藏的布林值。頁面隱藏包含 頁面在後台標籤頁 或 瀏覽器最小化 （注意，頁面被其他軟體遮蓋並不算隱藏，例如開啟的 sublime 遮住了瀏覽器）。

document.visibilityState：表示下面4 個可能狀態的值

hidden：頁面在後台標籤頁中或瀏覽器最小化

visible：頁面在前台標籤頁中

prerender：頁面在螢幕外執行預渲染處理document.hidden 的值為true

unloaded：頁面正在從記憶體卸載

Visibilitychange事件：當文件從可見變成不可見或從不可見變成可見時，會觸發該事件。

這樣，我們可以監聽 Visibilitychange 事件，當該事件觸發時，取得 document.hidden 的值，根據該值進行頁面一些事件的處理。

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

結合demo中的實例，切換標籤或最小化的時候，demo中的影片會暫停，恢復目前頁面時，demo中的影片會繼續播放。完整的程式碼如下：

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); 
}

以上是如何使用html5的Page Visibility API來實作取得焦點js事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！