Skip to content

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

조회 수 8321 추천 수 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/b90/trackback
List of Articles
번호 제목 글쓴이 날짜 조회 수sort
67 linux - cp 덮어쓰기옵션 ADMINPLAY 2012-02-24 25703
66 장비를 복제해서 옮겼을 경우 네트워크가 eth0_rename 되... ADMINPLAY 2012-01-31 25801
65 리눅스에서 윈도우 공유폴더 접근하기. samba ADMINPLAY 2011-07-12 25891
64 .vimrc 설정 설정, 색상 (VI 설정 색상) ADMINPLAY 2009-03-21 26181
63 rsync : protocol version mismatch -- is your shell clean? ADMINPLAY 2009-05-17 26196
62 리눅스 파일/디렉토리 개수 알기 ADMINPLAY 2010-05-19 26212
61 grep 옵션, egrep 옵션 차이점 ADMINPLAY 2010-02-17 26272
60 oracle IP 변경시 변경 해야될 파일 ADMINPLAY 2009-11-01 26281
59 sftp 포트 변경시 접속 ADMINPLAY 2010-11-10 26402
58 net-snmp 설치 및 snmp 사용법 ADMINPLAY 2009-06-24 26412
57 리눅스 하드디스크 에러메세지 ADMINPLAY 2009-11-01 26418
56 리눅스 한글 설정 l2zeo 2010-03-08 26437
55 usb 부팅 리눅스 만들기(knoppix) ADMINPLAY 2009-08-08 26440
54 [UNIX] 솔라리스 보안 [ 발표자료 ] - 김 석 님 자료 file l2zeo 2010-03-08 26458
53 Making Linux Streaming Server RED5 스트리밍 리눅스서버... ADMINPLAY 2009-09-24 26636
52 리눅스 데몬의 종류 (서비스 종류) ADMINPLAY 2010-06-26 27015
51 CentOS 4, CentOS 5, CentOS 6 에 NTFS 파일시스템 마운트... ADMINPLAY 2012-01-16 27045
50 JWPlayer 사용법 ADMINPLAY 2010-11-11 27087
49 L4 스위치 대신 LVS로 부하분산 해결 ADMINPLAY 2009-11-30 27162
48 insmod,rnmod,lsmod,modprobe 명령어 ADMINPLAY 2010-05-02 27187

Copyright ADMINPLAY corp. All rights reserved.

abcXYZ, 세종대왕,1234

abcXYZ, 세종대왕,1234