HTML5 5번째 - 멀티미디어

plug-in : 웹 브라우저에서 처리할 수 없는 작업을 위해 웹 문서 안에 포함시킨 외부 프로그램 기능

<object>,<embed> 태그로 plug-in 사용, HTML5에서도 플러그인을 포함시킬 수 있으나 자체 지원 기능 있음

 

<object> 태그 - 외부 파일 삽입하기

 .자바 애플릿, pdf 파일, 플래시무비같은 컨텐츠를 웹 문서 안에 포함시키기 위해 사용

 .다른 HTML 문서도 웹 문서에 포함시킬 수 있음

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

 .data 속성 : 외부 파일 경로 지정

 .type 속성 : 내용의 유형 지정

 

<embed> 태그 - 외부 파일 삽입하기

 .<embed src="경로" type="유형" width="너비" height="높이">

 .닫는 태그 없으며, <object> 태그를 지원하지 않는 이전 브라우저에서 사용

 

멀티미디어의 웹 표준화

 

웹에서 지원되는 비디오/오디오 파일 종류

종류	확장자	설명
비디오	mp4	고화질 영상 지원, 많은 사이트에서 사용, 라이센스있어 웹 용 제외 유료
	webm	화질 우수, 무료 제공
	ogv	화질 떨어짐, 무료, webm 전 많이 사용
오디오	mp3	대부분의 음원 사용, 라이센스 유료
	ogg	무료이므로 게임에서 많이 사용

 

인코딩(encoding) : 원본 비디오를 압축해 컴퓨터용 비디오 파일로 변환

디코딩(decoding) : 비디오 파일의 정보를 가져와 플레이어에 보여 주는 과정 

이 두가지를 수행하는 것이 비디오 코덱

 

HTML에서 3가지 비디오 코덱 함께 사용

1) H.264/AVC : mp4 파일에서 사용, 유료 코덱이나 웹 용 무료 

2) V8,V9 : 구글에서 오픈 소스 코덱, webm 파일에서 사용, 하드웨어 지원이 부족하지만 무료

3) 오그 테오라(Ogg Theora) : 무료 공개 코덱으로 ogv 파일에서 사용,  모바일 사용 불가

 

HTML5와 오디오 코덱

1)MPEG-1AUDIO Layer3 - MP3 코덱

2)Ogg Vorbis - 오픈 소스, 무료, .ogg나 .oga 사용, 게임에서 많이 사용

 

<audio> 태그 - 오디오 파일 삽입

 .mp3 파일을 주로 사용

 .<audio src="경로값" [속성][속성="속성 값"]></audio>

 .width, height 속성 - 크기 조절

 .autoplay 속성 : 자동속성

 .controls 속성 : 컨트롤 막대 표시, 재생/멈춤, 진행 바, 볼륨 등 표시

 .loop 속성 : 오디오 반복 재생

 .muted 속성 : 무음 모드

 .preload 속성 : 재생 버튼 누리기 전에 파일을 다운로드해 준비

  ..none : 재생 버튼 누르면 다운

  ..metadata : 메타 정보만 다운로드

  ..auto : 웹 문서 로드할 때 미디어 파일 다운로드

 .poster 속성 - 문제 상황 표시, 비디오 재생 할 수 없는 경우 화면 자리에 대신 표시하는 이미지 '포스터 이미지'

 

<video> 태그 - 비디오 파일 삽입

 .<video src="경로 값" 속성="속성 값" ></video>

 .<audio> 태그와 속성 유사

 

<source> 태그 - 여러 미디어 파일 한꺼번에 지정

 .브라우저마다 지원하는 코덱이 달라 한 가지 파일만 사용한 경우 일부 브라우저에서 사용 불가

 .최신 브라우저 및 이전 부라우저 모두 재생할 수 있도록 ogv 파일도 함께 지정, webm 파일도 함께 사용

 .<source src="video.ogv" type="video/ogg; codecs='theora,vorbis'">

 .src 속성 : 미디어 파일의 경로 지정, 필수 속성

 .type 속성 : 미디어 파일의 유형을 브라우저에 알려줌

 .codecs 속성 :  비디오 코덱 지정

 .ogv, webm 파일을 웹 서버에서 확장자 인식할 수 있도록 MIME 유형을 추가, 설정해달라고 웹 서버 관리자에게 요청

   ..video/webm .webm

.<video controls>

  <source src="media/painting.mp4" type="video/mp4">

  이 영상을 보기 위해선 HTML5 지원 브라우저 필요

</video> 

  ..태그 안에 <source> 나 텍스트 중 하나가 실행되면 나머지는 실행되지 않음

  ..플래시 무비로 변환한 후 <embed> 태그나 <object> 태그 사용하여 플러그인 삽입

 

<track> 태그 - 비디오 화면에 자막 추가하기

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

 .kind 속성 : 자막 종류 지정

  ..subtitles : 자막, 화면에 표시

  ..captions : 청각장애인용 자막, 화면에 표시

  ..descriptions : 콘텐츠에 대한 설명

  ..chapters : 비디오 탐색을 위한 장 제목

  ..metadata : 비디오 콘텐츠 정보

 .srclang 속성 : kind 속성이 subtitle이면 반드시 지정, en, ko 와 같은 약자로 표기

 .label 속성 : 자막이 여러 개일 경우, 식별할 수 있는 제목

 .default 속성 : 자막이 여러 개인 경우, 기본으로 사용할 자막 지정

 .WebVTT 자막 파일

  ..smi 파일은 자막 내용만 들어있음, srt파일은 자막+시간 정보

  ..HTML5에서 srt파일 지원하지만 공식지원 형식은 WebVTT(.vtt)

  ..텍스트 편집기에 입력 후 .vtt파일로 저장해 사용

 

<video autoplay>

  <source src="media/painting.ogv" type="video/ogg">

  <track src="media/painting.vtt srclang="ko" label="korean" default>

</video>

 

비디오 캡션 메이커 

https://testdrive-archive.azurewebsites.net/Graphics/CaptionMaker