IE6-8 is Not Supported

JavaSript フルスクリーン API を使ってウィンドウを全画面表示する方法

JavaScript フルスクリーン API を使って全画面表示する方法です。
では、さっそくサンプルコードを書いていきます。

<video controls id="myvideo">
	<source src="myvideos.webm"></source>
	<source src="myvideos.mp4"></source>
</video>
<button id="btnvideo" onClick="fullScreenVideo()">View</button>

#btnvideo が押されたとき #myvideo をフルスクリーンする例です。

function fullScreenVideo() {
	var fullscreen = document.getElementById("myvideo");
	if (fullscreen.RequestFullScreen) {
				fullscreen.RequestFullScreen();
	} else if (fullscreen.webkitRequestFullScreen) {
				fullscreen.webkitRequestFullScreen();
	} else if (fullscreen.mozRequestFullScreen) {
				fullscreen.mozRequestFullScreen();
	}
}

上記のスクリプトで全画面表示にすることができます。解除は Esc で。

:-webkit-full-screen #myvideo {
	width: 100%;
	height: 100%;
}

Gecko は自動で height と width に 100% が付加されるようですが、Webkit では付加されないので自分で記述する必要があります。

以上が簡単なサンプルです。画像やビデオの見せ方に利用できるかもしれません。
ちなみに調べていたら圧倒的に詳しく Mozilla が解説していたので、詳しく知りたい方はそちらも見てみてくださいね。 全く詳しくないこの記事の意味とは。

Reference:
Mozilla Developer Network – フルスクリーン API の利用

ads by google