HTML5ビデオを全画面表示にする方法はありますか?
https://stackoverflow.com/questions/1055214
-
20-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
HTML5を使用してビデオを全画面で再生する方法はありますか <video> 鬼ごっこ？
それが不可能な場合、この決定に理由があるかどうか誰か知っていますか?
解決
HTML 5は、ビデオフルスクリーンを作る方法を提供していませんが、並列フルスクリーン仕様の消耗品（requestFullScreen要素を含む）任意の要素がフルスクリーンからなることを可能にする<video>方法。
これはのブラウザの数で実験的にサポートしています。
<時間>オリジナル答えます：
HTML5仕様のから（の執筆時点：6月'09）：
ユーザーエージェントが提供してはなりません 動画が表示されるようにするには、公開API 全画面表示。と組み合わせたスクリプト、 丁寧に作られたビデオファイル、可能性 考えにユーザーをだまし システムモーダルダイアログが表示されていました、 そして、パスワードの入力を求めます。 「単なる」の危険性もあります ページが起動すると迷惑、 フルスクリーン動画のリンクがあるとき クリックするか、ページをナビゲート。代わりに、 ユーザーエージェント固有のインタフェース機能 簡単にできるようにするために提供することができます フルスクリーン再生を取得するために、ユーザ モードます。
ブラウザは、ユーザインタフェースを提供してもよいが、プログラム可能なものを提供してはならない。
<時間>上記の警告がので仕様から削除されたことに注意してください。
他のヒント
ここでの回答のほとんどは古いものです。
を使用して任意の要素を全画面表示できるようになりました。 フルスクリーン API, 、ただ電話することはできないので、まだかなり混乱していますが、 div.requestFullScreen() すべてのブラウザで使用できますが、ブラウザ固有の接頭辞付きメソッドを使用する必要があります。
簡単なラッパーを作成しました スクリーンフル.js これにより、フルスクリーン API が簡単に使用できるようになります。
現在のブラウザのサポートは次のとおりです。
- クロム15+
- Firefox 10+
- サファリ5.1以降
多くのモバイル ブラウザは、 全画面オプションはまだ.
サファリ それをサポートします webkitEnterFullscreen.
クロム WebKit なのでサポートされるはずですが、エラーが発生します。
クリス・ブリザード Firefox 彼らは、あらゆる要素をフルスクリーンにできる独自のバージョンのフルスクリーンを発表すると述べました。例えばキャンバス
フィリップ・ヤーゲンシュテット オペラ 今後のリリースでサポートする予定だという。
はい、HTML5 ビデオ仕様では全画面をサポートしないと規定されていますが、ユーザーは全画面を望んでおり、すべてのブラウザーが全画面をサポートする予定であるため、仕様は変更されます。
webkitEnterFullScreen();
このページの使用上の最初のvideoタグをフルスクリーンするために、例えば、ビデオタグ要素で呼び出される必要がある。
document.getElementsByTagName('video')[0].webkitEnterFullscreen();
の注意：これは時代遅れの答えとはもはや関係がありませんの
私たちは（... Flashプラグインの歴史が付属し、すべてのセキュリティ侵害）任意のクローズドソースのプラグインなしで私達のブラウザで動画を表示するためのオープンな方法を持っているしたい場合はと思います。タグはフラッシュがないように我々はそれを扱うことができる...フルスクリーンを有効にする方法を見つけるために持っている：あなたのマウスと他には何もして左クリックすることによって活性化されるようにフルスクリーン行うには、それはしている、私が意味することは、ActionScriptで起動することはできません実施例によるフラッシュのローディングでフルスクリーン。
私は十分に明らかになってきました願っています：すべての後、私は唯一のフランス語IT学生ではなく、英語の詩人だ：）
See Ya（シーヤ）！
最近の多くのWebブラウザを使用すると、特定のHTML要素にフルスクリーンのフォーカスを与えることを可能にするフルスクリーン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 /ドキュメント/ウェブ/ガイド/ API / DOM / Using_full_screen_modeする 参考： - http://blog.teamtreehouse.com/building-custom-コントロール-用-HTML5 - 動画
のフルスクリーンを行うためのプログラム可能な方法は、FirefoxとChrome（最新バージョンで）の両方で、今取り組んでいます。
：良いニュースは、スペックがここにドラフトされているということですhttp://dvcs.w3.org/hg/フルスクリーン/生ファイル/チップ/ overview.htmlにする
あなたはまだ今のベンダープレフィックスに対処する必要がありますが、すべての実装の詳細は、MDNサイトに追跡されてます：
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;
}
あなたは100％とし、幅と高さを変更することができますが、それは、ブラウザのクロムやOSのシェルをカバーしません。
HTMLがブラウザウィンドウ内に住んでいるので、デザインの決定があります。フラッシュ・プラグインがウィンドウ内ではありませんので、彼らはフルスクリーンで行くことができます。
これは、そうでなければ、シェルをカバーし、IMGタグを作る、または画面全体が文字だったので、H1タグを作ることができ、理にかなっています。
いいえ、フルスクリーンの引数の戦いが今戦っているので、あなたは幸運、あなたはその理由を知りたい場合は、HTML 5でフルスクリーンビデオを持ってすることはできません。 WHATWGメーリングリストを参照してください探し単語「ビデオ」。私は個人的に、彼らはHTML 5でフルスクリーンAPIを提供することを願っています。
のFirefox 3.6はビデオを右クリックして、「フルスクリーン」を選択し、HTML5のビデオのためのフルスクリーンオプションを持っています。
最新のWebkitナイトリーも毎晩最新崇高プレーヤーをしてみてください、フルスクリーンHTML5ビデオをサポートフルスクリーンオプションを選択しながら、Cmdを/ Ctrlキーを押したままにします。
私はクローム/オペラもこのようなものをサポートしていますね。うまくいけば、IE9は、フルスクリーンHTML5ビデオをサポートします。
これは WebKit でサポートされています。 webkitEnter全画面.
別の解決策は、単にコンテキストメニューでこのオプションを提供ブラウザに持っていることであろう。それは有用であろうときに私が見ることができるものの、これを行うにはJavascriptを持っている必要はありません、いいえます。
その間に別の解決策は、単純にウィンドウを最大化（Javascriptが画面の大きさを提供することができます）、その後、その中に映像を最大化することです。それをやってみると、単に結果がユーザーに受け入れられるかどうかを確認します。
HTML 5ビデオは、私はそれが技術的に達成されるかどうかはわかりませんけれども、Safariの最新のナイトリービルドでフルスクリーンに行くんます。
完全なソリューション：
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();
}
}
}
はい。まあ何HTML5ビデオで起こることは、あなただけの<video>タグを入れて、ブラウザは、このようにフルスクリーン表示のための能力をそれ自身のUIを与え、ということです。それは本当に、ユーザーがFlashで遊んでいくつかの開発者が作ることができる「アート」を参照してくださいする必要はありませんし、私たちに多くの、より良い人生を作る:)またいいですプラットフォームに一貫性を追加します。
それは簡単です、すべての問題は次のように解決することができ、
は、1）エスケープを持って、常にフルスクリーンモードのあなたを取ります
（これは手動F11を介して全画面に入るためには適用されません）2）一時的に）ブラウザで（フルスクリーンビデオモードに入ったと言って小さなバナーを表示する
3）だけHTML5と位置APIと等などでポップアップし、ローカルデータベースに対して行われていると同様に、デフォルトでフルスクリーン作用をブロックする。
私は、この設計に問題が表示されません。誰もが私が何かを逃したと思いますか？
クロームのクローム11.0.686.0 devのチャンネルの通り、今フルスクリーンビデオを持っています。
あなたはF11（多くのブラウザの全画面表示）を押すようにユーザーに伝える場合は、これを行うことができます、そしてあなたは、ページのボディ全体に動画を入れています。
これらの答えがどれもうまくいかない場合は (私にはうまくいきませんでした)、2 つのビデオを設定できます。1 つは通常サイズ用、もう 1 つはフルスクリーン サイズ用です。フルスクリーンに切り替えたいとき
- JavaScript を使用して、全画面ビデオの 'src' 属性を小さいビデオの 'src' 属性に設定します。
- 全画面ビデオの video.currentTime を小さいビデオと同じに設定します。
- CSS 'display:none' を使用して小さなビデオを非表示にし、'position:absolute' と 'z-index:1000' または非常に高い値を使用して大きなビデオを表示します。
