HTML5 API - The Screen Orientation API and Fullscreen
-
Upload
jeonghwan-jang -
Category
Technology
-
view
1.175 -
download
7
description
Transcript of HTML5 API - The Screen Orientation API and Fullscreen
HTML5����������� ������������������ APIsThe����������� ������������������ Screen����������� ������������������ Orientation����������� ������������������ API����������� ������������������ &����������� ������������������ Fullscreen
오늘����������� ������������������ 주제
•The����������� ������������������ Screen����������� ������������������ Orientation����������� ������������������ API
•http://www.w3.org/TR/screen-orientation/
•Fullscreen
•http://www.w3.org/TR/fullscreen/
현재����������� ������������������ 상태
상태 Working Group
Orientation Lock
Working Draft(초기 단계)
Web Apps Working Group
FullscreenWorking Draft
(초기 단계)
Web Apps & CSS Working
Groups
The����������� ������������������ Screen����������� ������������������ Orientation����������� ������������������ API
Screen����������� ������������������ Orientation����������� ������������������ API
•Working����������� ������������������ Draft����������� ������������������ -����������� ������������������ 2012/12/06
•화면의����������� ������������������ 방향����������� ������������������ 상태에����������� ������������������ 대한����������� ������������������ 정보����������� ������������������ 제공을����������� ������������������ 위한����������� ������������������ 명세
•HTML����������� ������������������ 5.1
Current����������� ������������������ Orientation
•portrait-primary
•portrait-secondary
•portrait
•landscape-primary
•landscape-secondary
•landscape
landscape?����������� ������������������ portrait?
•기기나����������� ������������������ 플랫폼에����������� ������������������ 따라����������� ������������������ 다름
•landscape인����������� ������������������ 기기에서의����������� ������������������ 기본����������� ������������������ 방향은����������� ������������������ landscape-primary
•portrait인����������� ������������������ 기기에서의����������� ������������������ 기본����������� ������������������ 방향은����������� ������������������ portrait-primary
Landscape-primary Portrait-primary
Primary?����������� ������������������ Secondary?
Landscape-primary
Portrait-primary
Portrait-secondary
Landscape-secondary
방향����������� ������������������ 고정
•현재����������� ������������������ 브라우저의����������� ������������������ 내용이����������� ������������������ 표시되는����������� ������������������ 방향을����������� ������������������ 강제로����������� ������������������ 설정
•잠금이����������� ������������������ 해제될����������� ������������������ 때까지����������� ������������������ 유지됨
window.orientation����������� ������������������ vs����������� ������������������ screen.orientation
•window.orientation
•기기의����������� ������������������ 방향
•screen.orientation
•브라우저의����������� ������������������ 내용이����������� ������������������ 출력되는����������� ������������������ 방향
Screen:����������� ������������������ attribute
•onorientationchange
•이벤트����������� ������������������ 핸들러
•orientation
•현재����������� ������������������ 방향의����������� ������������������ 값
•readonly
Screen:����������� ������������������ method
•lockOrientation(orientation)
•지정된����������� ������������������ 방향으로����������� ������������������ 고정
•lockOrientation(orientations)
•지정된����������� ������������������ 방향으로����������� ������������������ 고정
•unlockOrientation()
•고정된����������� ������������������ 상태를����������� ������������������ 해제
•현재����������� ������������������ 환경에����������� ������������������ 기본����������� ������������������ 방향이����������� ������������������ 정의되어����������� ������������������ 있다면����������� ������������������ 해당����������� ������������������ 방향으로����������� ������������������ 전환
•그렇지����������� ������������������ 않은����������� ������������������ 경우����������� ������������������ UserAgent에서����������� ������������������ 적당히����������� ������������������ 전환
•unlock이����������� ������������������ 완료되면����������� ������������������ Screen객체에서����������� ������������������ orientationchange����������� ������������������ 이벤트����������� ������������������ 발생
Fullscreen
Fullscreen
•Working����������� ������������������ Draft����������� ������������������ -����������� ������������������ 2012/07/03
•웹����������� ������������������ 플랫폼에서����������� ������������������ 전체����������� ������������������ 화면����������� ������������������ 기능을����������� ������������������ 사용하기����������� ������������������ 위한����������� ������������������ 명세
•HTML����������� ������������������ 5.1
•http://docs.webplatform.org/wiki/tutorials/using_the_full-screen_api
전체����������� ������������������ 화면����������� ������������������ 전환����������� ������������������ 및����������� ������������������ 나오기
•element.requestFullscreen()
•document.exitFullscreen()
전체����������� ������������������ 화면����������� ������������������ 전환
•element에서����������� ������������������ requestFullscreen()����������� ������������������ 호출
•fullscreenerror����������� ������������������ 이벤트
•전체����������� ������������������ 화면����������� ������������������ 전환이����������� ������������������ 실패할����������� ������������������ 때����������� ������������������ 발생
전체����������� ������������������ 화면����������� ������������������ 나오기
•document.exitFullscreen()
•Esc나����������� ������������������ F11를����������� ������������������ 사용자가����������� ������������������ 입력
•다른����������� ������������������ 웹페이지로����������� ������������������ 이동
•브라우저의����������� ������������������ 다른����������� ������������������ 탭으로����������� ������������������ 이동
•다른����������� ������������������ 프로그램으로����������� ������������������ 이동
fullscreenchange����������� ������������������ 이벤트
•document를����������� ������������������ 대상으로����������� ������������������ 발생
•이벤트에서는����������� ������������������ 화면����������� ������������������ 상태에����������� ������������������ 대한����������� ������������������ 값을����������� ������������������ 제공하지����������� ������������������ 않음
•document.fullscreenElement를����������� ������������������ 확인하여����������� ������������������ 현재����������� ������������������ 상태����������� ������������������ 확인
•null이����������� ������������������ 아니면����������� ������������������ 전체����������� ������������������ 화면����������� ������������������ 상태
var videoElement = document.getElementById("myvideo");
function toggleFullScreen() {if (!document.mozFullScreen && !document.webkitFullScreen) {
if (videoElement.mozRequestFullScreen) {videoElement.mozRequestFullScreen(); // requestFullscreen()
} else {videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}} else {
if (document.mozCancelFullScreen) {document.mozCancelFullScreen(); // exitFullscreen()
} else {document.webkitCancelFullScreen();
}}
}
document.addEventListener("keydown", function(e) {if (e.keyCode == 13) {
toggleFullScreen();}
}, false);
https://developer.mozilla.org/samples/domref/fullscreen.html
정리
•게임과����������� ������������������ 멀티미디어에서����������� ������������������ 유용할����������� ������������������ 것으로����������� ������������������ 예상
•아직����������� ������������������ Working����������� ������������������ Draft����������� ������������������ 상태로����������� ������������������ 상세한����������� ������������������ 내용은����������� ������������������ 변경될����������� ������������������ 가능성����������� ������������������ 있음
Questions?
감사합니다[email protected]
참고자료
•http://www.w3.org/TR/screen-orientation/
•https://developer.mozilla.org/ko/docs/Apps/Manifest
•http://www.w3.org/TR/fullscreen/
•http://docs.webplatform.org/wiki/tutorials/using_the_full-screen_api