☰

YouTube のように HTML と JavaScript を使用してビデオ (mp4) を全画面で再生するにはどうすればよいですか?

tag-icon • tag-icon video html javascript
YouTube のように HTML と JavaScript を使用してビデオ (mp4) を全画面で再生するにはどうすればよいですか?

Chrome を使用して Android から m.youtube.com にアクセスすると、ビデオを再生するときにプレビュー (再生ボタンがオーバーレイされた静止画像) が表示されます。画像をクリックすると、ビデオが全画面で開始されます。私も同じことをしたいと思っています。

答え1

requestFullscreen()特定の要素に対して行う必要があります。次のような操作を行う必要があります。

var elem = document.getElementById('myvideo');
elem.requestFullscreen();

詳細はhttps://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#apiそしてhttps://stackoverflow.com/questions/6039909/html5-full-screen-video

これがうまくいくかどうか教えてください。

答え2

同じことについては、次の例を参照してください。次の例は、異なるブラウザの異なるコードを示しています。

<video controls id="myvideo">
  <source src="video1.mp4"></source>
</video>

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

関連情報