要素をフルスクリーンで表示する

Full Screen API を試してみたので使い方をメモ。

対応ブラウザ

Full Screen APIの対応ブラウザはこちら。
IEは11から対応で、それ以外で対応しているものでもベンダープレフィックスが必要になります。
スマホの場合はほぼ使用できません。

サンプルコード

今回は#video-areaをフルスクリーンにしてみます。

HTML

<div id="video-area">
	<video id="video" width="480" height="270" controls>
		<source src="./movie.mp4" type="video/mp4" />
	</video>
	<div id="control">
		<button id="full">FullScreen</button>
		<button id="exit">Exit</button>
	</div>
</div>

CSS

フルスクリーン時は、:fullscreenという疑似クラスでスタイルを指定できます。
ベンダープレフィックスを付けて以下のように指定します。

• :-ms-fullscreen
• :-webkit-full-screen
• :-moz-full-screen
• :fullscreen

webkitとmozでは間に「-」が入って「full-screen」となるので注意。

#video-area {
	position: relative;
}
#control {
	position: absolute;
	top: 5px;
	left: 5px;
}
#control #exit {
	display: none;
}

#video-area:-webkit-full-screen #video {
	width: 100%;
	height: auto;
}
#video-area:-moz-full-screen #video {
	width: 100%;
	height: auto;
}
#video-area:-ms-fullscreen #video {
	width: 100%;
	height: auto;
}
#video-area:fullscreen #video {
	width: 100%;
	height: auto;
}

JavaScript

// videoの取得
var varea = document.getElementById('video-area');
var video = document.getElementById('video');
// 自動再生
video.autoplay = true;
// ループ
video.loop = true;

var full = document.getElementById('full');
var exit = document.getElementById('exit');

// FullScreenに対応しているか確認
if(!(document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled || document.fullscreenEnabled)) {
	// 対応していない場合はボタン非表示
	full.style.display = 'none';
}

// fullボタンを押した時
full.addEventListener('click', function () {
	if(document.fullscreenEnabled) {
		varea.requestFullscreen()
	} else if(document.webkitFullscreenEnabled) {
		varea.webkitRequestFullscreen()
	} else if(document.mozFullScreenEnabled) {
		varea.mozRequestFullScreen();
	} else if(document.msFullscreenEnabled) {
		varea.msRequestFullscreen();
	} else {
		console.log('error!');
	}

	// ボタン表示の切り替え
	exit.style.display = 'block';
	full.style.display = 'none';
});


// exitボタンを押した時
exit.addEventListener('click', function () {
	if (document.webkitCancelFullScreen) {
		document.webkitCancelFullScreen();
	// 
	} else if (document.mozCancelFullScreen) {
		document.mozCancelFullScreen();
	// 
	} else if (document.msExitFullscreen) {
		document.msExitFullscreen();
	// 
	} else if (document.exitFullscreen) {
		document.exitFullscreen();
	}

	// ボタン表示の切り替え
	exit.style.display = 'none';
	full.style.display = 'block';
});

Full Screen APIのデモページ

【参考サイト】

• Fullscreen API を簡単に試してみた | WWW WATCH
• 全画面 API (Windows)
• 特定の要素を全画面(フルスクリーン)にするFullscreen API
• Fullscreen API と 闇 – Browser
• フルスクリーン API の利用 – Web developer guide | MDN