特定の要素を全画面(フルスクリーン)にするFullscreen API

HTML5のFullscreen APIは、YouTubeなど動画画面の右下にある全画面表示ボタンを押すと動画部分のみが画面いっぱいに表示されるように、特定の要素を全画面(フルスクリーン)で提供できる機能です。IEもIE11から対応しており、いよいよ本格的に使える環境が整ってきました。

Fullscreen APIの実装状況

IE
IE11よりmsのベンダー識別子付きで先攻実装
Chrome
Chrome15よりwebkitのベンダー識別子付きで先攻実装
Firefox
Firefox10よりmozのベンダー識別子付きで先攻実装
Safari
Safari5.1よりwebkitのベンダー識別子付きで先攻実装
Opera
Opera12.1よりサポート
Opera15よりwebkitのベンダー識別子付きで先攻実装
iOS
未サポート
Andoroid
未サポート

Fullscreen APIサンプルコード

<!--フルスクリーン表示対象ここから-->
<div id="target">
<video controls="">
<source src="xxx.webm">
<source src="xxx.mp4">
</video>
<!--切り替えボタン-->
<button id="fullscreenSwitch" onclick="requestFullscreen()">フルスクリーンにする</button>
<!--//切り替えボタン-->
</div>
<!--//フルスクリーン表示対象ここまで-->
<script>
var target = document.getElementById("target");
var btn    = document.getElementById("fullscreenSwitch");
/*フルスクリーン実行用ファンクション*/
function requestFullscreen() {
	if (target.webkitRequestFullscreen) {
		target.webkitRequestFullscreen(); //Chrome15+, Safari5.1+, Opera15+
	} else if (target.mozRequestFullScreen) {
		target.mozRequestFullScreen(); //FF10+
	} else if (target.msRequestFullscreen) {
		target.msRequestFullscreen(); //IE11+
	} else if (target.requestFullscreen) {
		target.requestFullscreen(); // HTML5 Fullscreen API仕様
	} else {
		alert('ご利用のブラウザはフルスクリーン操作に対応していません');
		return;
	}
	/*フルスクリーン終了用ファンクションボタンに切り替える*/
	btn.onclick = exitFullscreen;
	btn.innerText = "フルスクリーンを終了する";
}
/*フルスクリーン終了用ファンクション*/
function exitFullscreen() {
	if (document.webkitCancelFullScreen) {
		document.webkitCancelFullScreen(); //Chrome15+, Safari5.1+, Opera15+
	} else if (document.mozCancelFullScreen) {
		document.mozCancelFullScreen(); //FF10+
	} else if (document.msExitFullscreen) {
		document.msExitFullscreen(); //IE11+
	} else if(document.cancelFullScreen) {
		document.cancelFullScreen(); //Gecko:FullScreenAPI仕様
	} else if(document.exitFullscreen) {
		document.exitFullscreen(); // HTML5 Fullscreen API仕様
	}
	/*フルスクリーン実行用ファンクションボタンに切り替える*/
	btn.onclick = requestFullscreen;
	btn.innerText = "フルスクリーンにする";
}
/*サポートしていないIE10以下とスマフォではフルスクリーンボタンを非表示*/
if(typeof window.orientation != "undefined" || (document.uniqueID && document.documentMode < 11)){
	btn.style.display = "none";
}
</script>

このサンプルでは、ボタンを押下すると、#targetの要素内のコンテンツをフルスクリーン表示にするrequestFullscreenファンクションが実行されます。そして、フルスクリーン表示後にボタンを解除ボタンに切り替えています。解除ボタンを押下するとexitFullscreenファンクションが実行され、元の画面の状態に戻ります。

なお、Fullscreen APIをサポートしていない環境にはボタンそのものを非表示にしています。

Fullscreen APIリファレンス

任意の要素をフルスクリーンで開く

document.getElementById("sample").requestFullScreen(); //HTML5 Fullscreen API仕様
document.getElementById("sample").webkitRequestFullscreen(); //Chrome, Safari, Opera
document.getElementById("sample").mozRequestFullScreen(); //Firefox
document.getElementById("sample").msRequestFullscreen(); //IE

フルスクリーン表示にしたい要素(動画、画像または他の要素)をrequestFullScreen()メソッドで呼び出します。それぞれベンダー識別子が必要です。

