HTML5 の Page Visibility API を使用して focus js イベントを実現する方法

現在のウィンドウは focus js イベントを取得します。HTML5 がリリースされる前は、window.onfocus と window.onblur を使用してウィンドウのフォーカスを取得したり、失ったりしました。

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

このメソッドでは、タグの切り替えとアニメーションビデオの一時停止を実現できますが、問題が発生します。フォーカスを決定するため、現在のページに小さなウィンドウが配置されている場合、動画を見ながら MM とチャットするためにチャット ウィンドウを開いて操作した場合を想像してください。チャット ウィンドウでは、ビデオが一時停止されます。これは希望する効果ではありません。

それでは、HTML5 がそれをどのように解決するかを見てみましょう。 H5 はシンプルで実用的な API を多数提供しており、Page Visibility API もその 1 つです。 Page Visibility API は、この判断を完了するのに効果的に役立ちます。

html5のPage Visibility APIを利用して実装する

API自体は非常にシンプルで、以下の3つの部分で構成されています。

document.hidden: ページが非表示かどうかを示すブール値。ページの非表示には、ページがバックグラウンド タブに表示されたり、ブラウザが最小化されたりすることも含まれます (ブラウザを覆うオープン サブライムなど、他のソフトウェアで覆われたページは非表示としてカウントされないことに注意してください)。

document.visibilityState: 次の 4 つの可能な状態の値を表します

hidden: ページがバックグラウンド タブにある、またはブラウザが最小化されています

visible: ページがフォアグラウンド タブにあります

prerender: ページが事前に実行されます-rendering off-screen Processing document.hidden 値は true です

unloaded: ページがメモリからアンロード中です

Visibilitychange イベント: このイベントは、ドキュメントが表示から非表示に、または非表示から表示に変更されるとトリガーされます。

このようにして、Visibilitychange イベントがトリガーされると、document.hidden の値を取得し、この値に基づいてページ上のいくつかのイベントを処理できます。

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

以上がHTML5 の Page Visibility API を使用して focus js イベントを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。