HTML5 APIs - Part1. Multimedia

1

Advanced Features & Integrated APIs

HTML5 Standard Essential Training

넥스트플랫폼 | 동준상 (Junsang Dong)

2

Advanced Features & Integrated APIs C2-1. HTML5 멀티미디어


넥스트플랫폼 | 동준상 (Junsang Dong)

3

동 준 상 ([email protected])

저술 : 모바일 UX디자인, 모바일 Prototype 개발, HTML Multimedia Essential 번역 : HTML5 Multimedia Development, jQuery UI 1.8, The iOS 5 Developer's Cookbook

넥스트 플랫폼 대표 / UI Developer


4


저술 : 모바일 UX디자인, 모바일 Prototype 개발, HTML Multimedia Essential 번역 : HTML5 Multimedia Development, jQuery UI 1.8, The iOS 5 Developer's Cookbook



5

핵심직무능력 향상을 위한

HTML5 표준 활용 기술과 전략 목차

HTML5 표준과 모바일웹

HTML5 멀티미디어

HTML5 API 표준

CSS3 실전적용

01

02

03

04

모바일웹 페이지 작성

터치기반 UI 프레임워크

Device API 표준

하이브리드 모바일 웹/앱

05

06

07

08

6

HTML5 Multimedia 02

HTML5 Multimedia HTML5 Rich Interactive App Responsive web app with HTML5

7

HTML5 New Tags

Structural Tags

command

header

nav

section

HTML5 마크업 표준 02

8

HTML5 New Tags

Structural Tags

article

canvas

command details

header footer

nav

section


9

HTML5 New Tags

Structural Tags

article

audio

canvas

command datalist details

embed

header footer

hgroup

nav

section


10

HTML5 New Tags

Structural Tags

article aside

audio video

canvas


embed figure

header footer

hgroup

nav

section

time


11

HTML5 New Tags

Structural Tags

article aside

audio video

canvas


embed figure

header footer

hgroup

nav

section

time


12

HTML5 New Tags

Content Tags

article aside

audio video

canvas


embed figure

header footer

hgroup

nav

section

time


13

HTML5 New APIs

Integrated APIs

Audio Video


14

HTML5 New APIs

Integrated APIs

Audio Video Offline Editable


15

HTML5 New APIs

Integrated APIs


DragDrop History


16

HTML5 New APIs

Integrated APIs


DragDrop History Protocol Protocol


17

HTML5 New APIs

Associated APIs

Geolocation

Web Worker


18

HTML5 New APIs

Associated APIs

Geolocation 2D Canvas

Web Worker Web Sockets


19

HTML5 New APIs

Associated APIs

Geolocation 2D Canvas Local Storage

Web Worker Web Sockets Messaging


20

Audio / Video

MP4 (.mp4)

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

H.264

21

Audio / Video

MP4 (.mp4)


H.264

AAC

Safari, IE9, Flash

22

Audio / Video

MP4 (.mp4)


H.264

AAC

Safari, IE9, Flash

OGG (.ogv)

Theora

23

Audio / Video

MP4 (.mp4)


H.264

AAC

Safari, IE9, Flash

OGG (.ogv)

Theora

Vorvis

Chrome, Ffox, Op

24

Audio / Video

MP4 (.mp4)


H.264

AAC

Safari, IE9, Flash

OGG (.ogv)

Theora

Vorvis

Chrome, Ffox, Op

WEBM (.webm)

VP8

25

Audio / Video

MP4 (.mp4)


H.264

AAC

Safari, IE9, Flash

OGG (.ogv)

Theora

Vorvis

Chrome, Ffox, Op

WEBM (.webm)

VP8

Vorvis

Chrome, Ffox, Op

26

Audio / Video


<video controls height="360" width="640“> <source src="__VIDEO__.MP4" type="video/mp4" /> <source src="__VIDEO__.OGV" type="video/ogg" /> </video>

27

Audio / Video | Converter


28



29



30

SVG (Scalable Vector Graphics)


31



2D 벡터 그래픽을 화면에 구현하기 위한 XML기반의 파일 포

멧이다. 정적, 동적 이미지 모두 구현 가능하며, 상호작용, 애니

메이션도 가능하다. 애플에 의해 개발된 캔버스 요소보다 빠른,

1999년에 W3C 표준으로 채택됐다.

32







33







Inkscape SVG Tool

34

Canvas


35

Canvas


캔버스 요소는 HTML5를 구성하는 요소중 하나다. 스크립트

방식에 의해 동적으로 2D 도형과 비트맵 이미지를 화면에 구

현한다.

36

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';

37

Canvas


38

Canvas


39

Canvas


ctx.drawImage(img, sourceX, sourceY, sourceWidth, sourceHeight, destinationX, destinationY, destinationWidth, destinationHeight);

40

Canvas


ctx.drawImage(img, sourceX, sourceY, sourceWidth, sourceHeight, destinationX, destinationY, destinationWidth, destinationHeight); var sourceX = 1200; var sourceY = 0; var sourceWidth = 400; var sourceHeight = 346;

41

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;

42




끝 | C2-1. HTML5 멀티미디어

HTML5 APIs - Part1. Multimedia

Education