html5 api - the screen orientation api and fullscreen

25
HTML5 APIs The Screen Orientation API & Fullscreen

Upload: jeonghwan-jang

Post on 27-Jun-2015

1.141 views

Category:

Technology


7 download

DESCRIPTION

JSLounge 5th seminar

TRANSCRIPT

Page 1: HTML5 API - The Screen Orientation API and Fullscreen

HTML5����������� ������������������  APIsThe����������� ������������������  Screen����������� ������������������  Orientation����������� ������������������  API����������� ������������������  &����������� ������������������  Fullscreen

Page 2: HTML5 API - The Screen Orientation API and Fullscreen

about����������� ������������������  me

•장정환

[email protected]

•http://nundefined.com

•@nundefined

Page 3: HTML5 API - The Screen Orientation API and Fullscreen

오늘����������� ������������������  주제

•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

현재����������� ������������������  상태

상태 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

The����������� ������������������  Screen����������� ������������������  Orientation����������� ������������������  API

Page 6: HTML5 API - The Screen Orientation API and Fullscreen

Screen����������� ������������������  Orientation����������� ������������������  API

•Working����������� ������������������  Draft����������� ������������������  -����������� ������������������  2012/12/06

•화면의����������� ������������������  방향����������� ������������������  상태에����������� ������������������  대한����������� ������������������  정보����������� ������������������  제공을����������� ������������������  위한����������� ������������������  명세

•HTML����������� ������������������  5.1

Page 7: HTML5 API - The Screen Orientation API and Fullscreen

Current����������� ������������������  Orientation

•portrait-primary

•portrait-secondary

•portrait

•landscape-primary

•landscape-secondary

•landscape

Page 8: HTML5 API - The Screen Orientation API and Fullscreen

landscape?����������� ������������������  portrait?

•기기나����������� ������������������  플랫폼에����������� ������������������  따라����������� ������������������  다름

•landscape인����������� ������������������  기기에서의����������� ������������������  기본����������� ������������������  방향은����������� ������������������  landscape-primary

•portrait인����������� ������������������  기기에서의����������� ������������������  기본����������� ������������������  방향은����������� ������������������  portrait-primary

Page 9: HTML5 API - The Screen Orientation API and Fullscreen

Landscape-primary Portrait-primary

Page 10: HTML5 API - The Screen Orientation API and Fullscreen

Primary?����������� ������������������  Secondary?

Landscape-primary

Portrait-primary

Portrait-secondary

Landscape-secondary

Page 11: HTML5 API - The Screen Orientation API and Fullscreen

방향����������� ������������������  고정

•현재����������� ������������������  브라우저의����������� ������������������  내용이����������� ������������������  표시되는����������� ������������������  방향을����������� ������������������  강제로����������� ������������������  설정

•잠금이����������� ������������������  해제될����������� ������������������  때까지����������� ������������������  유지됨

Page 12: HTML5 API - The Screen Orientation API and Fullscreen

window.orientation����������� ������������������  vs����������� ������������������  screen.orientation

•window.orientation

•기기의����������� ������������������  방향

•screen.orientation

•브라우저의����������� ������������������  내용이����������� ������������������  출력되는����������� ������������������  방향

Page 13: HTML5 API - The Screen Orientation API and Fullscreen

Screen:����������� ������������������  attribute

•onorientationchange

•이벤트����������� ������������������  핸들러

•orientation

•현재����������� ������������������  방향의����������� ������������������  값

•readonly

Page 14: HTML5 API - The Screen Orientation API and Fullscreen

Screen:����������� ������������������  method

•lockOrientation(orientation)

•지정된����������� ������������������  방향으로����������� ������������������  고정

•lockOrientation(orientations)

•지정된����������� ������������������  방향으로����������� ������������������  고정

•unlockOrientation()

•고정된����������� ������������������  상태를����������� ������������������  해제

•현재����������� ������������������  환경에����������� ������������������  기본����������� ������������������  방향이����������� ������������������  정의되어����������� ������������������  있다면����������� ������������������  해당����������� ������������������  방향으로����������� ������������������  전환

•그렇지����������� ������������������  않은����������� ������������������  경우����������� ������������������  UserAgent에서����������� ������������������  적당히����������� ������������������  전환

•unlock이����������� ������������������  완료되면����������� ������������������  Screen객체에서����������� ������������������  orientationchange����������� ������������������  이벤트����������� ������������������  발생

Page 15: HTML5 API - The Screen Orientation API and Fullscreen

Fullscreen

Page 16: HTML5 API - The Screen Orientation API and Fullscreen

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

전체����������� ������������������  화면����������� ������������������  전환����������� ������������������  및����������� ������������������  나오기

•element.requestFullscreen()

•document.exitFullscreen()

Page 18: HTML5 API - The Screen Orientation API and Fullscreen

전체����������� ������������������  화면����������� ������������������  전환

•element에서����������� ������������������  requestFullscreen()����������� ������������������  호출

•fullscreenerror����������� ������������������  이벤트

•전체����������� ������������������  화면����������� ������������������  전환이����������� ������������������  실패할����������� ������������������  때����������� ������������������  발생

Page 19: HTML5 API - The Screen Orientation API and Fullscreen

전체����������� ������������������  화면����������� ������������������  나오기

•document.exitFullscreen()

•Esc나����������� ������������������  F11를����������� ������������������  사용자가����������� ������������������  입력

•다른����������� ������������������  웹페이지로����������� ������������������  이동

•브라우저의����������� ������������������  다른����������� ������������������  탭으로����������� ������������������  이동

•다른����������� ������������������  프로그램으로����������� ������������������  이동

Page 20: HTML5 API - The Screen Orientation API and Fullscreen

fullscreenchange����������� ������������������  이벤트

•document를����������� ������������������  대상으로����������� ������������������  발생

•이벤트에서는����������� ������������������  화면����������� ������������������  상태에����������� ������������������  대한����������� ������������������  값을����������� ������������������  제공하지����������� ������������������  않음

•document.fullscreenElement를����������� ������������������  확인하여����������� ������������������  현재����������� ������������������  상태����������� ������������������  확인

•null이����������� ������������������  아니면����������� ������������������  전체����������� ������������������  화면����������� ������������������  상태

Page 21: HTML5 API - The Screen Orientation API and Fullscreen

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

정리

•게임과����������� ������������������  멀티미디어에서����������� ������������������  유용할����������� ������������������  것으로����������� ������������������  예상

•아직����������� ������������������  Working����������� ������������������  Draft����������� ������������������  상태로����������� ������������������  상세한����������� ������������������  내용은����������� ������������������  변경될����������� ������������������  가능성����������� ������������������  있음

Page 23: HTML5 API - The Screen Orientation API and Fullscreen

Questions?

Page 24: HTML5 API - The Screen Orientation API and Fullscreen

감사합니다[email protected]

Page 25: HTML5 API - The Screen Orientation API and Fullscreen

참고자료

•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