JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでフルスクリーン（全画面）表示を実装する方法をわかりやすく解説

Webページ上の動画や画像などの要素を、ボタン操作ひとつで全画面表示に切り替えられたら便利ですよね。JavaScriptでは、Fullscreen APIを使うことで、このようなフルスクリーン機能を簡単に実装できます。

本記事では、動画を全画面モードで再生するサンプルコードをもとに、実装方法をわかりやすく解説します。

サンプルコード

以下は、ボタンをクリックすると動画がフルスクリーンで表示されるHTMLとJavaScriptのコード例です。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
    body{
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    button{
        display: block;
        padding:10px;
        margin:10px;
        background-color: rgb(81, 0, 128);
        border:none;
        color:white;
    }
</style>
<body>
<h1>Fullscreen Window with JavaScript Example</h1>
<button class="openVideo">Open Video in Fullscreen Mode</button>
<video width="500px" controls id="minimizedVideo">
<source
src="https://www.videvo.net/videvo_files/converted/2015_04/preview/Ocean_Waves_slow_motion_videvo.mov44965.webm">
</video>
<h2>Click on the above button to open it in fullscreen</h2>
<script>
    document.querySelector('.openVideo').addEventListener('click',fullscreenVideo);
    var elem = document.getElementById("minimizedVideo");
    function fullscreenVideo() {
        if (elem.requestFullscreen) {
            elem.requestFullscreen();
        }
        else if (elem.mozRequestFullScreen) {
            elem.mozRequestFullScreen();
        }
        else if (elem.webkitRequestFullscreen) {
            elem.webkitRequestFullscreen();
        }
        else if (elem.msRequestFullscreen) {
            elem.msRequestFullscreen();
        }
    }
</script>
</body>
</html>

コードのポイント

このコードの重要なポイントは以下の通りです。

  • requestFullscreen()メソッド： 指定した要素を全画面表示にする標準的なメソッドです。ここでは動画要素に対して呼び出しています。
  • ベンダープレフィックスへの対応： 古いブラウザ向けに、「moz」（Firefox）、「webkit」（Chrome・Safari）、「ms」（旧Edge・IE）といった各ブラウザ固有のメソッドも条件分岐でカバーしています。
  • イベントリスナー： ボタンのクリックイベントに関数を登録することで、ユーザーの操作に合わせて全画面表示を開始できるようにしています。

なお、最近のモダンブラウザでは標準仕様のrequestFullscreen()が広くサポートされているため、ベンダープレフィックスの分岐は不要になるケースが増えています。

実行結果

上記のコードを実行すると、まず次のような画面が表示されます。

JavaScriptでフルスクリーン（全画面）表示を実装する方法をわかりやすく解説

「Open Video in Fullscreen Mode」ボタンをクリックすると、動画が全画面モードで開きます。

JavaScriptでフルスクリーン（全画面）表示を実装する方法をわかりやすく解説

全画面を解除したい場合は、Escキーを押すか、画面上に表示される終了ボタンを使用してください。

まとめ

JavaScriptでフルスクリーン表示を実装するには、Fullscreen APIのrequestFullscreen()メソッドを使用します。ブラウザごとの差異に対応するため、古い環境向けにはベンダープレフィックス付きのメソッドを組み合わせると安心です。動画プレーヤーやスライドショーなど、没入感のあるUIを作りたい場面でぜひ活用してみてください。

  1. JavaScriptでテキストを切り替える（トグルする）方法を解説

    JavaScriptを使えば、ボタンをクリックするたびに表示されるテキストを切り替える（トグルする）処理を簡単に実装できます。ここでは、innerHTMLプロパティと条件分岐を組み合わせた、最も基本的なテキスト切り替えの方法をサンプルコード付きで解説します。実装コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>  

  2. JavaScriptとFont Awesomeアイコンでアニメーション効果を作成する方法

    Webページに動きを加えることで、訪問者の視線を引きつけ、UIに彩りを添えることができます。Font Awesomeのようなアイコンフォントと、JavaScriptのタイマー関数である setTimeout() や setInterval() を組み合わせれば、外部ライブラリに頼ることなく、手軽にアイコンのアニメーション効果を実現できます。 仕組みはとてもシンプルです。一定時間ごとにアイコンのUnicode文字を入れ替えることで、アイコンが次々と切り替わって動いているように見せます。 実装のポイント Font AwesomeのCSSファイルをCDNから読み込む アイコンを表示する要素に「fa