HTML & CSS #11 : 멀티미디어

HTML5부터는 웹 브라우저에서 직접 멀티미디어를 재생시킬 수 있다.

 

<object>, <embed> - 외부 파일 삽입

웹 브라우저에서 직접 재생할 수 없는 pdf, 플래시 무비 등 삽입하는 태그

<object data="경로" type="유형" name="이름" width="너비" height="높이">

 

<audio> 태그

오디오 재생

mp3 파일로 대부분 사용

<audio src="경로">

width, height : 크기 조절

autoplay : 오디오 자동 재생 (크롬, 모바일 제외)

controls : 컨트롤 막대 표시

loop : 반복 재생

muted : 소리 끄기

preload : 재생 전 파일 다운로드하여 준비시킴 (none : 재생눌러야 다운로드, metadata : 메타 정보만 다운로드, auto : 웹 문서를 로드할 때 미디어 파일도 모두 다운로드. 기본값은 auto)

poster : 포스터 이미지(재생 불가능 시 대신 표시하는 이미지) 속성값은 "경로"

 

<video> 태그

웹 문서에 비디오 파일 삽입

<video src="경로">

width, height : 크기 조절

autoplay : 오디오 자동 재생 (크롬, 모바일 제외)

controls : 컨트롤 막대 표시

loop : 반복 재생

muted : 소리 끄기

preload : 재생 전 파일 다운로드하여 준비시킴 (none : 재생눌러야 다운로드, metadata : 메타 정보만 다운로드, auto : 웹 문서를 로드할 때 미디어 파일도 모두 다운로드. 기본값은 auto)

poster : 포스터 이미지(재생 불가능 시 대신 표시하는 이미지) 속성값은 "경로"

 

<source> 태그

여러 코덱의 파일을 함께 지정하는 것. (모두 재생할 수 있도록)

 

<track> 태그

비디오에 외부 자막 파일을 연결하는 태그

.vtt 파일

srclang 지정

 

 

 

 

 

 

 

 

 

 

 

출처 : Do it! HTML5 + CSS3 웹 표준의 정석 (고경희)

사진 출처 : Pixabay