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/fff/trackback
List of Articles
번호 제목 글쓴이 날짜sort 조회 수
67 Bigbluebutton Installation Ubuntu ADMINPLAY 2013-04-11 8965
66 Installing NGINX, PHP, and MySQL on Ubuntu 10.04 LTS u... ADMINPLAY 2013-04-11 6028
65 ubuntu 부팅시 서비스 자동실행 및 실행방지 ADMINPLAY 2013-04-16 7907
64 웹 언어별 no-cache 리스트 ADMINPLAY 2013-04-22 6647
63 sysctl 조정 방법 ADMINPLAY 2013-04-25 7224
62 리눅스 메모리 관리, 왜 메모리 여유공간이 없을까? (top ... ADMINPLAY 2013-04-25 5245
61 [ UDP ] packet buffer size 조절 ADMINPLAY 2013-04-25 6972
60 웹서버 트래픽 시각화 logstalgia l2zeo 2013-05-03 6094
59 파일비교 명령어 diff 사용법 ADMINPLAY 2013-05-03 9650
58 스트리밍 서비스 위한 각 회사 와우자,어도비,마이크로 ... ADMINPLAY 2013-05-06 9894
57 What are the bandwidth requirements for running a BigB... ADMINPLAY 2013-05-06 5923
56 make 정리 ADMINPLAY 2013-05-12 5274
55 특정 데몬의 메모리 점유율 확인하기 ADMINPLAY 2013-05-12 6134
54 linux 커널 파라메터 수정 ADMINPLAY 2013-05-12 5558
53 Adaptec 컨트롤러 StorMan 에러 및 각종 확인 방법 ADMINPLAY 2013-06-12 8988
52 리눅스 벤치마크 프로그램 목록 ADMINPLAY 2013-09-09 7565
51 HDD Guardian (a graphical user interface for smartctl) ADMINPLAY 2013-09-22 4961
50 windows smartctl ADMINPLAY 2013-09-22 5281
49 tar 압축을 실수로 디렉토리 생성 안하고 풀었을때 대처법 ADMINPLAY 2013-09-22 5393
48 hddtemp와 mrtg를 이용한 하드디스크 온도 체크 file ADMINPLAY 2013-12-19 5459

Copyright ADMINPLAY corp. All rights reserved.

abcXYZ, 세종대왕,1234

abcXYZ, 세종대왕,1234