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

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

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

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

それは持っているブラウザの数の実験的なサポートを。

元の答え：

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

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

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

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

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

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

Fullscreen APIを使いやすくする単純なラッパーscreenfull.jsを作成しました。

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

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

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

Safariは、それをサポートしていwebkitEnterFullscreenます。

ChromeもWebKitなのでサポートするはずですが、エラーになります。

Firefoxの Chris Blizzard 氏は、あらゆる要素をフルスクリーンに移行できる独自のバージョンのフルスクリーンをリリースする予定であると語った。例：キャンバス

Operaの Philip Jagenstedt氏によると、今後のリリースでサポートする予定です。

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

webkitEnterFullScreen();

これは、たとえば、ページの最初のビデオタグを全画面表示するために、ビデオタグ要素で呼び出す必要があります。

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

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

最近の多くの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 -ビデオ

クローズドソースプラグインなしでブラウザーでビデオを表示するためのオープンな方法が必要な場合（およびフラッシュプラグインの履歴に付随するすべてのセキュリティ違反...）タグは、フルスクリーンをアクティブにする方法を見つける必要があります。フラッシュと同じように処理できます。フルスクリーンを行うには、マウスで左クリックするだけでアクティブ化する必要があります。つまり、ActionScriptで起動することはできません。例としてフラッシュのロード時のフルスクリーン。

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

じゃあ！

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;
}

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

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

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

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

幅と高さを100％に変更できますが、ブラウザーのクロムやOSシェルはカバーされません。

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

これは理にかなっています。それ以外の場合は、シェルをカバーするimgタグを作成したり、画面全体が文字になるようにh1タグを作成したりできます。

いいえ、HTML 5でフルスクリーンビデオを表示することはできません。理由を知りたい場合は、フルスクリーンをめぐる議論の戦いが現在行われているため、幸運です。WHATWGメーリングリストを参照して、「ビデオ」という単語を探してください。個人的には、HTML 5でフルスクリーンAPIが提供されることを願っています。

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

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

Chrome / Operaもこのようなものをサポートすると思います。うまくいけば、IE9はフルスクリーンHTML5ビデオもサポートします。

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

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

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

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

完全なソリューション：

    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();
                    }
            }
    }

サイトをプログレッシブWebアプリ（PWA）として定義するオプションがある場合はdisplay: "fullscreen"、manifest.jsonの下で使用するオプションもあります。ただし、これは、ユーザーがWebアプリをホーム画面に追加/インストールし、そこから開いた場合にのみ機能します。

はい。HTML5ビデオで何が起こるかという<video>と、タグを付けるだけで、ブラウザが独自のUIを提供し、全画面表示が可能になるということです。Flashで遊んでいる開発者が作成できる「アート」を見る必要がないことで、ユーザーの生活が本当に良くなります:)また、プラットフォームに一貫性を追加します。

それは簡単です、すべての問題はこのように解決できます、

1）エスケープで常にフルスクリーンモードを終了します（これはf11からフルスクリーンに手動で入る場合には適用されません）

2）フルスクリーンビデオモードに入ったことを示す小さなバナーを一時的に表示します（ブラウザによって）

3）デフォルトでフルスクリーンアクションをブロックします。これは、HTML5やロケーションAPIなどでポップアップやローカルデータベースに対して行われたのと同じです。

このデザインに問題はありません。誰かが私が何かを逃したと思いますか？

Chrome 11.0.686.0開発チャネル以降、Chromeにフルスクリーンビデオが追加されました。

これを行うには、ユーザーにF11（多くのブラウザーでは全画面）を押すように指示し、ページの本文全体にビデオを配置します。

これらの回答のいずれもが機能しない場合（私にとっては機能しませんでした）、2つのビデオを設定できます。1つは通常サイズ用、もう1つはフルスクリーンサイズ用です。フルスクリーンに切り替えたいとき

1. JavaScriptを使用して、フルスクリーン動画の「src」属性を小さい動画の「src」属性に設定します
2. 全画面ビデオのvideo.currentTimeを小さいビデオと同じになるように設定します。
3. css 'display：none'を使用して小さなビデオを非表示にし、via 'position：absolute'および 'z-index：1000'または非常に高いもので大きなビデオを表示します。