HTML5와 멀티미디어

웹과 멀티미디어

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

data : 경로, type : 유형, name, width, heigth

embed 태그 - 외부 파일 삽입하기(주로 object 태그를 지원하지 않는 이전 브라우저)

src : 경로, type, width, height

 

비디오 : mp4, webm, ogv

오디오 : mp3, ogg

 

인코딩 : 원본 비디오를 압축해 컴퓨텅서 사용할 수 있는 비디오 파일로 변환

디코딩 : 비디오 정보를 가져와 비디오 플레이어에 보여 주는 과정

 

HTML5에서는 플러그인 프로그램 없이 브라우저에서 직접 재생할 수 있는 비디오 코덱만 허용. 3가지

1. H.264/AVC : mp4, 고화질 지원, 멀티미디어 업계 표준, 유료지만 온라인상에서는 무료

2. v8, v9 : webm, 하드웨어 지원이 부족, 화질 우수, 무료

3. 오그 테오라 : H.264에 대응해 등장한 무료 공개 코댁, ovg, 화질 떨어짐, 무료(모바일 불가)

 

오디오 코덱

1. MPEG-1 AUDIO Layer3 : MP3 코덱이라고 불림, 가장 유명

2. Ogg Vorbis : 오픈 소스, 무료, 확장자 .ogg, .oga, 재생할 수 있는 플레이어 적어, 인코딩 시간 길어, PC게임에 사용

https://software.naver.com/software/softwareList.nhn?categoryId=C0400000

동영상 변환, 동영상

오디오 & 비디오 재생하기

audio 태그 - 오디오 파일 삽입하기 src : 경로

autoplay(자동 재생), controls(컨트롤 막대), loop(반복 재생), muted(재생, 소리x),

preload(재생전에 미리 다운)(none, metadata : 메타 정보만 다운로드, auto : 모두 다운), poster(문제 상황 표시)(이미지 넣어 안된다고)

(크롬은 자동 재생x, 동영상은 자동 재생(muted일때만)

 

video 태그 - 비디오 파일 삽입하기 src : 경로

 

source 태그 - 여러 미디어 파일 한꺼번에 지정하기 src : 경로, type : 미디어 파일의 유형, codecs : 비디오 코덱

이전 브라우저에서 재생되지 않을 경우 생각 

	<video controls>
		<source src="media/Painting.mp4" type="video/mp4">
		<source src="media/Painting.webm" type="video/webm">
	</video>

이렇게 해도 웹 서버에 업로드 한 후 재생되지 않는 경우. 이건 이전에 없던 비디오 파일 형식이어서 웹 서버에서 확장자를 인식하지 못했기 때문. MIME유형 추가 해야돼

video는 HTML5를 지원하는 브라우저에서만 사용 가능. 이전 브라우저는 플래시 무비로 변환후 embed나 object 태그로

또는 텍스트로 HTML5를 지원하는 브라우저가 필요하다고 쓰기

 

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

kind : 자막의 종류

src : 경로

srclang : 언어(kind가 subtitle이라면 반드시 지정)

label : 자막이 여러 개일 경우, 자막을 식별할 수 있도록 제목을 달아 준다.

default : 자막 파일이 여러 개일 경우, 기본으로 사용할 자막을 default로 지정할 수 있다.

 

WebVTT 자막 파일

HTML5에서는 .vtt파일

	<video controls>
		<source src="media/Painting.mp4" type="video/mp4">
		<source src="media/Painting.webm" type="video/webm">
		<track src="media/Painting.vtt" srclang="ko" label="Korean" default>
	</video>

WEBVTT

00:00.000 --> 00:02.172
예술이란

00:02.172 --> 00:05.719
자연이 인간에 투영된 것입니다

00:05.719 --> 00:07.716
중요한 것은

00:07.716 --> 00:11.061
깨끗하게 투영될 수 있도록

00:11.061 --> 00:20.879
늘 깨끗하게 거울을 닦는 일입니다