[개미의 걸음 HTML&CSS 11차시] 멀티미디어를 위한 태그

HTML5에서의 멀티미디어

HTML5에서는 엡 브라우저 안에서 멀티미디어를 직접 재생 가능

• HTML4까지는 웹 브라우저에 멀티미디어 파일을 삽입하기 위해서는 별도의 프로그램이 필요
  [플러그인 프로그램을 사용해야지만 웹 브라우저에서 멀티미디어 재생 가능]
• 대부분의 웹사이트들이 점점 플래시 플레이어 지원을 중단해나가고 있는 추세
  크롬 브라우저는 2020년말까지 플래시 플래이어 지원을 완전히 중단할 예정] 
• <video>태그의 경우, HTML5에서만 지원하므로 이전 브라우저에서 비디오 삽입시
  <embed>태그나 <object>태그를 사용해 플러그인으로 삽입

 

플러그인을 통한 삽입 [<object> 태그와 <embed> 태그]

<embed src="경로" type="유형" width="너비" heigh="높이">
<object data="경로" type="유형" [name="이름" width="너비" height="높이"></object>

태    그	설    명
<embed>	웹 문서 안에서 처리할 수 없는 외부 파일을 삽입하기 위해 사용하는 태그 닫는 태그가 없으며 주로 <object>태그를 지원하지 않는 이전 브라우저에서 사용됨
<object>	웹 문서 안에서 처리할 수 없는 외부 파일을 삽입하기 위해 사용하는 태그
<object> 속성	설    명
data	외부 파일의 경로를 지정할 때 사용하는 속성
type	포함시킨 내용의 유형을 지정할 때 사용하는 속성
name	다른 요소들과 구분할 수 있는 이름을 지정할 때 사용하는 속성
width	포함시킨 내용의 너비 값을 지정할 때 사용하는 속성
height	포함시킨 내용의 높이 값을 지정할 때 사용하는 속성

 

 

 

플러그인을 사용하지 않아도 되는 확장자

비디오	mp4	고화질 영상을 지원해 대부분의 사이트에서 사용됨 라이선스가 있지만 웹에서 사용할 경우 무료 이용 가능
	webm	화질이 우수하고 무료 이용 가능 최근 사용이 증가하고 있는 추세
	ogv	화질이 다른 비디오 유형보다 떨어짐 무료 이용이 가능해 webm 형식이 등장하기 전에는 많이 사용됨
오디오	mp3	대부분의 음원에서 사용됨 라이선스 때문에 유료로 사용해야됨
	ogg	무료이므로 게임 등에서 많이 사용됨

#  코덱[Codec]

코더[Coder]와 디코더[Decoder]의 머리글자를 모아 만든 합성어

인코딩[Encoding]	원본 비디오를 최대한 압축해 컴퓨터에서 사용가능한 비디오 파일로 변환하는 과정
디코딩[Decoding]	비디오 파일에 저장되어 있는 비디오 정보를 가져와 비디오 플레이어에 보여주는 과정

# 비디오 코덱과 오디오 코덱의 종류

H.264/AVC	mp4파일에 사용하는 유료 비디오 코덱 고화질 영상을 지원하므로 멀티미디어 업계에서 표준으로 사용되고 있음 온라인상에서 사용할 경우에 한해 무료 제공
v8, v9	webm파일에 사용하는 구글에서 오픈 소스로 공개한 비디오 코덱 H.264보다 하드웨어 지원이 부족하다는 단점이 있음 화질이 우수하고 무료
오그 테오라[Ogg Theora]	ovg파일에서 사용하는 오픈소스로 공개한 비디오 코덱 H.264에  대응해 제작되었으며 모바일 브라우저에서는 사용할 수 없음 화질은 다른 코덱보다 떨어지지만 무료
MPEG-1 AUDIO Layer3	mp3파일에서 사용하며 MP3코덱으로 불리는 대표적인 오디오 코덱
Ogg Vorbis	.ogg나 .oga 확장자를 사용한느 오픈소스 오디오 코덱 재생할 수 있는 플레이어가 적고 인코딩 시간이 더 걸린다는 단점 무료라서 PC게임 등에서 많이 사용됨

 

 

 

<audio> 태그

<audio src="오디오 파일경로" 속성 속성="속성값"></audio>

오디오 파일을 삽입하기 위한 태그

속    성	설    명
width, height	비디오의 너비와 높이를 설정하는 속성
controls	오디어 재생 도구를 보여줄지 설정하는 속성 재생 도구에는 재생/멈춤, 진행 바, 볼륨 등이 표시됨
autoplay	오디오를 자동 재생할 때 사용하는 속성 단, 모바일 기기에서는 자동 재생되지 않음 크롬 브라우저에서도 무분별한 광고 등을 막기 위해 자동 재생되지 않음
loop	오디오를 반복 재생하도록 설정하는 속성
muted	오디오를 소리없이 재생하도록 설정하는 속성
preload	오디오를 재생하기 전에 오디오 파일을 모두 다운로드할 것인지 설정하는 속성
poster	오디오 파일이 로딩될 때 보여줄 이미지 파일을 설정하는 속성 브라우저, 인터넷 연결 등에 문제가 생겼을 때 비디오 화면 자리에 대신 표시하는 이미지

 

 

<video> 태그

<video src="비디오 파일경로" 속성 속성="속성값"></video>

비디오 파일을 삽입하기 위한 태그

속    성	설    명
width, height	비디오의 너비와 높이를 설정하는 속성
controls	비디오 재생 도구를 보여줄지 설정하는 속성 재생 도구에는 재생/멈춤, 진행 바, 볼륨 등이 표시됨
autoplay	비디오를 자동 재생할 때 사용하는 속성 단, 모바일 기기에서는 자동 재생되지 않음 크롬 브라우저에서도 무분별한 광고 등을 막기 위해 자동 재생되지 않음
loop	비디오를 반복 재생하도록 설정하는 속성
preload	비디오를 재생하기 전에 비디오 파일을 모두 다운로드할 것인지 설정하는 속성
poster	동영상 파일이 로딩될 때 보여줄 이미지 파일을 설정하는 속성 브라우저, 인터넷 연결 등에 문제가 생겼을 때 비디오 화면 자리에 대신 표시하는 이미지

 

 

 

<source>태그

<source src="미디어 파일 경로" type="미디어 파일의 유형" codecs="비디오 코덱 지정">

여러 미디어 파일을 한꺼번에 지정할 때 사용하는 태그

• 모든 브라우저에서 재생가능하도록 ogv 파일을 지정해줌
• 최근에는 무료 코덱이면서 화질도 우수한 webm파일도 함께 지정

속    성	설    명
src	미디어 파일의 경로를 설정하는 필수 속성 파일 경로를 지정할 때 경로에 공백이 있으면 안됨
type	웹 브라우저가 해당 미디어 파일을 재생할 수 있는지 여부를 확인할 수 있도록 미디어 파일의 유형을 알려주는 속성
codecs	비디오 코덱을 설정하는 속성

 

 

 

<track> 태그

<track kind="자막종류" src="경로" srclang="언어" label="제목" default>

비디오 파일에 자막을 넣을 때 사용하는 태그

속    성	설    명
kind	자막의 종류를 설정하는 속성 생략할 경우, subtitles로 간주
src	자막 텍스트의 파일 경로를 설정하는 속성 주로 smi나 srt 자막 파일을 사용
srclang	사용한 언어를 지정하는 속성 kind 속성 값이 subtitles일 경우 반드시 지정해야 하는 속성
label	자막이 여러 개일 경우, 자막을 식별할 수 있도록 제목을 설정하는 속성
default	자막 파일이 여러 개일 경우 사용할 자막을 설정하는 속성 기본으로 사용할 자막을 default로 지정 가능

# smi 자막파일과 srt 자막파일

smi 자막파일	자막 내용만 들어가 있음
srt 자막파일	자막 내용과 시간 정보[자막의 시작 시간과 종료 시간 등]가 함께 들어가 있음

# WebVTT 자막파일

모든 브라우저에서 공식적으로 지원하는 자막 파일 형식

• 파일 확장자는 .vtt
• 자막 내용과 시간 정보가 함께 들어가 있음
• 자막 내용은 한 줄이상 입력 가능
• 하나의 자막이 끝나면 빈줄을 넣어 자막이 끝났음을 알려준 다음 다음 자막 입력