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

Question

HTML5<video>タグを使用してビデオをフルスクリーンで再生する方法はありますか?

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

score 105 · Accepted Answer

2020年の答え

HTML 5 にはビデオをフルスクリーンにする方法はありませんが、並列のFullscreen API では、要素自体をフルスクリーンで表示するためのAPI が定義されています。

これは、動画を含むあらゆる要素に適用できます。

ブラウザーのサポートは良好ですが、Internet Explorer と Safari にはプレフィックス付きのバージョンが必要です。

スタックスニペットのサンドボックスルールが壊れているため、外部デモが提供されています。

<div id="one">
    One
</div>

<div id="two">
    Two
</div>

<button>one</button>
<button>two</button>

div {
    width: 200px;
    height: 200px;
}
#one { background: yellow; }
#two { background: pink; }

addEventListener("click", event => {
    const btn = event.target;
    if (btn.tagName.toLowerCase() !== "button") return;
    const id = btn.textContent;
    const div = document.getElementById(id);
    if (div.requestFullscreen) 
        div.requestFullscreen();
    else if (div.webkitRequestFullscreen) 
        div.webkitRequestFullscreen();
    else if (div.msRequestFullScreen) 
      div.msRequestFullScreen();
});

2012年回答

HTML 5 ではビデオをフルスクリーンにする方法は提供されていませんが、パラレルフルスクリーン仕様では、requestFullScreen任意の要素 (<video>要素を含む) をフルスクリーンにする方法が提供されています。

多くのブラウザで実験的にサポートされています。

2009年回答

注: これは仕様から削除されました。

HTML5 仕様から(執筆時点: 2009 年 6 月):

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

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

score 74 · Accepted Answer

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

Fullscreen APIを使用して任意の要素を全画面表示できるようになりましdiv.requestFullScreen()たが、すべてのブラウザーで呼び出すことはできず、ブラウザー固有のプレフィックス付きメソッドを使用する必要があるため、まだかなり混乱しています。

フルスクリーン API を使いやすくする単純なラッパーscreenfull.jsを作成しました。

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

クローム 15+
Firefox 10+
サファリ 5.1+

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

score 31 · Accepted Answer

Safariはを通じてサポートしていますwebkitEnterFullscreen。

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

Firefoxの Chris Blizzard は、あらゆる要素をフルスクリーンにできる独自のバージョンのフルスクリーンを発表すると述べました。例: キャンバス

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

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

score 18 · Accepted Answer

webkitEnterFullScreen();

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

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

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

score 10 · Accepted Answer

最新の 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 -ビデオ

score 6 · Accepted Answer

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

score 6 · Accepted Answer

クローズドソースプラグイン (およびフラッシュプラグインの歴史に伴うすべてのセキュリティ侵害...) なしで、ブラウザーでビデオを表示するオープンな方法が必要な場合は、そう思います。タグは全画面表示を有効にする方法を見つける必要があります.Flash のように処理できます: 全画面表示するには、マウスを左クリックするだけで有効にする必要があります。つまり、ActionScript で起動することはできません。たとえば、フラッシュの読み込み時にフルスクリーン。

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

じゃあ！

score 5 · Accepted Answer

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

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

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

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

score 3 · Accepted Answer

3

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

于 2010-07-01T16:13:08.677 に答える

score 3 · Accepted Answer

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

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

これは理にかなっています。そうでなければ、シェルを覆うimgタグを作成するか、画面全体が文字になるようにh1タグを作成することができます。

score 3 · Accepted Answer

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

score 3 · Accepted Answer

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

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

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

score 2 · Accepted Answer

完全なソリューション:

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

score 2 · Accepted Answer

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

当面の代替ソリューションは、ウィンドウを最大化し (Javascript で画面のサイズを指定できます)、その中のビデオを最大化することです。試してみて、結果がユーザーに受け入れられるかどうかを確認してください。

score 1 · Accepted Answer

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

score -1 · Accepted Answer

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

score -1 · Accepted Answer

これらの回答のいずれも機能しない場合 (私には機能しなかったため)、2 つのビデオをセットアップできます。1 つは通常のサイズ用で、もう 1 つはフルスクリーンサイズ用です。フルスクリーンに切り替えたいとき

JavaScript を使用して、フルスクリーンビデオの「src」属性を小さいビデオの「src」属性に設定します。
フルスクリーンビデオの video.currentTime を小さいビデオと同じに設定します。
css 'display:none' を使用して小さなビデオを非表示にし、'position:absolute' と 'z-index:1000' または非常に高い値を介して大きなビデオを表示します。

score -1 · Accepted Answer

-1

Chrome 11.0.686.0 dev チャンネルの時点で、Chromeは全画面表示になりました。

于 2011-03-01T22:32:06.110 に答える

score -1 · Accepted Answer

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

score -2 · Accepted Answer

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

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

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

3）html5のポップアップやローカルデータベース、ロケーションAPIなどで行われているように、デフォルトでフルスクリーンアクションをブロックします。

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

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

21 に答える 21

2020年の答え

2012年回答

2009年回答

Related

Reference