サイト制作に関するメモ書き

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

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

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

対応ブラウザ

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

it-displays-the-elements-in-full-screen01

 

サンプルコード

今回は#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のデモページ

document.fullscreenEnabled Full Screen APIが使用できる場合はtrueを返す。
ベンダープレフィックスが必要なので、それぞれ以下を記述。
document.webkitFullscreenEnabled
document.msFullscreenEnabled
document.mozFullScreenEnabled
document.fullscreenEnabled
mozでは「FullScreenEnabled」とsが大文字になっているので注意。
element.requestFullScreen() 指定した要素をフルスクリーンで表示する。
ベンダープレフィックスが必要なので、それぞれ以下を記述。
element.webkitRequestFullScreen();
element.mozRequestFullScreen();
element.msRequestFullScreen();
element.requestFullScreen();
document.exitFullscreen(); フルスクリーン表示を終了する。
ベンダープレフィックスが必要なので、それぞれ以下を記述。
document.webkitCancelFullScreen();
document.mozCancelFullScreen();
document.msExitFullscreen();
document.exitFullscreen();
webkitとmozでは「cancelFullScreen」となるので注意。

 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP