[HTML5] 미디어 관련 태그 <embed>,<audio>,<video>

[HTML5] 미디어 관련 태그 <embed>,<audio>,<video>

By i!kohong(아이코홍)

---

<embed> 태그

---

 

태그 설명

---

• 웹 페이지에 사운드, 영상 파일을 삽입하는 태그, 영상파일을 실행시 전체화면이 불가능하다.

 

속성

---

src	사운드 파일(파일의 경로나 URL)을 지정한다.
autostart	사운드 파일을 자동으로 재생할지 여부(true, false)를 지정한다.
hidden	미디어 플레이어를 화면에서 감출지 여부(true, false)를 지정한다.
width	미디어 플레이어가 화면에 보일 경우 너비를 지정한다.
height	미디어 플레이어가 화면에 보일 경우 높이를 지정한다.
loop	사운드 파일을 재생하는 반복 횟수를 지정한다. true이면 무한반복, false면 한번만 재생된다.

---

<audio> 태그

---

 

태그 설명

---

• mp3와 같은 사운드 파일을 재생하기 위한 태그입니다.

 

속성

---

 

속성명	값	기능
src	파일 경로	재생할 사운드 파일의 경로를 지정
autoplay	빈 값, autoplay	페이지가 로드되자마자 사운드 재생여부 결정
controls	빈 값, controls	플레이어 컨트롤 표시 지정
loop	재생횟수(숫자)	사운드를 반복재생 횟수를 지정, 기본값은 1
preload	none, auto, meta	페이지가 열리면 미리 로드해 둠 none - 프리로드를 사용하지 않음 ​a​uto - 페이지가 모드 열리면 비디오를 프리로드 ​meta - 페이지가 모두 열리면 비디오 메타정보만 로드

---

<video> 태그

---

 

태그 설명

---

• avi, mp4와 같은 영상 파일을 재생하기 위한 태그. 영상의 전체화면이 가능하다.

 

속성

---

속성명	값	기능
src	파일 경로	재생할 비디오 경로
autoplay	빈 값, autoplay	페이지가 로드되자마자 영상 재생여부 결정
controls	빈 값, controls	비디오를 제어할 수 있는 컨트롤 패널 사용 결정
preload	none,auto,meta	페이지가 열리면 미리 로드해 둠 none - 프리로드를 사용하지 않음 ​a​uto - 페이지가 모드 열리면 비디오를 프리로드 ​meta - 페이지가 모두 열리면 비디오 메타정보만 로드
poster	이미지 URL	영상 재생전 미리보여줄 이미지 설정
loop	반복횟수(숫자)	영상을 몇 번 반복 재생할 것인지 설정
width	픽셀단위 숫자	플레이어의 너비
height	픽셀단위 숫자	플레이어의 높이

---

[참고] 영상 종류

---

AVI	가장 오래된 동영상 무비 파일중 하나. 윈도우 미디어 플레이어로 기본 재생
RM/RAM	스트리밍이 가능한 동영상 파일. 리얼 플레이어 플로그램을 통해 재생
WMV	스트리밍과 실시간 방송이 가능한 동영상. 윈도우 미디어 플레이어로 기본 재생
MOV	매킨토시 OS의 동영상 무지로 재생. 퀵타임 플러그인이 별도로 설치되어 있어야 재생 가능
MPG/MPEG	매킨토시 OS의 동영상 무지로 재생. 퀵타임 플러그인이 별도로 설치되어 있어야 재생 가능

---

예시

---