Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5 API - The Screen Orientation API and Fullscreen

1,496 views

Published on

JSLounge 5th seminar

Published in: Technology
  • Be the first to comment

HTML5 API - The Screen Orientation API and Fullscreen

  1. 1. HTML5
  2. 2.  APIsThe
  3. 3.  Screen
  4. 4.  Orientation
  5. 5.  API
  6. 6.  
  7. 7.  Fullscreen
  8. 8. about
  9. 9.  me•장정환•nundefined@nundefined.com•http://nundefined.com•@nundefined
  10. 10. 오늘
  11. 11.  주제•The
  12. 12.  Screen
  13. 13.  Orientation
  14. 14.  API•http://www.w3.org/TR/screen-orientation/•Fullscreen•http://www.w3.org/TR/fullscreen/
  15. 15. 현재
  16. 16.  상태상태WorkingGroupOrientationLockWorking Draft(초기 단계)Web AppsWorkingGroupFullscreenWorking Draft(초기 단계)Web Apps CSS WorkingGroups
  17. 17. The
  18. 18.  Screen
  19. 19.  Orientation
  20. 20.  API
  21. 21. Screen
  22. 22.  Orientation
  23. 23.  API•Working
  24. 24.  Draft
  25. 25.  -
  26. 26.  2012/12/06•화면의
  27. 27.  방향
  28. 28.  상태에
  29. 29.  대한
  30. 30.  정보
  31. 31.  제공을
  32. 32.  위한
  33. 33.  명세•HTML
  34. 34.  5.1
  35. 35. Current
  36. 36.  Orientation•portrait-primary•portrait-secondary•portrait•landscape-primary•landscape-secondary•landscape
  37. 37. landscape?
  38. 38.  portrait?•기기나
  39. 39.  플랫폼에
  40. 40.  따라
  41. 41.  다름•landscape인
  42. 42.  기기에서의
  43. 43.  기본
  44. 44.  방향은
  45. 45.  landscape-primary•portrait인
  46. 46.  기기에서의
  47. 47.  기본
  48. 48.  방향은
  49. 49.  portrait-primary
  50. 50. Landscape-primary Portrait-primary
  51. 51. Primary?
  52. 52.  Secondary?Landscape-primaryPortrait-primaryPortrait-secondaryLandscape-secondary
  53. 53. 방향
  54. 54.  고정•현재
  55. 55.  브라우저의
  56. 56.  내용이
  57. 57.  표시되는
  58. 58.  방향을
  59. 59.  강제로
  60. 60.  설정•잠금이
  61. 61.  해제될
  62. 62.  때까지
  63. 63.  유지됨
  64. 64. window.orientation
  65. 65.  vs
  66. 66.  screen.orientation•window.orientation•기기의
  67. 67.  방향•screen.orientation•브라우저의
  68. 68.  내용이
  69. 69.  출력되는
  70. 70.  방향
  71. 71. Screen:
  72. 72.  attribute•onorientationchange•이벤트
  73. 73.  핸들러•orientation•현재
  74. 74.  방향의
  75. 75.  값•readonly
  76. 76. Screen:
  77. 77.  method•lockOrientation(orientation)•지정된
  78. 78.  방향으로
  79. 79.  고정•lockOrientation(orientations)•지정된
  80. 80.  방향으로
  81. 81.  고정•unlockOrientation()•고정된
  82. 82.  상태를
  83. 83.  해제•현재
  84. 84.  환경에
  85. 85.  기본
  86. 86.  방향이
  87. 87.  정의되어
  88. 88.  있다면
  89. 89.  해당
  90. 90.  방향으로
  91. 91.  전환•그렇지
  92. 92.  않은
  93. 93.  경우
  94. 94.  UserAgent에서
  95. 95.  적당히
  96. 96.  전환•unlock이
  97. 97.  완료되면
  98. 98.  Screen객체에서
  99. 99.  orientationchange
  100. 100.  이벤트
  101. 101.  발생
  102. 102. Fullscreen
  103. 103. Fullscreen•Working
  104. 104.  Draft
  105. 105.  -
  106. 106.  2012/07/03•웹
  107. 107.  플랫폼에서
  108. 108.  전체
  109. 109.  화면
  110. 110.  기능을
  111. 111.  사용하기
  112. 112.  위한
  113. 113.  명세•HTML
  114. 114.  5.1•http://docs.webplatform.org/wiki/tutorials/using_the_full-screen_api
  115. 115. 전체
  116. 116.  화면
  117. 117.  전환
  118. 118.  및
  119. 119.  나오기•element.requestFullscreen()•document.exitFullscreen()
  120. 120. 전체
  121. 121.  화면
  122. 122.  전환•element에서
  123. 123.  requestFullscreen()
  124. 124.  호출•fullscreenerror
  125. 125.  이벤트•전체
  126. 126.  화면
  127. 127.  전환이
  128. 128.  실패할
  129. 129.  때
  130. 130.  발생
  131. 131. 전체
  132. 132.  화면
  133. 133.  나오기•document.exitFullscreen()•Esc나
  134. 134.  F11를
  135. 135.  사용자가
  136. 136.  입력•다른
  137. 137.  웹페이지로
  138. 138.  이동•브라우저의
  139. 139.  다른
  140. 140.  탭으로
  141. 141.  이동•다른
  142. 142.  프로그램으로
  143. 143.  이동
  144. 144. fullscreenchange
  145. 145.  이벤트•document를
  146. 146.  대상으로
  147. 147.  발생•이벤트에서는
  148. 148.  화면
  149. 149.  상태에
  150. 150.  대한
  151. 151.  값을
  152. 152.  제공하지
  153. 153.  않음•document.fullscreenElement를
  154. 154.  확인하여
  155. 155.  현재
  156. 156.  상태
  157. 157.  확인•null이
  158. 158.  아니면
  159. 159.  전체
  160. 160.  화면
  161. 161.  상태
  162. 162. 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
  163. 163. 정리•게임과
  164. 164.  멀티미디어에서
  165. 165.  유용할
  166. 166.  것으로
  167. 167.  예상•아직
  168. 168.  Working
  169. 169.  Draft
  170. 170.  상태로
  171. 171.  상세한
  172. 172.  내용은
  173. 173.  변경될
  174. 174.  가능성
  175. 175.  있음
  176. 176. Questions?
  177. 177. 감사합니다nundefined@nundefined.com
  178. 178. 참고자료•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

×