HTML5 APIs - Part1. Multimedia

3,681 views

Published on

HTML5 API Essential중 멀티미디어 부분을 발췌했습니다. 슬라이드를 지원할 영상파일이 준비되면 함께 링크 예정입니다.

Published in: Education, Technology, Design
2 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total views
3,681
On SlideShare
0
From Embeds
0
Number of Embeds
1,321
Actions
Shares
0
Downloads
122
Comments
2
Likes
4
Embeds 0
No embeds

No notes for slide

HTML5 APIs - Part1. Multimedia

  1. 1. HTML5 StandardEssential TrainingAdvanced Features& Integrated APIs넥스트플랫폼 | 동준상 (Junsang Dong) 1
  2. 2. HTML5 StandardEssential TrainingAdvanced Features& Integrated APIsC2-1. HTML5 멀티미디어넥스트플랫폼 | 동준상 (Junsang Dong) 2
  3. 3. HTML5 StandardEssential Training넥스트 플랫폼 대표 / UI Developer동 준 상 (naebon1@gmail.com)저술 : 모바일 UX디자인, 모바일 Prototype 개발, HTML Multimedia Essential번역 : HTML5 Multimedia Development, jQuery UI 1.8, The iOS 5 Developers Cookbook 3
  4. 4. HTML5 StandardEssential Training넥스트 플랫폼 대표 / UI Developer동 준 상 (naebon1@gmail.com)저술 : 모바일 UX디자인, 모바일 Prototype 개발, HTML Multimedia Essential번역 : HTML5 Multimedia Development, jQuery UI 1.8, The iOS 5 Developers Cookbook 4
  5. 5. 목차 핵심직무능력 향상을 위한 HTML5 표준 활용 기술과 전략01 HTML5 표준과 모바일웹 05 모바일웹 페이지 작성02 HTML5 멀티미디어 06 터치기반 UI 프레임워크03 HTML5 API 표준 07 Device API 표준04 CSS3 실전적용 08 하이브리드 모바일 웹/앱 5
  6. 6. 02 HTML5 Multimedia HTML5 Multimedia HTML5 Rich Interactive App Responsive web app with HTML5 6
  7. 7. 02 HTML5 마크업 표준 HTML5 New Tags Structural Tags section header nav command 7
  8. 8. 02 HTML5 마크업 표준 HTML5 New Tags Structural Tags section article header footer nav canvas command details 8
  9. 9. 02 HTML5 마크업 표준 HTML5 New Tags Structural Tags section article hgroup header footer audio nav canvas embed command details datalist 9
  10. 10. 02 HTML5 마크업 표준 HTML5 New Tags Structural Tags section article hgroup aside header footer audio video nav canvas embed figure command details datalist time 10
  11. 11. 02 HTML5 마크업 표준 HTML5 New Tags Structural Tags section article hgroup aside header footer audio video nav canvas embed figure command details datalist time 11
  12. 12. 02 HTML5 마크업 표준 HTML5 New Tags Content Tags section article hgroup aside header footer audio video nav canvas embed figure command details datalist time 12
  13. 13. 02 HTML5 마크업 표준 HTML5 New APIs Integrated APIs Audio Video 13
  14. 14. 02 HTML5 마크업 표준 HTML5 New APIs Integrated APIs Audio Video Offline Editable 14
  15. 15. 02 HTML5 마크업 표준 HTML5 New APIs Integrated APIs Audio Video Offline Editable DragDrop History 15
  16. 16. 02 HTML5 마크업 표준 HTML5 New APIs Integrated APIs Audio Video Offline Editable DragDrop History Protocol Protocol 16
  17. 17. 02 HTML5 마크업 표준 HTML5 New APIs Associated APIs Geolocation Web Worker 17
  18. 18. 02 HTML5 마크업 표준 HTML5 New APIs Associated APIs Geolocation 2D Canvas Web Worker Web Sockets 18
  19. 19. 02 HTML5 마크업 표준 HTML5 New APIs Associated APIs Geolocation 2D Canvas Local Storage Web Worker Web Sockets Messaging 19
  20. 20. 02 HTML5 마크업 표준 - 멀티미디어 Audio / Video MP4 (.mp4) H.264 20
  21. 21. 02 HTML5 마크업 표준 - 멀티미디어 Audio / Video MP4 (.mp4) H.264 AAC Safari, IE9, Flash 21
  22. 22. 02 HTML5 마크업 표준 - 멀티미디어 Audio / Video MP4 (.mp4) OGG (.ogv) H.264 Theora AAC Safari, IE9, Flash 22
  23. 23. 02 HTML5 마크업 표준 - 멀티미디어 Audio / Video MP4 (.mp4) OGG (.ogv) H.264 Theora AAC Vorvis Safari, IE9, Flash Chrome, Ffox, Op 23
  24. 24. 02 HTML5 마크업 표준 - 멀티미디어 Audio / Video MP4 (.mp4) OGG (.ogv) WEBM (.webm) H.264 Theora VP8 AAC Vorvis Safari, IE9, Flash Chrome, Ffox, Op 24
  25. 25. 02 HTML5 마크업 표준 - 멀티미디어 Audio / Video MP4 (.mp4) OGG (.ogv) WEBM (.webm) H.264 Theora VP8 AAC Vorvis Vorvis Safari, IE9, Flash Chrome, Ffox, Op Chrome, Ffox, Op 25
  26. 26. 02 HTML5 마크업 표준 - 멀티미디어 Audio / Video <video controls height="360" width="640“> <source src="__VIDEO__.MP4" type="video/mp4" /> <source src="__VIDEO__.OGV" type="video/ogg" /> </video> 26
  27. 27. 02 HTML5 마크업 표준 - 멀티미디어 Audio / Video | Converter 27
  28. 28. 02 HTML5 마크업 표준 - 멀티미디어 Audio / Video | Converter 28
  29. 29. 02 HTML5 마크업 표준 - 멀티미디어 Audio / Video | Converter 29
  30. 30. 02 HTML5 마크업 표준 - 멀티미디어 SVG (Scalable Vector Graphics) 30
  31. 31. 02 HTML5 마크업 표준 - 멀티미디어 SVG (Scalable Vector Graphics) 2D 벡터 그래픽을 화면에 구현하기 위한 XML기반의 파일 포 멧이다. 정적, 동적 이미지 모두 구현 가능하며, 상호작용, 애니 메이션도 가능하다. 애플에 의해 개발된 캔버스 요소보다 빠른, 1999년에 W3C 표준으로 채택됐다. 31
  32. 32. 02 HTML5 마크업 표준 - 멀티미디어 SVG (Scalable Vector Graphics) 2D 벡터 그래픽을 화면에 구현하기 위한 XML기반의 파일 포 멧이다. 정적, 동적 이미지 모두 구현 가능하며, 상호작용, 애니 메이션도 가능하다. 애플에 의해 개발된 캔버스 요소보다 빠른, 1999년에 W3C 표준으로 채택됐다. 32
  33. 33. 02 HTML5 마크업 표준 - 멀티미디어 SVG (Scalable Vector Graphics) 2D 벡터 그래픽을 화면에 구현하기 위한 XML기반의 파일 포 멧이다. 정적, 동적 이미지 모두 구현 가능하며, 상호작용, 애니 메이션도 가능하다. 애플에 의해 개발된 캔버스 요소보다 빠른, 1999년에 W3C 표준으로 채택됐다. Inkscape SVG Tool 33
  34. 34. 02 HTML5 마크업 표준 - 멀티미디어 Canvas 34
  35. 35. 02 HTML5 마크업 표준 - 멀티미디어 Canvas 캔버스 요소는 HTML5를 구성하는 요소중 하나다. 스크립트 방식에 의해 동적으로 2D 도형과 비트맵 이미지를 화면에 구 현한다. 35
  36. 36. 02 HTML5 마크업 표준 - 멀티미디어 Canvas 캔버스 요소는 HTML5를 구성하는 요소중 하나다. 스크립트 방식에 의해 동적으로 2D 도형과 비트맵 이미지를 화면에 구 현한다. <canvas id="myCanvas"></canvas> var cvs = document.getElementById(myCanvas); var ctx = cvs.getContext(2d); var img = new Image(); img.src = tiles.png; 36
  37. 37. 02 HTML5 마크업 표준 - 멀티미디어 Canvas 37
  38. 38. 02 HTML5 마크업 표준 - 멀티미디어 Canvas 38
  39. 39. 02 HTML5 마크업 표준 - 멀티미디어 Canvas ctx.drawImage(img, sourceX, sourceY, sourceWidth, sourceHeight, destinationX, destinationY, destinationWidth, destinationHeight); 39
  40. 40. 02 HTML5 마크업 표준 - 멀티미디어 Canvas ctx.drawImage(img, sourceX, sourceY, sourceWidth, sourceHeight, destinationX, destinationY, destinationWidth, destinationHeight); var sourceX = 1200; var sourceY = 0; var sourceWidth = 400; var sourceHeight = 346; 40
  41. 41. 02 HTML5 마크업 표준 - 멀티미디어 Canvas ctx.drawImage(img, sourceX, sourceY, sourceWidth, sourceHeight, destinationX, destinationY, destinationWidth, destinationHeight); var sourceX = 1200; var sourceY = 0; var sourceWidth = 400; var sourceHeight = 346; var destinationX = 0; var destinationY = 0; var destinationWidth = 400; var destinationHeight = 346; 41
  42. 42. HTML5 StandardEssential Training끝 | C2-1. HTML5 멀티미디어넥스트 플랫폼 대표 / UI Developer동 준 상 (naebon1@gmail.com) 42

×