So verwenden Sie die Seitensichtbarkeits-API von HTML5, um Fokus-JS-Ereignisse zu erreichen

Das aktuelle Fenster erhält das Focus-JS-Ereignis. Vor der Veröffentlichung von HTML5 haben wir window.onfocus und window.onblur verwendet, um den Fensterfokus zu gewinnen und zu verlieren.

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

Diese Methode kann das Umschalten von Tags auf Pause realisieren Das Animationsvideo wird jedoch zu einem Problem führen. Wenn ein kleines Fenster auf der aktuellen Seite platziert wird, wird die Animation auf der aktuellen Seite angehalten. Stellen Sie sich vor, Sie öffnen ein Chat-Fenster Chatten Sie mit MM, während Sie einen Film ansehen. Wenn Sie das Chat-Fenster bedienen, wird das Video angehalten, was nicht der gewünschte Effekt ist.

Jetzt wollen wir sehen, wie HTML5 das Problem löst. H5 bietet viele einfache und praktische APIs, und die Page Visibility API ist eine davon. Die Page Visibility API kann uns effektiv dabei helfen, dieses Urteil zu vervollständigen.

Verwenden Sie zur Implementierung die Seitensichtbarkeits-API von HTML5

Die API selbst ist sehr einfach und besteht aus den folgenden drei Teilen.

document.hidden: Ein boolescher Wert, der angibt, ob die Seite ausgeblendet ist. Das Ausblenden der Seite umfasst, dass sich die Seite in einem Hintergrundtab befindet oder den Browser minimiert (beachten Sie, dass eine von anderer Software abgedeckte Seite nicht als ausgeblendet gilt, z. B. ein geöffnetes Sublime, das den Browser abdeckt).

document.visibilityState: Wert, der die folgenden 4 möglichen Zustände darstellt

versteckt: Die Seite befindet sich im Hintergrundtab oder der Browser ist minimiert

sichtbar: Die Seite befindet sich im Vordergrund-Registerkarte Mittel

prerender: Die Seite führt ein Pre-Rendering außerhalb des Bildschirms durch. Der Wert von document.hidden ist true

unloaded: Die Seite wird aus dem Speicher entladen >Visibilitychange-Ereignis: Wenn das Dokument aus dem Speicher entladen wird. Dieses Ereignis wird ausgelöst, wenn sichtbar zu unsichtbar wird oder von unsichtbar zu sichtbar wird.

Auf diese Weise können wir das Visibilitychange-Ereignis abhören, wenn das Ereignis ausgelöst wird, den Wert von document.hidden abrufen und einige Ereignisse auf der Seite basierend auf diesem Wert verarbeiten.

In Kombination mit den Beispielen in der Demo wird das Video in der Demo beim Wechseln der Registerkarten oder beim Minimieren angehalten. Wenn die aktuelle Seite wiederhergestellt wird, wird das Video in der Demo weiter abgespielt. Der vollständige Code lautet wie folgt:

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

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Seitensichtbarkeits-API von HTML5, um Fokus-JS-Ereignisse zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!