html5 api - the screen orientation api and fullscreen
DESCRIPTION
JSLounge 5th seminarTRANSCRIPT
![Page 1: HTML5 API - The Screen Orientation API and Fullscreen](https://reader034.vdocuments.us/reader034/viewer/2022042514/558e0bb01a28ab6a318b458c/html5/thumbnails/1.jpg)
HTML5����������� ������������������ APIsThe����������� ������������������ Screen����������� ������������������ Orientation����������� ������������������ API����������� ������������������ &����������� ������������������ Fullscreen
![Page 3: HTML5 API - The Screen Orientation API and Fullscreen](https://reader034.vdocuments.us/reader034/viewer/2022042514/558e0bb01a28ab6a318b458c/html5/thumbnails/3.jpg)
오늘����������� ������������������ 주제
•The����������� ������������������ Screen����������� ������������������ Orientation����������� ������������������ API
•http://www.w3.org/TR/screen-orientation/
•Fullscreen
•http://www.w3.org/TR/fullscreen/
![Page 4: HTML5 API - The Screen Orientation API and Fullscreen](https://reader034.vdocuments.us/reader034/viewer/2022042514/558e0bb01a28ab6a318b458c/html5/thumbnails/4.jpg)
현재����������� ������������������ 상태
상태 Working Group
Orientation Lock
Working Draft(초기 단계)
Web Apps Working Group
FullscreenWorking Draft
(초기 단계)
Web Apps & CSS Working
Groups
![Page 5: HTML5 API - The Screen Orientation API and Fullscreen](https://reader034.vdocuments.us/reader034/viewer/2022042514/558e0bb01a28ab6a318b458c/html5/thumbnails/5.jpg)
The����������� ������������������ Screen����������� ������������������ Orientation����������� ������������������ API
![Page 6: HTML5 API - The Screen Orientation API and Fullscreen](https://reader034.vdocuments.us/reader034/viewer/2022042514/558e0bb01a28ab6a318b458c/html5/thumbnails/6.jpg)
Screen����������� ������������������ Orientation����������� ������������������ API
•Working����������� ������������������ Draft����������� ������������������ -����������� ������������������ 2012/12/06
•화면의����������� ������������������ 방향����������� ������������������ 상태에����������� ������������������ 대한����������� ������������������ 정보����������� ������������������ 제공을����������� ������������������ 위한����������� ������������������ 명세
•HTML����������� ������������������ 5.1
![Page 7: HTML5 API - The Screen Orientation API and Fullscreen](https://reader034.vdocuments.us/reader034/viewer/2022042514/558e0bb01a28ab6a318b458c/html5/thumbnails/7.jpg)
Current����������� ������������������ Orientation
•portrait-primary
•portrait-secondary
•portrait
•landscape-primary
•landscape-secondary
•landscape
![Page 8: HTML5 API - The Screen Orientation API and Fullscreen](https://reader034.vdocuments.us/reader034/viewer/2022042514/558e0bb01a28ab6a318b458c/html5/thumbnails/8.jpg)
landscape?����������� ������������������ portrait?
•기기나����������� ������������������ 플랫폼에����������� ������������������ 따라����������� ������������������ 다름
•landscape인����������� ������������������ 기기에서의����������� ������������������ 기본����������� ������������������ 방향은����������� ������������������ landscape-primary
•portrait인����������� ������������������ 기기에서의����������� ������������������ 기본����������� ������������������ 방향은����������� ������������������ portrait-primary
![Page 9: HTML5 API - The Screen Orientation API and Fullscreen](https://reader034.vdocuments.us/reader034/viewer/2022042514/558e0bb01a28ab6a318b458c/html5/thumbnails/9.jpg)
Landscape-primary Portrait-primary
![Page 10: HTML5 API - The Screen Orientation API and Fullscreen](https://reader034.vdocuments.us/reader034/viewer/2022042514/558e0bb01a28ab6a318b458c/html5/thumbnails/10.jpg)
Primary?����������� ������������������ Secondary?
Landscape-primary
Portrait-primary
Portrait-secondary
Landscape-secondary
![Page 11: HTML5 API - The Screen Orientation API and Fullscreen](https://reader034.vdocuments.us/reader034/viewer/2022042514/558e0bb01a28ab6a318b458c/html5/thumbnails/11.jpg)
방향����������� ������������������ 고정
•현재����������� ������������������ 브라우저의����������� ������������������ 내용이����������� ������������������ 표시되는����������� ������������������ 방향을����������� ������������������ 강제로����������� ������������������ 설정
•잠금이����������� ������������������ 해제될����������� ������������������ 때까지����������� ������������������ 유지됨
![Page 12: HTML5 API - The Screen Orientation API and Fullscreen](https://reader034.vdocuments.us/reader034/viewer/2022042514/558e0bb01a28ab6a318b458c/html5/thumbnails/12.jpg)
window.orientation����������� ������������������ vs����������� ������������������ screen.orientation
•window.orientation
•기기의����������� ������������������ 방향
•screen.orientation
•브라우저의����������� ������������������ 내용이����������� ������������������ 출력되는����������� ������������������ 방향
![Page 13: HTML5 API - The Screen Orientation API and Fullscreen](https://reader034.vdocuments.us/reader034/viewer/2022042514/558e0bb01a28ab6a318b458c/html5/thumbnails/13.jpg)
Screen:����������� ������������������ attribute
•onorientationchange
•이벤트����������� ������������������ 핸들러
•orientation
•현재����������� ������������������ 방향의����������� ������������������ 값
•readonly
![Page 14: HTML5 API - The Screen Orientation API and Fullscreen](https://reader034.vdocuments.us/reader034/viewer/2022042514/558e0bb01a28ab6a318b458c/html5/thumbnails/14.jpg)
Screen:����������� ������������������ method
•lockOrientation(orientation)
•지정된����������� ������������������ 방향으로����������� ������������������ 고정
•lockOrientation(orientations)
•지정된����������� ������������������ 방향으로����������� ������������������ 고정
•unlockOrientation()
•고정된����������� ������������������ 상태를����������� ������������������ 해제
•현재����������� ������������������ 환경에����������� ������������������ 기본����������� ������������������ 방향이����������� ������������������ 정의되어����������� ������������������ 있다면����������� ������������������ 해당����������� ������������������ 방향으로����������� ������������������ 전환
•그렇지����������� ������������������ 않은����������� ������������������ 경우����������� ������������������ UserAgent에서����������� ������������������ 적당히����������� ������������������ 전환
•unlock이����������� ������������������ 완료되면����������� ������������������ Screen객체에서����������� ������������������ orientationchange����������� ������������������ 이벤트����������� ������������������ 발생
![Page 15: HTML5 API - The Screen Orientation API and Fullscreen](https://reader034.vdocuments.us/reader034/viewer/2022042514/558e0bb01a28ab6a318b458c/html5/thumbnails/15.jpg)
Fullscreen
![Page 16: HTML5 API - The Screen Orientation API and Fullscreen](https://reader034.vdocuments.us/reader034/viewer/2022042514/558e0bb01a28ab6a318b458c/html5/thumbnails/16.jpg)
Fullscreen
•Working����������� ������������������ Draft����������� ������������������ -����������� ������������������ 2012/07/03
•웹����������� ������������������ 플랫폼에서����������� ������������������ 전체����������� ������������������ 화면����������� ������������������ 기능을����������� ������������������ 사용하기����������� ������������������ 위한����������� ������������������ 명세
•HTML����������� ������������������ 5.1
•http://docs.webplatform.org/wiki/tutorials/using_the_full-screen_api
![Page 17: HTML5 API - The Screen Orientation API and Fullscreen](https://reader034.vdocuments.us/reader034/viewer/2022042514/558e0bb01a28ab6a318b458c/html5/thumbnails/17.jpg)
전체����������� ������������������ 화면����������� ������������������ 전환����������� ������������������ 및����������� ������������������ 나오기
•element.requestFullscreen()
•document.exitFullscreen()
![Page 18: HTML5 API - The Screen Orientation API and Fullscreen](https://reader034.vdocuments.us/reader034/viewer/2022042514/558e0bb01a28ab6a318b458c/html5/thumbnails/18.jpg)
전체����������� ������������������ 화면����������� ������������������ 전환
•element에서����������� ������������������ requestFullscreen()����������� ������������������ 호출
•fullscreenerror����������� ������������������ 이벤트
•전체����������� ������������������ 화면����������� ������������������ 전환이����������� ������������������ 실패할����������� ������������������ 때����������� ������������������ 발생
![Page 19: HTML5 API - The Screen Orientation API and Fullscreen](https://reader034.vdocuments.us/reader034/viewer/2022042514/558e0bb01a28ab6a318b458c/html5/thumbnails/19.jpg)
전체����������� ������������������ 화면����������� ������������������ 나오기
•document.exitFullscreen()
•Esc나����������� ������������������ F11를����������� ������������������ 사용자가����������� ������������������ 입력
•다른����������� ������������������ 웹페이지로����������� ������������������ 이동
•브라우저의����������� ������������������ 다른����������� ������������������ 탭으로����������� ������������������ 이동
•다른����������� ������������������ 프로그램으로����������� ������������������ 이동
![Page 20: HTML5 API - The Screen Orientation API and Fullscreen](https://reader034.vdocuments.us/reader034/viewer/2022042514/558e0bb01a28ab6a318b458c/html5/thumbnails/20.jpg)
fullscreenchange����������� ������������������ 이벤트
•document를����������� ������������������ 대상으로����������� ������������������ 발생
•이벤트에서는����������� ������������������ 화면����������� ������������������ 상태에����������� ������������������ 대한����������� ������������������ 값을����������� ������������������ 제공하지����������� ������������������ 않음
•document.fullscreenElement를����������� ������������������ 확인하여����������� ������������������ 현재����������� ������������������ 상태����������� ������������������ 확인
•null이����������� ������������������ 아니면����������� ������������������ 전체����������� ������������������ 화면����������� ������������������ 상태
![Page 21: HTML5 API - The Screen Orientation API and Fullscreen](https://reader034.vdocuments.us/reader034/viewer/2022042514/558e0bb01a28ab6a318b458c/html5/thumbnails/21.jpg)
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
![Page 22: HTML5 API - The Screen Orientation API and Fullscreen](https://reader034.vdocuments.us/reader034/viewer/2022042514/558e0bb01a28ab6a318b458c/html5/thumbnails/22.jpg)
정리
•게임과����������� ������������������ 멀티미디어에서����������� ������������������ 유용할����������� ������������������ 것으로����������� ������������������ 예상
•아직����������� ������������������ Working����������� ������������������ Draft����������� ������������������ 상태로����������� ������������������ 상세한����������� ������������������ 내용은����������� ������������������ 변경될����������� ������������������ 가능성����������� ������������������ 있음
![Page 23: HTML5 API - The Screen Orientation API and Fullscreen](https://reader034.vdocuments.us/reader034/viewer/2022042514/558e0bb01a28ab6a318b458c/html5/thumbnails/23.jpg)
Questions?
![Page 24: HTML5 API - The Screen Orientation API and Fullscreen](https://reader034.vdocuments.us/reader034/viewer/2022042514/558e0bb01a28ab6a318b458c/html5/thumbnails/24.jpg)
감사합니다[email protected]
![Page 25: HTML5 API - The Screen Orientation API and Fullscreen](https://reader034.vdocuments.us/reader034/viewer/2022042514/558e0bb01a28ab6a318b458c/html5/thumbnails/25.jpg)
참고자료
•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