[HTML]미디어 태그 <img>, <audio>, <video>

 

멀티미디어 데이터를 웹 문서에 포함할 때

사용하는 태그 <img>, <audio>, <video>

<embed> 태그도 사용했으나 사진은 <img>, 오디오는 <audio>, 비디오는 <video>, HTML은 <iframe> 사용을 권장한다.

 

1. 이미지 태그 <img>

<img src="파일 경로" alt="대체 텍스트" title="마우스오버 시 설명">
<figcaption>그림 제목</figcaption>
<!--figcaption 위치에 따라 제목 위치 이동. 위쪽/아래쪽-->

-이미지 파일 확장자 : .gif, .jpg, .png

-HTML 문서에 이미지 삽입하는 게 아니라 링크 참조. 참조된 이미지를 위한 공간 생성하는 것.

-<img> 태그 속성

 src : 이미지 파일이 저장된 경로

 alt : 이미지 없을 때 나오는 글자

 title : 마우스 포인터를 그림에 올렸을때 뜨는 설명 텍스트

 width, height : 너비, 높이를 픽셀 단위 지정. 지정하지 않으면 원본 크기 출력.

 HTML5에서 지원하지 않는 속성은 CSS에서 지정할 것을 권장.

 └align, border, hspace, vspace 등

 

 

2. 오디오 태그 <audio>

<audio src="파일 경로" controls loop autoplay> AUDIO </audio>

-오디오 파일 확장자 : .mp3, .ogg, .wav

-<audio> 태그 속성

 src : 오디오 파일이 저장된 경로

 controls : 재생 도구 출력

 loop : 반복 재생

 autoplay : 자동 재생

 muted : 음소거

 preload : 오디오 파일 사용 여부와 상관없이 미리 불러옴.

 width, height : 너비, 높이

 

-여러 형식의 오디오 파일을 동시에 제공

 웹 브라우저마다 지원, 미지원 확장자가 다르기 때문에 다양한 확장자의 파일을 준비.

<audio controls>
    <source src="audio_file.mp3" type="audio/mpeg">
    <source src="audio_file.ogg" type="audio/ogg">
    <source src="audio_file.wav" type="audio/wav">
    오디오 파일을 재생할 수 없습니다. <!--대체 텍스트. 전부 재생할 수 없을 때-->
</audio>

※ 오디오 포맷별 MIME 타입

-MIME : 인터넷 전자메일에서 사용되는 문자 데이터를 표현하기 위한 형식 표준

-MP3(audio/mp3), OGG(audio/ogg), WAV(audio/wav)

 

※ 브라우저별 오디오 파일 지원 현황

Browser	Internet Explorer	Chrome	Firefox	Safari	Opera
mp3	o	o	o	o	o
ogg	x	o	o	x	o
wav	x	o	o	o	o

 

 

3. 비디오 태그 <video>

<video src="파일 경로" poster="url" controls loop autoplay> VIDEO </video>

-비디오 파일 확장자 : .mp4, .WebM, .Ogg

-<video> 태그 속성

 src : 비디오 파일 저장된 경로

 controls : 재생 도구 출력

 width, height : 너비, 높이 

 loop : 반복 재생 

 autoplay : 자동 재생

 muted : 음소거

 preload : 비디오 파일 사용 여부와 상관없이 미리 불러옴.

 poster : 비디오 파일이 재생되기 전이나 다운로드되지 않고 있는 경우 표 시될 이미지의 URL을 표시

 

-여러 형식의 비디오 파일을 동시에 제공

 웹 브라우저마다 지원, 미지원 확장자가 다르기 때문에 다양한 확장자의 파일을 준비.

<video controls>
    <source src="video_file.mp3" type="video/mpeg">
    <source src="video_file.ogg" type="video/ogg">
    <source src="video_file.webm" type="video/webm">
    비디오 파일을 재생할 수 없습니다. <!--대체 텍스트. 전부 재생할 수 없을 때-->
</video>

 

※ 오디오 포맷별 MIME 타입

-MP4(video/mp4), WebM(video/webm), Ogg(video/ogg)

 

※ 브라우저별 비디오 파일 지원 현황

Browser	Internet Explorer	Chrome	Firefox	Safari	Opera
MP4	o	o	o(From 21/30)	o	o(From 25)
WebM	x	o	o	x	o
Ogg	x	o	o	x	o

 

 

4. 개체 삽입 태그 <embed>, <object>

<img>, <audio>, <video> 태그로 지원하지 않는 파일을

웹 문서에 포함하기 위해 사용.

 

지금은 잘 안 씀. 플래시 쓸 때 썼음.

써야한다면 <object>보다 <embed>

<embed src="파일 경로" width="너비" height="높이">