web-dev-qa-db-ja.com

HTML5ビデオをフルスクリーンにする方法はありますか？

HTML5 <video>タグを使用してビデオを全画面で再生する方法はありますか？

そして、これが不可能な場合、この決定の理由があるかどうか誰もが知っていますか？

htmlhtml5videofullscreen
140
nicudotro

HTML 5はビデオをフルスクリーンにする方法を提供しませんが、パラレル フルスクリーン仕様 は、任意の要素（<video>要素を含む）をフルスクリーンにすることができるrequestFullScreenメソッドを提供します。

多くのブラウザでの実験的サポート があります。

元の回答：

HTML5仕様 から（執筆時：2009年6月）：

ユーザーエージェントは、動画を全画面表示するためのパブリックAPIを提供しないでください。慎重に作成されたビデオファイルと組み合わされたスクリプトは、ユーザーにシステムモーダルダイアログが表示されたと思わせ、パスワードの入力を求めることができます。また、リンクがクリックされるか、ページがナビゲートされると、ページが全画面ビデオを起動するという「単なる」煩わしさの危険もあります。代わりに、ユーザーが全画面再生モードを簡単に取得できるようにするために、ユーザーエージェント固有のインターフェイス機能を提供できます。

ブラウザはユーザーインターフェースを提供するかもしれませんが、プログラム可能なものを提供するべきではありません。

上記の警告は、仕様から削除されていることに注意してください。

89
Quentin

ここでの答えのほとんどは時代遅れです。

すべてのブラウザでdiv.requestFullScreen()を呼び出すだけではなく、ブラウザ固有の接頭辞付きメソッドを使用する必要があるため、 Fullscreen API を使用して任意の要素をフルスクリーンにすることが可能になりました。

Fullscreen APIの使用を簡単にする簡単なラッパー screenfull.js を作成しました。

現在のブラウザのサポートは次のとおりです。

  • Chrome 15+
  • Firefox 10以降
  • Safari 5.1以降

多くのモバイルブラウザは まだフルスクリーンオプション をサポートしていないようです。

72
Sindre Sorhus

Safariは、webkitEnterFullscreenを介してサポートします。

ChromeはWebKitでもあるためサポートする必要がありますが、エラーが発生します。

FirefoxのChris Blizzardは、どの要素もフルスクリーンに移行できる独自のフルスクリーンバージョンをリリースすると述べました。例えばキャンバス

OperaのPhilip Jagenstedtは、今後のリリースでサポートすると言います。

はい、HTML5ビデオ仕様はフルスクリーンをサポートしないと述べていますが、ユーザーはそれを望んでおり、すべてのブラウザーがサポートするため、仕様は変更されます。

31
heff
webkitEnterFullScreen();

これは、ビデオタグ要素で呼び出す必要があります。たとえば、ページの最初のビデオタグをフルスクリーン表示するには、次を使用します。

document.getElementsByTagName('video')[0].webkitEnterFullscreen();

注意：これは時代遅れの回答であり、もはや関係ありません。

14
jpkeisala

多くの最新のWebブラウザーは、特定のHTML要素にフルスクリーンフォーカスを与えることができるFullScreen APIを実装しています。これは、ビデオなどのインタラクティブメディアを完全に没入できる環境で表示するのに非常に便利です。

全画面ボタンを機能させるには、ボタンがクリックされたときにrequestFullScreen()関数を呼び出す別のイベントリスナーを設定する必要があります。サポートされているすべてのブラウザーでこれが機能することを確認するには、requestFullScreen()が使用可能かどうかを確認し、使用できない場合はベンダープレフィックスバージョン（mozRequestFullScreenおよびwebkitRequestFullscreen）にフォールバックする必要があります。

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

参照：- https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode 参照：- http：//blog.teamtreehouse。 com/building-custom-controls-for-html5-videos

6
Mo.

