動画の再生など大画面で見てほしいコンテンツは、全画面表示をしてほしいので、このサンプルはその制御をする時に使います。
ボタンを押して、フルスクリーンへ変更、さらに閉じるボタンで解除のサンプルはありますが、現在のフルスクリーンの状態を検知して、閉じるボタンを出すシンプルなコードが見つからなかったので、ここに書いておきます。
以下の例では、全画面と解除がトグルで表示されます。
HTML
<div id="demo_stage"></div>
JS
window.addEventListener('load', function(){
openFS();
});
document.addEventListener('fullscreenchange', (event) => {
if (document.fullscreenElement) {
exitFS ();
}else{
openFS();
}
});
function openFS(){
document.getElementById('demo_stage').innerHTML='<div id="demo_fs_req" class="demo_btn">フルスクリーン<br>スタート</div>';
// フルスクリーン表示
document.getElementById('demo_fs_req').addEventListener('click', function(){
document.body.requestFullscreen();
});
}
function exitFS(){
document.getElementById('demo_stage').innerHTML='<div id="demo_fs_exit" class="demo_btn">フルスクリーン<br>解除2</div>';
// フルスクリーン解除
document.getElementById('demo_fs_exit').addEventListener('click', function(){
document.exitFullscreen();
});
}
CSS
.demo_btn{
border-radius: 5px;
background-color: #36F;
color: #FFF;
width: 140px;
padding:10px;
text-align: center;
margin: 10px auto 0;
}
.demo_btn:hover{
opacity: 0.9;
cursor: pointer;
}
#demo_fs_exit.demo_btn{
background-color: #F36;
}
#demo_stage{
background-color: #FFF;
width: auto;
margin: 40px 0 20px;
padding: 40px 0 40px;
}
#demo_screen{
background-color: #000;
width: 100%;
padding: 20px;
box-sizing: border-box;
}
#demo_screen div{
background-color: #FFF;
height: 140px;
max-width: 90%;
width: 100%;
margin: 0 auto;
box-sizing: border-box;
line-height: 140px;
text-align: center;
font-size: 21px;
}
