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

1. HTML5 Standard
Essential Training
Advanced Features
& Integrated APIs
넥스트플랫폼 | 동준상 (Junsang Dong)
1

2. HTML5 Standard
Essential Training
Advanced Features
& Integrated APIs
C2-1. HTML5 멀티미디어
넥스트플랫폼 | 동준상 (Junsang Dong)
2

3. HTML5 Standard
Essential Training
넥스트 플랫폼 대표 / UI Developer
동 준 상 (naebon1@gmail.com)
저술 : 모바일 UX디자인, 모바일 Prototype 개발, HTML Multimedia Essential
번역 : HTML5 Multimedia Development, jQuery UI 1.8, The iOS 5 Developer's Cookbook
3

4. HTML5 Standard
Essential Training
넥스트 플랫폼 대표 / UI Developer
동 준 상 (naebon1@gmail.com)
저술 : 모바일 UX디자인, 모바일 Prototype 개발, HTML Multimedia Essential
번역 : HTML5 Multimedia Development, jQuery UI 1.8, The iOS 5 Developer's Cookbook
4

5. 목차 핵심직무능력 향상을 위한
HTML5 표준 활용 기술과 전략
01 HTML5 표준과 모바일웹 05 모바일웹 페이지 작성
02 HTML5 멀티미디어 06 터치기반 UI 프레임워크
03 HTML5 API 표준 07 Device API 표준
04 CSS3 실전적용 08 하이브리드 모바일 웹/앱
5

6. 02
HTML5 Multimedia
HTML5 Multimedia
HTML5 Rich Interactive App
Responsive web app with HTML5
6

7. 02 HTML5 마크업 표준
HTML5 New Tags
Structural Tags
section
header
nav
command
7

8. 02 HTML5 마크업 표준
HTML5 New Tags
Structural Tags
section article
header footer
nav canvas
command details
8

9. 02 HTML5 마크업 표준
HTML5 New Tags
Structural Tags
section article hgroup
header footer audio
nav canvas embed
command details datalist
9

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. 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. 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. 02 HTML5 마크업 표준
HTML5 New APIs
Integrated APIs
Audio Video
13

14. 02 HTML5 마크업 표준
HTML5 New APIs
Integrated APIs
Audio Video Offline Editable
14

15. 02 HTML5 마크업 표준
HTML5 New APIs
Integrated APIs
Audio Video Offline Editable
DragDrop History
15

16. 02 HTML5 마크업 표준
HTML5 New APIs
Integrated APIs
Audio Video Offline Editable
DragDrop History Protocol Protocol
16

17. 02 HTML5 마크업 표준
HTML5 New APIs
Associated APIs
Geolocation
Web Worker
17

18. 02 HTML5 마크업 표준
HTML5 New APIs
Associated APIs
Geolocation 2D Canvas
Web Worker Web Sockets
18

19. 02 HTML5 마크업 표준
HTML5 New APIs
Associated APIs
Geolocation 2D Canvas Local Storage
Web Worker Web Sockets Messaging
19

20. 02 HTML5 마크업 표준 - 멀티미디어
Audio / Video
MP4 (.mp4)
H.264
20

21. 02 HTML5 마크업 표준 - 멀티미디어
Audio / Video
MP4 (.mp4)
H.264
AAC
Safari, IE9, Flash
21

22. 02 HTML5 마크업 표준 - 멀티미디어
Audio / Video
MP4 (.mp4) OGG (.ogv)
H.264 Theora
AAC
Safari, IE9, Flash
22

23. 02 HTML5 마크업 표준 - 멀티미디어
Audio / Video
MP4 (.mp4) OGG (.ogv)
H.264 Theora
AAC Vorvis
Safari, IE9, Flash Chrome, Ffox, Op
23

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. 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. 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. 02 HTML5 마크업 표준 - 멀티미디어
Audio / Video | Converter
27

28. 02 HTML5 마크업 표준 - 멀티미디어
Audio / Video | Converter
28

29. 02 HTML5 마크업 표준 - 멀티미디어
Audio / Video | Converter
29

30. 02 HTML5 마크업 표준 - 멀티미디어
SVG (Scalable Vector Graphics)
30

31. 02 HTML5 마크업 표준 - 멀티미디어
SVG (Scalable Vector Graphics)
2D 벡터 그래픽을 화면에 구현하기 위한 XML기반의 파일 포
멧이다. 정적, 동적 이미지 모두 구현 가능하며, 상호작용, 애니
메이션도 가능하다. 애플에 의해 개발된 캔버스 요소보다 빠른,
1999년에 W3C 표준으로 채택됐다.
31

32. 02 HTML5 마크업 표준 - 멀티미디어
SVG (Scalable Vector Graphics)
2D 벡터 그래픽을 화면에 구현하기 위한 XML기반의 파일 포
멧이다. 정적, 동적 이미지 모두 구현 가능하며, 상호작용, 애니
메이션도 가능하다. 애플에 의해 개발된 캔버스 요소보다 빠른,
1999년에 W3C 표준으로 채택됐다.
32

33. 02 HTML5 마크업 표준 - 멀티미디어
SVG (Scalable Vector Graphics)
2D 벡터 그래픽을 화면에 구현하기 위한 XML기반의 파일 포
멧이다. 정적, 동적 이미지 모두 구현 가능하며, 상호작용, 애니
메이션도 가능하다. 애플에 의해 개발된 캔버스 요소보다 빠른,
1999년에 W3C 표준으로 채택됐다.
Inkscape SVG Tool
33

34. 02 HTML5 마크업 표준 - 멀티미디어
Canvas
34

35. 02 HTML5 마크업 표준 - 멀티미디어
Canvas
캔버스 요소는 HTML5를 구성하는 요소중 하나다. 스크립트
방식에 의해 동적으로 2D 도형과 비트맵 이미지를 화면에 구
현한다.
35

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. 02 HTML5 마크업 표준 - 멀티미디어
Canvas
37

38. 02 HTML5 마크업 표준 - 멀티미디어
Canvas
38

39. 02 HTML5 마크업 표준 - 멀티미디어
Canvas
ctx.drawImage(img, sourceX, sourceY, sourceWidth,
sourceHeight, destinationX, destinationY,
destinationWidth, destinationHeight);
39

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. 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. HTML5 Standard
Essential Training
끝 | C2-1. HTML5 멀티미디어
넥스트 플랫폼 대표 / UI Developer
동 준 상 (naebon1@gmail.com)
42