videoタグを使って自動全画面（フルスクリーン）に動画を表示させる方法

こんばんは、Webプログラマの篠田です。

今回は、Webブラウザ上で動画の自動全画面（フルスクリーン）表示をする方法をご紹介します。

動画の自動での全画面（フルスクリーン）表示はできない！

いきなり、タイトル否定をしているような内容となってしまいましたね。

動画の全画面（フルスクリーン）表示というと下記のようなコントロール部分にある「フルスクリーン」ボタンによるものを連想します。

この「フルスクリーン」ボタンは、JavaScriptの「FullScreen API」というものを実装することで実現することができます。

ネットで「動画　フルスクリーン JavaScript」と検索すると、だいたい「FullScreen API」を使った解説になります。

ですが、この「FullScreen API」は、今回の目的である「自動全画面表示」を実現することはできません。

「FullScreen API」は、セキュリティの観点から、ユーザーが自発的に行ったクリックイベントからでしか実行されないという仕様があります。

そのため、「$(“button”).click()」や直接「FullScreen API」を実行するようなプログラムは動かすことができません。

ですので、「フルスクリーン」ボタンによるディスプレイいっぱいでの、動画表示というのは完全自動では実装できないということになります。

自動全画面（フルスクリーン）表示を実現する方法

仕様でできないといわれてしまっては、そこで終了になってしまいます。

ここからは、どのように実装すれば自動全画面（フルスクリーン）表示を実現することができるのかをご紹介します。

実現可能な実装仕様

下記にこれからご紹介する自動全画面（フルスクリーン）表示の仕様をまとめます。

• ブラウザの全画面に動画を表示させる。
• 動画が終れば、ページが表示される。

videoタグを全画面表示する

動画を再生させるために使用するのはHTML5の「video」タグになります。

次に、この「video」タグを全画面（フルスクリーン）表示にするためにCSSを用意します。

これで、videoタグの範囲がブラウザ全画面（フルスクリーン）に拡張されます。

「z-index」プロパティは、非常識なぐらい大きめにしておきましょう。チャットツールなどの外部ツールがサイト内にあると、背面にまわってしまうばあいがあるためです。

これで、全画面に対して動画の再生ができるようになります。

動画を自動再生する

全画面（フルスクリーン）にすることができれば、あとはjavaScriptを使って、動画を制御すればOKです。

これで、自動再生が可能になります。

このままでは、動画が終わってもコンテンツが見えません。

ですので、動画が終わったらvideoタグを削除するという処理を追加します。

videoタグの要素で「addEventListener」メソッドが使えます。

動画の再生が終わったことを知らせる「ended」を、「addEventListener」メソッドで捕まえて「video」タグを削除する処理を追加します。

これで、自動再生と再生終了後に自動的に閉じるという処理が実装できました。

その他のカスタマイズ

ここまでの内容をベースとして下記のようなカスタマイズも可能です。

• 動画が再生されるまでの間、ローダー画像を表示させる
• 動画再生中にスクロールされると嫌なのでスクロールバーを消す
• スキップボタンを付ける
• 動画の消えるのが早すぎるので、フェードアウトアニメーションを追加する

まとめ

動画の全画面表示というのは、求められる仕様によって難易度が変わります。

ぜひ「FullScreen API」の仕様で絶望された方は、ご紹介した方法で再度チャレンジしてみてください。

では、またー。