This document provides an overview of HTML5 API support in browsers. It discusses features such as forms, video, audio, drag and drop, canvas, geolocation, web storage, app cache, web workers, and server sent events. For each feature, it provides examples codes and lists browser support. It notes that some features like web workers are not supported in Internet Explorer. The document aims to help understand how HTML5 features are implemented across different browsers and on mobile.
6. 목차
1. FROMS
2. Video / DOM
3. Audio
4. Drag and Drop
5. Canvas
6. Geolocation
7. Web Storage
8. App Cache
9. Web Workers
10.SSE(Server Sent Event)
7. Input type Extends function
HTML5 has several new input types for forms. These new
features allow better input control and validation.
Example
Input Type : COLOR
<input type=“color” name=“favcolor” />
TypeName Supproted
Color X X O X O
Date X X O O O
Datetime X X O O O
8. TypeName Supproted
Datetime-local X X O O O
Email X O O X O
Month X X O O O
Number X X O O O
reange X X O O O
Search X X O O X
Tel X X X X X
Time X X O O O
url X O O X O
Week X X O O O
9. 1. FROMS
2. Video / DOM
3. Audio
4. Drag and Drop
5. Canvas
6. Geolocation
7. Web Storage
8. App Cache
9. Web Workers
10.SSE(Server Sent Event)
11. Video Tag
HTML5 defines a new element which specifies a standard way
to embed a video/movie on a web page: the <video> element.
Example
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
Video Formats And Browser Support
Browser MP4 WebM Ogg
Internet Explorer 9 Yse No No
Firefox 4.0 No Yse Yse
Google Chrome 6 Yse Yse Yse
Apple Safari 5 Yse No No
Opera 10.6 No Yse Yse
12. Video Tag
HTML5 defines a new element which specifies a standard way
to embed a video/movie on a web page: the <video> element.
Example
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
Video Formats And Browser Support
Browser MP4 WebM Ogg
Internet Explorer 9 Yse No No
Firefox 4.0 No Yse Yse
Google Chrome 6 Yse Yse Yse
Apple Safari 5 Yse No No
Opera 10.6 No Yse Yse
13. Video Tag
Test link page : http://html5demos.com/video
:Web Browser :Mobile Browser
14. 1. FROMS
2. Video / DOM
3. Audio
4. Drag and Drop
5. Canvas
6. Geolocation
7. Web Storage
8. App Cache
9. Web Workers
10.SSE(Server Sent Event)
16. Audio Tag
defines a new element which specifies a standard way to
embed an audio file on a web page: the <audio> element.
Example
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
Audio Formats And Browser Support
Browser MP4 WebM Ogg
Internet Explorer 9 Yse No No
Firefox 4.0 No Yse Yse
Google Chrome 6 Yse Yse Yse
Apple Safari 5 Yse No No
Opera 10.6 No Yse Yse
17. Audio Tag
Link Page : http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_audio_all
:Web Browser :Mobile Browser
18. 1. FROMS
2. Video / DOM
3. Audio
4. Drag and Drop
5. Canvas
6. Geolocation
7. Web Storage
8. App Cache
9. Web Workers
10.SSE(Server Sent Event)
20. Drag and Drop
개체를 다른 위치로 이동시키는 일반적인 기능, 표준으로 재정 되고 있으나 어떠한
속성은 draggable 될 가능성이 있음.
Browser Support
Browser Yes/No
Internet Explorer 9 Yse
Firefox 4.0 Yse
Google Chrome 6 Yse
Apple Safari 5 Yse
Opera 10.6 Yse
Note : Internet Explorer 8 및 이전 버전에서는 지원 하지 않음
Make an Element Draggable
First of all: To make an element draggable, set the draggable attribute to true:
<img draggable="true" />
21. Drag and Drop
Example Code
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text",ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Drag the W3Schools image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" />
</body>
</html>
Link Page : http://html5demos.com/drag
25. Canvas
HTML5 Canvas Element is web page use to draw graphics
하나의 캔버스는 사각형구역이며, 그픽셀 하나하나를 제어 할 수 있습니다.
Browser Support
Browser Yes/No
Internet Explorer 9 Yse
Firefox 4.0 Yse
Google Chrome 6 Yse
Apple Safari 5 Yse
Opera 10.6 Yse
Note : Internet Explorer 8 및 이전 버전에서는 지원 하지 않음
26. Canvas
Example Code
Create a Canvas
Canvas Element 를 이용한 그리기 width, height 를 이용함
<canvas id="myCanvas" width="200" height="100"></canvas>
Draw With JavaScript
JavaScript를 이용한 그리기
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Link Page : http://paperjs.org/examples/hit-testing/
http://slides.html5rocks.com/#canvas-2d-example
30. GeoLocation
HTML5 Geolocation API is used to get the georaphical position of a
user. (단,개인정보이기 때문에 사용자가 승인한 경우만 사용할 수 있습니다.)
Browser Support
Browser Yes/No
Internet Explorer 9 Yse
Firefox 4.0 Yse
Google Chrome 6 Yse
Apple Safari 5 Yse
Opera 10.6 Yse
Note : Internet Explorer 8 및 이전 버전에서는 지원 하지 않음
Link Page : http://html5demos.com/geo
http://slides.html5rocks.com/#geolocation
34. Web Storage
With HTML5, web pages can store data locally within the user's browser.
Browser Support
Browser Yes/No
Internet Explorer 8 Yse
Firefox 4.0 Yse
Google Chrome 6 Yse
Apple Safari 5 Yse
Opera 10.6 Yse
Note : Internet Explorer 7 및 이전 버전에서는 지원 하지 않음
Link Page : http://www.
35. Web Storage
Example Code
Storage,check browser support for localStorage&sessionStorage
LocalStorage/SessionStorage 확인
if(typeof(Storage)!=="undefined“) {
// Yes! localStorage and sessionStorage support!
// Some code.....
} else {
// Sorry! No web storage support..
}
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
if(typeof(Storage)!=="undefined“) {
localStorage.lastname="Smith";
document.getElementById("result").innerHTML="Last name: " + localStorage.lastname;
} else {
document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
}
</script>
</body>
</html>
Link Page : http://slides.html5rocks.com/#web-storage
39. App Cache
HTML5에서는 Cache를 개발자에 의해 임의적인 Control 이 가능
Browser Support
Browser Yes/No
Internet Explorer No
Firefox 4.0 Yse
Google Chrome 6 Yse
Apple Safari 5 Yse
Opera 10.6 Yse
Note : Internet Explorer 지원 하지 않음
Link Page : http://slides.html5rocks.com/#app-cache
43. Web Worker
JavaScript 구동 시에 JS 파일을 background 에서 독립적으로 Once Thread 에
서 Multi Thread 로 구동 할 수 있다.
Browser Support
Browser Yes/No
Internet Explorer No
Firefox 4.0 Yse
Google Chrome 6 Yse
Apple Safari 5 Yse
Opera 10.6 Yse
Note : Internet Explorer 지원 하지 않음
실행 할 때는 JS파일로 만들어서 사용해야 함
Link Page : http://www.
47. Server Sent Event
사용자의 웹페이를 자동 업데이트 하기 위한 기능
Browser Support
Browser Yes/No
Internet Explorer No
Firefox 4.0 Yse
Google Chrome 6 Yse
Apple Safari 5 Yse
Opera 10.6 Yse
Note : Internet Explorer 지원 하지 않음
Link Page : http://www.