[HTML] Media

 

 

 

웹 페이지 내부에서 이미지, 음악, 비디오 등 다양한 미디어를 표현할 수 있다.

 

 

1. Video

 

 

여러 format이 있지만 HTML 에서는 MP4, WebM, Ogg 형식만 지원한다.

 

 

 

 

controls 속성으로 재생 / 정지 등 실행을 제어할 수 있는 장치를 해당 비디오에 추가한다.

 

브라우저가 첫 번째 source를 재생하지 못하면 다음 source를 재생하는 방식으로 동작한다.

태그 기반으로 동작하기 때문에 자바스크립트의 DOM을 사용해 비디오를 다룰 수 있다.

 

video 태그에 여러 속성을 추가 할 수 있다.

 

autoplay : 브라우저가 로딩됐을 떄 자동으로 재생하도록 설정한다.

mute : 음소거 상태로 재생한다.

track : 속성은 아니다. source 밑에 추가해 비디오의 자막을 설정한다.

 

 

 

2. Audio

 

 

 

 

video 태그와 유사하다.

 

HTML은 MP3, WAV, Ogg 형식을 지원한다.

 

 

 

3. Plugin

 

 

요즘은 거의 사용하지 않지만, 예전에 만들어진 웹 페이지에서는 여전히 사용하는 경우가 있다.

 

 

 

 

 

 

 

object와 embed 태그를 사용해 웹 페이지 내부에 이미지나 다른 파일들을 불러올 수 있다.

 

 

 

4. iframe

 

 

웹 페이지 내부에 다른 웹 페이지를 로드 할 때 사용한다.

유튜브 영상을 웹 페이지 내부에 로드 할 수 있다.

 

 

 

 

 

설정한 iframe 내부에 src 부분이 보여진다.

주소 뒤에 autoplay / mute / control 등 속성을 추가해 자동재생 / 음소거 등 여러 기능을 추가할 수 있다.