How to use HTML5's Page Visibility API to achieve focus js events

The current window gets focus js event. Before HTML5 was released, we used window.onfocus and window.onblur to gain and lose window focus.

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

This method can realize switching tags and pausing animated videos, but it will cause Let me have a question. Since it is the focus of judgment, if a small window is placed on the current page, the animation will be paused on the current page. Just imagine, if you open a chat window to chat with MM while watching a movie, when you operate the chat When the window is opened, the video is paused, which is not the effect you want.

Now let’s see how HTML5 solves it. H5 provides many simple and practical APIs, and Page Visibility API is one of them. Page Visibility API can effectively help us complete this judgment.

Use the Page Visibility API of html5 to implement

The API itself is very simple and consists of the following three parts.

document.hidden: A Boolean value indicating whether the page is hidden. Hiding the page includes the page being in a background tab or minimizing the browser (note that a page covered by other software does not count as hidden, such as an open sublime covering the browser).

document.visibilityState: Value representing the following 4 possible states

hidden: the page is in the background tab or the browser is minimized

visible: the page is in the foreground tab Medium

prerender: The page performs pre-rendering processing outside the screen. The value of document.hidden is true

unloaded: The page is being unloaded from memory

Visibilitychange event: When the document is unloaded from memory This event is triggered when visible becomes invisible or from invisible to visible.

In this way, we can listen to the Visibilitychange event. When the event is triggered, get the value of document.hidden and process some events on the page based on this value.

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

Combined with the examples in the demo, when switching tabs or minimizing, the video in the demo will be paused. When the current page is restored, the video in the demo will continue to play. The complete code is as follows:

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

The above is the detailed content of How to use HTML5's Page Visibility API to achieve focus js events. For more information, please follow other related articles on the PHP Chinese website!