考慮到這個API在各個版本各個型別的瀏覽器表現有所不同，所以小鄒下面給大夥出一個相容性的寫法：

// 設定隱藏屬性和改變可見屬性的事件的名稱
var hidden, visibilityChange; 
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support 
  hidden = "hidden";
  visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
}
 
var videoElement = document.getElementById("videoElement");

// 如果頁面是隱藏狀態，則暫停視訊
// 如果頁面是展示狀態，則播放視訊
function handleVisibilityChange() {
  if (document[hidden]) {
    videoElement.pause();
  } else {
    videoElement.play();
  }
}

// 如果瀏覽器不支援addEventListener 或 Page Visibility API 給出警告
if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
  console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
} else {
  // 處理頁面可見屬性的改變
  document.addEventListener(visibilityChange, handleVisibilityChange, false);
    
  // 當視訊暫停，設定title
  // This shows the paused
  videoElement.addEventListener("pause", function(){
    document.title = 'Paused';
  }, false);
    
  // 當視訊播放，設定title
  videoElement.addEventListener("play", function(){
    document.title = 'Playing'; 
  }, false);

}