フルスクリーンモードでHTML5ビデオを視聴しているときに、ユーザーがエスケープキーを押したときを知る必要があります。残念ながら、ユーザーがフルスクリーンモードでHTML5ビデオを視聴している場合、システムの焦点はブラウザーではなくネイティブビデオプレーヤーにあるため、ドキュメントに構成されているリスナーは適用されません。
別の方法は、フォーカスがネイティブのビデオプレーヤーからブラウザーに戻ったときにリッスンすることですが、これをどのようにキャプチャするかはわかりません。
document.addEventListener('keydown', function (e) { console.log(e.keyCode); }, false);
上記は、ブラウザを使用している限りキーを押すと、コンソールに正常にログインします。HTML5ビデオがフルスクリーンモードに入るとすぐに、ブラウザは明らかにキーコードをコンソールに記録できなくなります。
私がやろうとしているのは、フルスクリーンモードを終了した後に1つのUIから別のUIに移行することです。
編集
Potenchの回答は出発点として役立ちました。そのため、次の警告にもかかわらず、私はそれをその回答として受け入れました。
- Webkitブラウザでのみ機能します。:-)
- 最初に定義されたように、イベントが発生
video.webkitDisplayingFullscreen
するtrue
たびに機能するため、機能しません。resize
アニメーションフレームを利用して値の変化を常に監視することで、これをWebkitブラウザーでのみ機能させることができました。
var onFrame, isVideoFullscreen;
onFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (fn) {
setTimeout(fn, 1000 / 60);
};
isVideoFullscreen = false;
function frame() {
if (!isVideoFullscreen && video.webkitDisplayingFullscreen) {
// entered fullscreen mode
isVideoFullscreen = true;
} else if (isVideoFullscreen && !video.webkitDisplayingFullscreen) {
// exited fullscreen mode
isVideoFullscreen = false;
}
onFrame(frame);
}
onFrame(frame);