動画 動画プレーヤーをカスタマイズする コンテンツのフルスクリーン表示の制御

フルスクリーンでの動画の再生を強制できないプラットフォームでは、Fullscreen API が幅広くサポートされています。

出典：http://caniuse.com/fullscreen

Fullscreen API を使用すると、コンテンツやページのフルスクリーン表示を制御できます。


video:のように要素をフルスクリーン表示する方法
elem.requestFullScreen();

ドキュメント全体をフルスクリーン表示する方法
document.body.requestFullScreen();

フルスクリーン状態の変更をリッスンする方法
video.addEventListener("fullscreenchange", handler);

要素が現在フルスクリーン モードかどうかを確認する。
console.log("In full screen mode: ", video.displayingFullscreen);

また、CSS で :fullscreen 疑似クラスを使用して、フルスクリーン モードの要素表示方法を変更できます。

Fullscreen API をサポートしているデバイスでは、動画のプレースホルダとしてサムネイル画像を使用することを推奨しています。

実際の動作を確認するには、グーグルのデモをご覧ください。

グーグルのデモ画面スクリーンショット

注意：requestFullScreen() は現在プリフィックスベンダーです。
完全なクロスブラウザの互換性のための余分なコードが必要な場合があります。



関連記事

• さまざまなデバイスでのデバイスの向きの影響
• インラインまたはフルスクリーン表示
• コンテンツのフルスクリーン表示の制御