티스토리 뷰

DEVELOPE/HTML-HTML5

html5 video audio tag

소찾나 2017. 11. 21. 13:22
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

html5 video audio tag

html5 video audio tag

html5 video audio tag



html5 의 새로운 기술중 눈의 띄는 중요한 것중 하나가 video 와 audio 요소이다. 멀티미디어적 요소로


html5 에서는 멀티미디어 요소의 tag 가 강화되었다. 단어에서 알 수 있듯 비디오와 오디오를 구동시


킬수 있는 태그로 html5 이전에는 adobe flash 나 microsoft silverlight 등 외부 플러그인을 통해서


구동할 수 있었던 기능들이다


1 video 사용하기


사용법은 간단하다. <video> 태그를 사용하고 html 태그안에 넣기만 하면 된다. 예제를 보자


1
<video src="sample.ogv"></video>                                                                
cs


위 코드만으로 브라우저에서 동영상을 재생할 수 있습니다. 이렇게 재생할 수 있을뿐 아니라 javascript 통해 여러가지 조작도 가능합니다.


재생 및 일시정지 속도변경등


source 요소를 사용한 미디어 사용


<video> 태그 안에 <source> 태그를 사용하면 보다 유연하게 url 을 지정할 수 있다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>                                                                                    
<html>
<head>
<title>html5 비디오테스트</title>
 
</head>
</head>
<body>
 
<video controls> 
  <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
  <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
  <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
  <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>
 
</body>
</html>                             
cs


html5 video audio tag



2 audio 요소 사용


<audio> 태그는 오디오 파일의 재생을 위한 html5 태그로 사용법은 <video> 태그와 도일하다.



이글이 도움이 되셨다면 아래에 로그인이 필요없는 공감 버튼을 클릭해주세요 ^^


'DEVELOPE > HTML-HTML5' 카테고리의 다른 글

html5 input 태그  (0) 2017.11.29
html5 time 태그 & 마이크로포맷  (0) 2017.11.29
html5 canvas api 사용  (0) 2017.11.20
html5 태그 중 생략가능한 종료태그  (0) 2017.11.18
html5 태그 figure, figcaption  (0) 2017.11.17
공유하기 링크
댓글