document.fullscreenEnabled 예제
<meta name="viewport" content="width=device-width, initial-scale=1">
<button onclick="openFullscreen();">클릭</button>
<p><strong>Tip:</strong> "Esc" 키 누르면 풀스크린 모드 빠져나옴.</p>
<video width="100%" controls id="hzvideo">
<source src="https://vt.tumblr.com/tumblr_o600t8hzf51qcbnq0_480.mp4" type="video/mp4">
video tag 지원 않는 브라우저는 개나 줘버려.
</video>
<script>
var elem = document.getElementById("hzvideo");
function openFullscreen() {
if (
document.fullscreenEnabled || /* 표준 */
document.webkitFullscreenEnabled || /* Chrome, Safari, Opera */
document.mozFullScreenEnabled || /* Firefox */
document.msFullscreenEnabled /* IE/Edge */
) {
elem.webkitRequestFullscreen();
if (elem.requestFullscreen) {
elem.requestFullscreen(); /* 표준 */
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari, Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
}
}
</script>
결과보기