video要素が対象の場合は自動的に縦横のサイズが拡げられますが、他の要素の場合は元のサイズが維持される(Firefoxでは自動的にwidth:100%; height:100%;が追加される)ので、フルスクリーン状態の要素にのみ適用できる:fullscreen擬似クラスを用いて整えます。

なお、requestFullScreen()メソッドはボタンのクリックなど、ユーザが発生させるイベントから呼び出す必要があります。ページを開くと同時にrequestFullScreen()メソッドを実行しても、信頼できないコンテンツとしてブロックされることになります。

フルスクリーンの終了

Escキーを押すことで、ユーザは全画面表示モードを終了できます。プログラムの制御下で全画面表示を終了するには、exitFullscreenメソッドを使います。なお、HTML5仕様のメソッド名はexitFullscreenですが、Gecko:FullScreenAPI仕様ではcancelFullScreenになっています。Firefox, Chrome, Safari, OperaはGecko:FullScreenAPIをベースにした実装であるため、ベンダー識別子をつける際にHTML5仕様のメソッド名と異なることに注意してください。

document.exitFullscreen(); //HTML5 Fullscreen API仕様
document.cancelFullScreen(); //Gecko:FullScreenAPI仕様
document.webkitCancelFullScreen(); //Chrome, Safari, Opera
document.mozCancelFullScreen(); //Firefox
document.msExitFullscreen(); //IE

exitFullscreenメソッドはdocumentオブジェクトに適用させることで、どの要素が現在フルスクリーンモードで開かれていても問題はありません。

フルスクリーン表示の要素を取得

現在、フルスクリーン表示になっている要素を取得するには、documentオブジェクトのfullscreenElementプロパティを使うことで、フルスクリーンで表示されている最上位の要素を返します。フルスクリーンで表示している要素がなければnullを返します。それぞれベンダー識別子が必要です。

function getFSelment() {
	if (document.webkitFullscreenElement) {
		return document.webkitFullscreenElement;
	} else if (document.mozFullScreenElement) {
		return document.mozFullScreenElement;
	} else if (document.msFullscreenElement) {
		return document.msFullscreenElement;
	} else if (document.fullscreenElement) {
		return document.fullscreenElement;
	}
}

フルスクリーンイベントを検知する

fullscreenchangeイベントを用います。それぞれベンダー識別子が必要です。フルスクリーン表示になった時と、フルスクリーン表示を終了したときにもイベントが呼び出されます。どちらのイベントかを判断するには、フルスクリーンで表示している要素がなければnullを返すfullscreenElementプロパティを用いると良いでしょう。

document.addEventListener("webkitfullscreenchange", handleFSevent, false);
document.addEventListener("mozfullscreenchange", handleFSevent, false);
document.addEventListener("MSFullscreenChange", handleFSevent, false);
document.addEventListener("fullscreenchange", handleFSevent, false);
function handleFSevent() {
	if( (document.webkitFullscreenElement && document.webkitFullscreenElement !== null)
	 || (document.mozFullScreenElement && document.mozFullScreenElement !== null)
	 || (document.msFullscreenElement && document.msFullscreenElement !== null)
	 || (document.fullScreenElement && document.fullScreenElement !== null) ) {
		alert("フルスクリーン表示を実行しました。");
	}else{
		alert("フルスクリーン表示を終了しました。");	
	}
}

フルスクリーン状態の要素にCSSを適用する

:fullscreen擬似クラスを用います。それぞれベンダー識別子が必要です。

#target:-webkit-full-screen{
	position : absolute ;
	left     : 0 ;
	top      : 0 ;
	width    : 100% ;
	height   : 100% ;
}
#target:-moz-full-screen {
	position : absolute ;
	left     : 0 ;
	top      : 0 ;
	width    : 100% ;
	height   : 100% ;
}
#target:-ms-fullscreen {
	position : absolute ;
	left     : 0 ;
	top      : 0 ;
	width    : 100% ;
	height   : 100% ;
}
#target:fullscreen {
	position : absolute ;
	left     : 0 ;
	top      : 0 ;
	width    : 100% ;
	height   : 100% ;
}

参考リンク

Updated / Published