Top Banner
HTML5 APIs The Screen Orientation API & Fullscreen
25

HTML5 API - The Screen Orientation API and Fullscreen

Jun 27, 2015

Download

Technology

JeongHwan Jang

JSLounge 5th seminar
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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