html pageのfull screenに関して

google guides

awesome library

Browserのfullscreen API

iOS Safari

video以外はsupportしてない見たい

video.webkitEnterFullscreen(); 

• 上記のコードはevent(original eventで, javascriptで誘導したeventでは無い)処理中しか、動作しない。それ以外は、InvalidStateError (DOM Exception 11): The object is in an invalid state.ようなエラーが発生する。原因はjavascriptで完全にコントロールできると、ユーザーがびっくりする可能性があるから？

Chrome && Mac safari

div.webkitRequestFullscreen();
video.webkitRequestFullscreen();
video.webkitEnterFullscreen();

• video elementはwebkitRequestFullscreenとwebkitEnterFullscreenを両方support、区別は不明。
• 上記のコードはevent(original eventで, javascriptで誘導したeventでは無い)処理中しか、動作しない。それ以外は、InvalidStateError (DOM Exception 11): The object is in an invalid state.ようなエラーが発生する。

videoをfullscreenモード

var videoElement = document.getElementById("videoElement");
videoElement.requestFullscreen();

• videoだけをfullscreenモードすると、他の機能が使えない可能性があるので、videoを含めたcontrainer全体をfullscreenするのをお勧め。

fullscreenに関するpseudo selector

<style>
  #goFS:-webkit-full-screen #goFS {
    display: none;
  }
  #goFS:-moz-full-screen #goFS {
    display: none;
  }
  #goFS:-ms-fullscreen #goFS {
    display: none;
  }
  #goFS:fullscreen #goFS {
    display: none;
  }
</style>