Comment utiliser l'API Page Visibility de HTML5 pour réaliser des événements Focus JS

La fenêtre actuelle obtient l'événement focus js. Avant la sortie de HTML5, nous utilisions window.onfocus et window.onblur pour obtenir et perdre le focus de la fenêtre

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

Cette méthode peut réaliser le changement de balise pour mettre en pause. la vidéo d'animation, mais cela posera un problème. Puisqu'il s'agit d'un jugement, si une petite fenêtre est placée sur la page actuelle, l'animation sera mise en pause sur la page actuelle. Imaginez, si vous ouvrez une fenêtre de discussion pour. discutez avec MM tout en regardant un film, lorsque vous utilisez la fenêtre de discussion, la vidéo est en pause, ce qui n'est pas l'effet souhaité.

Voyons maintenant comment HTML5 le résout. H5 fournit de nombreuses API simples et pratiques, et l'API Page Visibility en fait partie. L'API de visibilité des pages peut nous aider efficacement à compléter ce jugement.

Utilisez l'API Page Visibility de HTML5 pour implémenter

L'API elle-même est très simple et se compose des trois parties suivantes.

document.hidden : Une valeur booléenne indiquant si la page est masquée. Masquer la page inclut que la page soit dans un onglet d'arrière-plan ou minimise le navigateur (notez qu'une page couverte par un autre logiciel ne compte pas comme masquée, comme un sublime ouvert couvrant le navigateur).

document.visibilityState : représente la valeur des 4 états possibles suivants

hidden : la page est en arrière-plan ou le navigateur est minimisé

visible : la page est dans l'onglet de premier plan Medium

prerender : La page effectue un pré-rendu hors de l'écran. La valeur de document.hidden est vraie

unloaded : La page est déchargée de la mémoire

.

Événement Visibilitychange : Lorsque le document est déchargé de la mémoire. Cet événement est déclenché lorsque le visible devient invisible ou passe d'invisible à visible.

De cette façon, nous pouvons écouter l'événement Visibilitychange. Lorsque l'événement est déclenché, obtenir la valeur de document.hidden et traiter certains événements sur la page en fonction de cette valeur.

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

En combinaison avec les exemples de la démo, lors du changement d'onglet ou de la réduction, la vidéo de la démo sera mise en pause. Lorsque la page actuelle est restaurée, la vidéo de la démo continuera à être lue. Le code complet est le suivant :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!