html5 video audio tag

DEVELOPE/HTML-HTML5

html5 video audio tag

소찾나 2017. 11. 21. 13:22

html5 video audio tag

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

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

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

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

1 video 사용하기

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

1

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

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

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

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

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

<!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>                             

Colored by Color Scripter

2 audio 요소 사용

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

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