멀티미디어 (이미지/

멀티미디어 첨부

---

멀티미디어 요소들은 문장으로 인식된다.

★이미지

<img src="파일경로" [width="가로넓이px"] [height="세로넓이px"] [alt="이미지 설명"]/>

- width나 height중 하나만 부여할 경우 나머지 값은 비율에 따라 자동 변경

사운드

<audio src="파일경로" [controls] [loop] [autoplay] >
    HTML5를 지원하지 않는 브라우저에서 표시할 
</audio>

비디오

<video src="파일경로" [controls] [loop] [autoplay] [preload] 
[poster="미리보기이미지경로"] [width="넓이"] [height="높이"]>
    HTML5를 지원하지 않는 브라우저에서 표시할 내용 
</video>

- src속성 대신 <video>~</video> 사이에 <source>태그 형식으로 브라우저 별로 영상 파일을 개별 지정 가능.

   --일반적인 경우 mp4형식의 영상 파일 하나면 대부분 재생 가능.

 

src	파일의 경로를 지정하는 속성. 브라우저마다 코덱 이슈 있음.
controls	각 브라우저 고유의 컨트롤바를 표시함
loop	재생이 끝나고 나면 처음부터 다시 반복하여 재생함
autoplay	자동으로 재생 시작
preload	동영상이 백그라운드에서 다운로드 된다.
width, height	동영상의 크기 지정
poster	동영상 재생전 보여질 미리보기 이미지

모든 브라우저를 고려한 Video 태그 사용법

<video src="파일경로" [controls] [loop] [autoplay] [preload] 
[poster="미리보기이미지경로"] [width="넓이"] [height="높이"]>
    <!-- 크롬, 사파리, IE9이상, IOS, 안드로이드 -->
    <source src="*.mp4 파일의 경로" type="video/mp4"></source>
    <!-- 파이어폭스, 오페라, 크롬 -->
    <source src="*.webm 파일의 경로" type="video/webm"></source>    
    <!-- 파이어폭스 이전 버전과 오페라 -->
    <source src="*.ogg 파일의 경로" type="video/ogg"></source>
</video>