HTML5 APIs - Part1. Multimedia

HTML5 Standard
Essential Training
Advanced Features
& Integrated APIs

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

1

HTML5 Standard
Essential Training
Advanced Features
& Integrated APIs

C2-1. HTML5 멀티미디어

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

2

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

HTML5 Standard
Essential Training

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

4

목차 핵심직무능력 향상을 위한
HTML5 표준 활용 기술과 전략

01 HTML5 표준과 모바일웹 05 모바일웹 페이지 작성
02 HTML5 멀티미디어 06 터치기반 UI 프레임워크
03 HTML5 API 표준 07 Device API 표준
04 CSS3 실전적용 08 하이브리드 모바일 웹/앱

5

02
HTML5 Multimedia

HTML5 Multimedia

HTML5 Rich Interactive App

Responsive web app with HTML5

6

02 HTML5 마크업 표준

HTML5 New Tags

Structural Tags
section

header

nav

command

7


HTML5 New Tags

Structural Tags
section article

header footer

nav canvas

command details

8


HTML5 New Tags

Structural Tags
section article hgroup

header footer audio

nav canvas embed

command details datalist

9


HTML5 New Tags

Structural Tags
section article hgroup aside

header footer audio video

nav canvas embed figure

command details datalist time

10


HTML5 New Tags

Structural Tags




11


HTML5 New Tags

Content Tags




12


HTML5 New APIs

Integrated APIs

Audio Video

13


HTML5 New APIs

Integrated APIs

Audio Video Offline Editable

14


HTML5 New APIs

Integrated APIs


DragDrop History

15


HTML5 New APIs

Integrated APIs


DragDrop History Protocol Protocol

16


HTML5 New APIs

Associated APIs

Geolocation

Web Worker

17


HTML5 New APIs

Associated APIs

Geolocation 2D Canvas

Web Worker Web Sockets

18


HTML5 New APIs

Associated APIs

Geolocation 2D Canvas Local Storage

Web Worker Web Sockets Messaging

19

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

Audio / Video
MP4 (.mp4)

H.264

20


Audio / Video
MP4 (.mp4)

H.264

AAC

Safari, IE9, Flash

21


Audio / Video
MP4 (.mp4) OGG (.ogv)

H.264 Theora

AAC

Safari, IE9, Flash

22


Audio / Video
MP4 (.mp4) OGG (.ogv)

H.264 Theora

AAC Vorvis

Safari, IE9, Flash Chrome, Ffox, Op

23


Audio / Video
MP4 (.mp4) OGG (.ogv) WEBM (.webm)

H.264 Theora VP8

AAC Vorvis

Safari, IE9, Flash Chrome, Ffox, Op

24


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


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

26


Audio / Video | Converter

27



28



29


SVG (Scalable Vector Graphics)

30


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

31



32



Inkscape SVG Tool

33


Canvas

34


Canvas
캔버스 요소는 HTML5를 구성하는 요소중 하나다. 스크립트
방식에 의해 동적으로 2D 도형과 비트맵 이미지를 화면에 구
현한다.

35


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


Canvas

37


Canvas

38


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

39


Canvas

var sourceX = 1200;
var sourceY = 0;
var sourceWidth = 400;
var sourceHeight = 346;

40


Canvas

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

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


42

HTML5 APIs - Part1. Multimedia

More Related Content

What's hot (19)

Similar to HTML5 APIs - Part1. Multimedia (20)

More from Junsang Dong (13)

HTML5 APIs - Part1. Multimedia