【javascript】requestFullScreenをつかって全画面表示してみよう

使用する関数

• requestFullScreen

要素を全画面表示にする

全画面にしたい要素を取得して、requestFullScreen()を呼び出すと、全画面表示ができる。videoの再生を全画面表示にしたり、画像を全画面表示にしたり、一部分を詳しく見てもらいたいときに活用できると思います。
html5ではwebrtcなどの技術を使って、デバイスのカメラの映像を交換することで、ビデオチャットも出来るので、こういったときにも使えるのではないかと思います。

サンプル

Video全画面表示サンプル

サンプルコード

window.addEventListener( 'load', function(){
  let fullScreenBtn = document.querySelector( '#full-screen-btn' );
  fullScreenBtn.addEventListener( 'click', function(){
    let target = document.querySelector( '#sample-view164' );
    if(target.requestFullScreen){
      target.requestFullScreen();
    }else if(target.webkitRequestFullScreen){
      target.webkitRequestFullScreen();
    }else if(target.mozRequestFullScreen){
      target.mozRequestFullScreen();
    }else{
      alert('全画面表示できません。');
    }
  });
});

videoを全画面表示にする

画像全画面表示サンプル

画像をクリックすると全画面表示になります。