Skip to content

HTML5 멀티미디어 태그 - <video>,<audio>,<embed>

조회 수 8359 추천 수 0 2012.05.02 17:33:41

<video> 태그

웹 브라우저를 통해 동영상을 재생하기 위한 HTML코드. 각 브라우저 마다 지원 코덱이 달라 같은 동영상이라도 재생이 되는 브라우저와 안되는 브라우저가 있다. 

이를 위해, 다른 포멧의 동영상 저장 경로를 모두 지정해두어 다른 브라우저에서도 볼 수 있도록 하는 방법을 사용하고 있다.


 속성

내용 

 controls 

 각 브라우저 고유의 컨트롤 바 표시

 autoplay 

 동영상 파일이 로드되는 즉시 자동으로 재생

 loop  

 동영상 재생이 끝나면 처음부터 다시 반복. 재생횟수 지정

 src 

 동영상 파일 경로 

 poster 

 재생할 동영상이 로드 중이거나 버퍼링 중일때 보일 이미지

 preload 

 동영상 파일을 다운로드하여 재생하는 방식

 auto:자동 다운로드

 none:사용자가 컨트롤을 조작할 때까지 다운 금지

 metadata:메타데이터를 가져오며 사용자가 컨트롤을 조작하면 비디오 부분 다운

 width 

 동영상의 폭(너비)
 height   동영상의 높이


예.

 <!DOCTYPE HTML>

<html>

<head>

<title>video태그 연습</title>

</head>

<body>

     <video controls autoplay preload="auto" width=300px height=200px>

        <source src="multi/dsc_2190.mp4" type='video/mp4;codecs="avc1.42e01e.mp4a.40.2"'>

<source src="multi/dsc_2190.ogv" type='video/ogg;codecs="theora,vorbis"'>

<source src="multi/dsc_2190.webm" type='video/webm;codecs="vp8,vorbis"'>

     </video>

</body>

</html>




<audio>

audio 태그는 video태그와 사용법이 유사하다. 또한 브라우저에 따라 호환되는 파일이 다르다.

속성은 video태그에서 사용되는 width와 height를 제외한 모든 속성이 사용가능하다.


예.

 <!DOCTYPE HTML>

<html>

<head>

<title>오디오 예제</title>

</head>

<body>

<audio controls="controls">

<source src="multi/danosongs.com-black-box-in-the-ground.mp3">

<source src="multi/danosongs.com-black-box-in-the-ground.ogg">

</audio>

</body>

</html>




<embed>

플러그인이 설치된 브라우저 또는 플러그인이 필요한 파일을 재생할 때 사용하는 태그.

만일 플러그인이 설치되어 있지 않으면 실행되지 않는다. embed태그는 이전에도 있었던 태그이지만 보다 단순화되어 사용하기가 편리해졌다.


예.

 <!DOCTYPE HTML>

<html>

<head>

<title> </title>

</head>

<body>

<embed src="multi/sample.swf">

</embed>

<embed src="multi/bs-ironman.mid">

</body>

</html>

profile

일요일은 짜빠게뤼~ 먹는날~^^

엮인글 :
http://adminplay.com/95423/6eb/trackback
List of Articles
번호 제목 글쓴이 날짜 조회 수
287 <video>의 속성과 메소드 ADMINPLAY 2012-10-29 8284
286 FreeBSD 참고 명령문 ( H/W 정보 확인 방법) ADMINPLAY 2012-10-22 10240
285 GBIC(지빅) 이 뭘까?? file ADMINPLAY 2012-08-02 19242
284 GSLB(Global Service Load Balancing) ADMINPLAY 2012-07-30 10948
283 linux bonding (네트워크 2개를 1개의 인터페이스로 구성) ADMINPLAY 2012-06-26 12502
282 TaskSet 으로 Process의 사용 CPU를 지정해 보자! ADMINPLAY 2012-06-18 10274
281 CentOS 4.x 에서 yum 실패 대처 ADMINPLAY 2012-06-13 23160
280 Centos 6.0 사용장비 교체후 eth0,1이 eth2,3으로 밀리거... ADMINPLAY 2012-05-29 15166
279 스퀴드(squid) 로그 로테이트 방법 ADMINPLAY 2012-05-18 7640
278 Squid 의 캐시 저장 기간 설정 ( refresh_pattern ) ADMINPLAY 2012-05-18 6919
277 rsync 를 이용하여 동기화 할때 특정 폴더 2개 이상 제외하기 ADMINPLAY 2012-05-09 10769
276 allowScriptAccess 설정 l2zeo 2012-05-05 8458
» HTML5 멀티미디어 태그 - <video>,<audio>,<embed> ADMINPLAY 2012-05-02 8359
274 squid.conf : Reverse Proxy ADMINPLAY 2012-04-13 19756
273 ssh 특정 ip or 특정대역폭만 접속 허용 ADMINPLAY 2012-03-20 19565
272 lighttpd와 Apache의 성능 차이 file [2] l2zeo 2012-03-08 24285
271 squid.conf ADMINPLAY 2012-03-07 22778
270 [squid] 캐시 로그 결과 값(access_log) ADMINPLAY 2012-03-07 19825
269 linux - cp 덮어쓰기옵션 ADMINPLAY 2012-02-24 25744
268 ffmpeg 설치 및 활용 ADMINPLAY 2012-02-07 35570

Copyright ADMINPLAY corp. All rights reserved.

abcXYZ, 세종대왕,1234

abcXYZ, 세종대왕,1234