クローズドソースのプラグインなしでブラウザでビデオを見るためのオープンな方法が必要だと思います（そしてフラッシュプラグインの歴史に伴うすべてのセキュリティ侵害...）。タグは、フルスクリーンをアクティブにする方法を見つける必要があります。フラッシュのように処理できます。フルスクリーンを行うには、マウスを左クリックするだけでアクティブにする必要があります。ActionScriptでは起動できません。例として、フラッシュのロード時のフルスクリーン。

私が十分に明確になったことを願っています：結局のところ、私はフランスのIT学生であり、英語の詩人ではありません:)

またね！

6
LokR

FirefoxとChrome（最新バージョン）の両方で、フルスクリーンを実行するプログラム可能な方法が現在機能しています。良いニュースは、仕様がここでドラフトされたことです。

http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

今のところベンダープレフィックスを処理する必要がありますが、すべての実装の詳細はMDNサイトで追跡されています。

https://developer.mozilla.org/en/DOM/Using_full-screen_mode

5
Ernest

CSSから

video {
    position: fixed; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
    background: url(polina.jpg) no-repeat;
    background-size: cover;
}
4
Montaser

幅と高さを100％に変更できますが、ブラウザーchromeまたはOSシェルはカバーしません。

設計上の決定は、HTMLがブラウザウィンドウ内にあるためです。 Flashプラグインはウィンドウ内にないため、全画面表示できます。

これは理にかなっています。さもなければ、シェル全体をカバーするimgタグを作成するか、h1タグを作成して画面全体を文字にすることができます。

3
Rich Bradshaw

これは webkitEnterFullscreen を介してWebKitでサポートされます。

3
Zachary Ozer

Firefox 3.6にはHTML5ビデオの全画面オプションがあり、ビデオを右クリックして「全画面」を選択します。

最新のWebkitナイトリーはフルスクリーンHTML5ビデオもサポートしています。最新のナイトリーで Sublime player を試して、Cmd/Ctrlを押しながらフルスクリーンオプションを選択してください。

Chrome/Operaもこのようなものをサポートすると思います。 IE9がフルスクリーンHTML5ビデオもサポートすることを願っています。

3
Husky

いいえ、html 5でフルスクリーンビデオを使用することはできません。理由を知りたい場合は、フルスクリーンをめぐる議論が繰り広げられているので幸運です。 WHATWGメーリングリスト を参照して、Wordの「video」を探してください。個人的には、HTML 5でフルスクリーンAPIを提供することを願っています。

3
calavera.info

別の解決策は、ブラウザでコンテキストメニューでこのオプションを提供することです。これを行うためにJavascriptを用意する必要はありませんが、いつ役立つかはわかりました。

それまでの間、別の解決策は、ウィンドウを最大化し（Javascriptが画面のサイズを提供できる）、その中のビデオを最大化することです。試してみて、結果がユーザーに受け入れられるかどうかを確認してください。

2
Andre

完全なソリューション：

    function bindFullscreen(video) {
            $(video).unbind('click').click(toggleFullScreen);
    }

    function toggleFullScreen() {
            if (!document.fullscreenElement &&    // alternative standard method
                    !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
                    if (document.documentElement.requestFullscreen) {
                            document.documentElement.requestFullscreen();
                    } else if (document.documentElement.msRequestFullscreen) {
                            document.documentElement.msRequestFullscreen();
                    } else if (document.documentElement.mozRequestFullScreen) {
                            document.documentElement.mozRequestFullScreen();
                    } else if (document.documentElement.webkitRequestFullscreen) {
                            document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
                    }
            } 
            else {
                    if (document.exitFullscreen) {
                            document.exitFullscreen();
                    } else if (document.msExitFullscreen) {
                            document.msExitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                            document.mozCancelFullScreen();
                    } else if (document.webkitExitFullscreen) {
                            document.webkitExitFullscreen();
                    }
            }
    }
1
momomo

Safariの最新のナイトリービルドではHTML 5ビデオがフルスクリーンになりますが、技術的にどのように達成されるかはわかりません。

1
st3v3