이미지/동영상/음악 등 멀티미디어 태그

1. 이미지 img tag

• src : 이미지 파일경로
• alt : 이미지 파일이 없을 경우 표시되는 문장
• width : 이미지의 너비 (CSS에서 지정하는 것이 일반적)
• height : 이미지의 높이 (CSS에서 지정하는 것이 일반적) 

<img src="my/images/mark.jpg" alt="mark" width="100">
<img src="my/images/hao.gif" alt="이미지가 없다.">

 

2. 미디어

2.1 audio : HTML5 에 새롭게 추가된 태그로 IE8 이하에서 사용 불가.

• src : 음악 파일 경로
• preload : 재생 전에 음악 파일을 모두 불러올 것인지 지정
• autoplay : 음악 파일을 자동의 재생 개시할 것인지 지정
• loop : 음악을 반복할 것인지 지정
• controls : 음악 재생 도구를 표시할 것인지 지정. 

<audio src="my/audio/Kalimba.mp3" controls></audio>

웹 브라우저 별로 지원하는 음악 파일 형식이 다름.

Crome의경우 mp3,wav,ogg 모두 가능.

IE의 경우 mp3만 가능.

source 태그를 사용하여 파일 형식의 차이문제를 해결 할 수 있다.

<source src="my/audio/Kalimba.mp3" type="audio/mpeg">

 

2.2 비디오 : HTML5 에 새롭게 추가된 태그로 IE8 이하에서 사용 불가.

• src : 동영상 파일 경로
• poster : 동영상 준비 중에 표시될 이미지 파일 경로
• preload :  재생 전에 동영상 파일을 모두 불러올 것인지 지정
• autoplay : 동영상 파일을 자동의 재생 개시할 것인지 지정
• loop : 동영상을 반복할 것인지 지정
• controls : 동영상 재생 도구를 표시할 것인지 지정. 
• width : 동영상의 너비를 지정
• height : 동영상의 높이를 지정

웹 브라우저 별로 지원하는 음악 파일 형식이 다름.

Crome의경우 mp4, webM ,Ogv 모두 가능.

IE의 경우 mp4만 가능.

source 태그를 사용하여 파일 형식의 차이문제를 해결 할 수 있다.

<source src="my/video/wildlife.mp4" type="video/mp4">