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