☰

Is there a way to make HTML5 video fullscreen? Ask Question

tag-icon • tag-icon html video html5-video fullscreen
Is there a way to make HTML5 video fullscreen? Ask Question

Is there a way to play a video fullscreen using the HTML5 <video> tag?

And if this is not possible, does anybody know if there is a reason for this decision?

ベストアンサー1

2020 answer

HTML 5 provides no way to make a video fullscreen, but the parallel Fullscreen API defines an API for elements to display themselves fullscreen.

This can be applied to any element, including videos.

Browser support is good, but Internet Explorer and Safari need prefixed versions.

An external demo is provided as Stack Snippet sandboxing rules break it.

<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 answer

HTML 5 provides no way to make a video fullscreen, but the parallel Fullscreen specificationrequestFullScreen任意の要素 (<video>要素を含む) をフルスクリーンにできるメソッドを提供します。

それはいくつかのブラウザで実験的にサポート。

2009年の回答

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

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

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

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

おすすめ記事