HTML5 오디오와 비디오

[31기 정석민]

검수자		문서번호	2016-2
(인)		보존기간	2016.09.19
		보고일자	2016.04.19
		작성자	홍길동
HTML5 오디오와 비디오
20016 년 4월
선문 대학교 컴퓨터공학과 정석민 (성명)

목 차

제 1 장 오디오와 비디오 재생하기

제 1 절 오디오 재생하기

제 2 절 비디오 재생하기

제 2 장 오디오와 비디오 제어하기

제 1 절 재생 제어하기

제 2 절 이벤트 처리

제 1 장 오디오와 비디오 재생하기

제 1 절 오디오 재생하기

웹 페이지에 오디오를 삽입하기 위해서는 audio 요소를 사용한다. 단지 audio 요소만을 사용함으로써 간단하게 오디오 플레이어를 불러 올 수 있다.

익스플로러	파이어 폭스	크롬	사파리	오페라
9.0 이상	3.5 이상	3.0 이상	4.0 이상	10.5 이상

audio 요소를 사용할 때는 src 속성의 값을 지정해야 한다. src 속성의 값으로는 재생할 오디오 파일의 URL이나 파일 경로를 지정한다. audio 요소를 사용할 때는 지원하지 않는 브라우저를 위하여 요소 사이에 출력할 텍스트나 대체 플레이어로 재생할 수 있도록 embed 요소를 넣는 것이 좋다.

1)embed 요소: 외부 어플리케이션이나 인터랙티브 컨텐츠를 웹 페이지에 삽입해준다.

audio 요소는 다양한 속성을 가지고 있다. 위 코드에서도 사용한 control

속성은 플레이어를 출력하는 역할을 한다. 플레이어의 모양은 브라우저마다 각각 다르다.

또 재생과 관련된 페이지 로드 시 자동으로 오디오가 재생하도록 지정하는 autoplay 속성과 반복할 재생횟수를 지정하는 loop 속성이 있다.

속성	설명
src	재생할 파일 경로 지정
autoplay	페이지 로드 시 사운드를 재생할지 여부 지정
controls	플레이어 표시
loop	반복할 재생 횟수
preload	페이지가 열릴 때 오디오의 로드 설정 (none, auto, meta)

preload 속성은 페이지가 열릴 때 오디오의 로드 방식을 지정하는 것으로 none, auto, meta 값을 지정한다. none 값은 자동으로 로드하지 않는 것이며, auto 값은 자동 로드, meta 값은 오디오의 메타 정보만을 로드하는 것을 의미한다.

audio 요소 가운데 control 속성과 autoplay 속성, loop 속성은 값을 따로 지정하지 않아도 같은 동작을 한다. audio 요소를 사용할 때 주의해야할 점은 각 브라우저마다 지원하는 오디오 파일 포맷이 각각 다르다는 점이다.

	익스플로러	파이어폭스	크롬	사파리	오페라
oga, ogg	×	○	○	×	○
wav, wma	○	○	×	○	○
mp3	○	×	○	○	×
AAC	○	×	○	○	×

이때에는 source 요소를 사용하는 것이 효과적이다. source 요소는 audio 요소와 vedio 요소의 자식 요소로써 src 속성의 역할을 대신하는 요소다. src 속성은 하나의 값만 지정할 수 있는 반면, source 속성은 audio 요소 사이에 여러 개 지정할 수 있다. 그러므로 여러 가지 포맷의 오디오 파일을 지정해 놓으면 각 브라우저에서는 차례대로 source요소를 실행하다가 지원하는 포맷의 파일을 만나면 해당 파일을 다운받아 재생한다.

속성	설명
src	재생할 파일 경로 지정
type	재생할 파일의 MIME 타입 지정
media	재생할 파일을 위한 미디어 쿼리 지정

source 요소는 audio 요소와 마찬가지로 src 속성에 값을 지정하여 재생할 파일의 경로를 지정한다. 그리고 type 속성이 있는데 해당 속성을 사용하지 않아도 오디오를 재생하는데 문제는 없지만 사용하는 것을 권장한다. 그 이유는 type 속성의 값으로 MIME 타입을 지정함으로써 브라우저가 재생할 오디오 파일을 다운받기 전에 어떤 형식의 오디오 파일인지 판단할 수 있기 때문이다.

제 2 절 비디오 재생하기

비디오를 삽입하기 위해서는 video 요소를 사용한다. video 요소를 사용하는 방법은 몇 가지 속성이 추가된 것 이외에 audio 요소 사용법과 같다.

익스프로러	파이어폭스	크롬	사파리	오페라
9.0 이상	3.5 이상	4.0 이상	4.0 이상	10.5 이상

source 요소는 audio 요소와 마찬가지로 src 속성에 값을 지정하여 재생할 파일의 경로를 지정한다. 그리고 type 속성이 있는데 해당 속성을 사용하지 않아도 오디오를 재생하는데 문제는 없지만 사용하는 것을 권장한다. 그 이유는 type 속성의 값으로 MIME 타입을 지정함으로써 브라우저가 재생할 오디오 파일을 다운받기 전에 어떤 형식의 오디오 파일인지 판단할 수 있기 때문이다.

video 요소의 속성에는 audio 요소의 속성이 모두 그대로 존재한다. 이에 추가로 출력할 플레이어의 너비 및 높이를 지정하는 width 속성과 height 속성이 존재한다. 도한 비디오가 로드될 때까지 보여줄 이미지를 poster 속성을 사용하여 지정할 수 있다.

속성	설명
src	재생할 파일 경로 지정
autoplay	페이지 로드 시 사운드를 재생할지 여부 결정
controls	플레이어 표시
loop	반복할 재생 횟수
preload	페이지 로드 시 비디오의 로드 설정(none, auto, meta)
width	비디오의 너비 지정
height	비디오의 높이 지정
poster	비디오가 로드되기 전에 보여줄 이미지 지정

비디오 파일은 오디오 파일과 포맷이 다르다. 그러므로 브라우저별로 지원하는 비디오 포맷 역시 다르다.

	익스플로러	파이어폭스	크롬	사파리	오페라
ogg	×	○	○	×	○
mpeg4	○	×	○	○	×
webM	○	×	○	×	○

브라우저별로 지원하는 확장자가 다르기 때문에 비디오를 재생하기 위해서도 여러 개의 source 요소를 사용할 필요가 있다. 오디오와 달리 비디오에서는 코덱이 매우 중요하다. 코덱이란 미디어 파일이 어떤 형식으로 압축되어 있는지를 말한다. 코덱까지 지정해야 브라우저는 포함되어 있는 미디어를 재생할 수 있는지 정확하게 판단할 수 있다.

코덱을 지정하는 방법은 source 요소의 type 속성에 값을 추가하면 된다. 타입 값 뒤에 세미콜론을 붙인 후 codecs = “코덱”이라는 형식으로 지정한다. 그리고 코덱의 값을 지정할 때는 포함되어 있는 코덱을 쉼표로 구분지어 지정한다. 다음으로 이런 속성들을 이용한 예제다.

 

제 2 장 오디오와 비디오 제어하기

제 1 절 재생 제어하기

미디어 파일의 제어를 위해서는 자바스크립트를 사용해야한다. 미디어 파일 제어를 위한 메서드나 속성은 오디오 파일이나 비디오 파일이나 사용 방법이 모두 동일하다. 미디어 파일의 제어와 관련된 메서드는 다음과 같다.

속성	설명
load()	미디어 파일을 로드함
play()	미디어 파일을 재생함
pause()	미디어 파일을 일시 정지함

미디어 파일 제어를 위한 메서드를 사용하는 방법은 간단하다. 생성한 audio 요소나 video요소에 대한 객체를 생성하고 생성한 객체에 따라 메서드를 사용하면 된다.

미디어 파일의 제어와 관련된 API는 재생과 관련된 메서드뿐만 아니라 다양한 속성들을 지원한다. 지원하는 속성들을 사용하여 현재 재생중인 미디어의 상태를 알 수 있으며, 속성에 값을 지정하여 미디어의 제어도 가능하다. 미디어 파일 제어와 관련된 속성은 다음과 같다.

속성	설명
src	미디어 파일 경로 지정
currentSrc	재생 중인 미디어 파일의 URL
currentTime	현재 재생 위치를 초 단위로 반환함
duration	미디어 파일의 총 재생시간을 초 단위로 반환함
paused	일시 정지 상태인지의 여부 반환
defaultPlaybackRate	기본 재생 속도 지정
playbackRaGe	재생 속도 지정
ended	재생이 종료되어 있는 상태인지 여부 반환
autoplay	미디어 파일을 자동 재생되도록 지정
loop	반복 재생되도록 지정
control	플레이어의 출력 여부 지정
volume	볼륨 값을 지정하거나 상태 반환
muted	음소거 상태 반환
error	에러 정보 반환
networkState	네트워크 접속 상태를 나타냄
readState	미디어 파일의 다운로드 상태를 나타냄

다음은 미디어 재생 및 일시 정지를 할 수 있는 버튼과 미디어 화면 크기를 조절할 수 있는 버튼을 만들어 제어할 수 있는 프로그램이다.

제 2 절 이벤트 처리하기

미디어 파일을 삽입하여 로드하거나 재생을 하는 데는 여러 가지 이벤트가 발생을 한다. 이벤트의 발생에 따라 적절하게 처리를 한다면 더욱 다양하고 편리한 미디어 제어가 가능하다. 미디어와 관련된 주요 이벤트는 다음과 같다.

이벤트	설명
play	미디어 파일을 재생할 때 발생
timeupdate	재생 중에 지속적으로 발생
waiting	다음 프레임의 다운로드를 대기함
ended	재생 종료
progress	미디어 파일을 로드할 때 지속적으로 발생
loadstart	미디어 파일 로드 시작시 발생
load	데이터 다운로드가 완료될 때 발생
error	미디어 파일을 재생하거나 로드할 때 에러가 있을 경우 발생
networkState	네트워크 접속 상태를 나타냄
readState	미디어 파일의 다운로드 상태를 나타냄

이벤트는 addEventListener() 메서드를 사용하여 등록한다. 그리고 addEvent Listener() 메서드 내부에 함수를 정의하여 발생하는 이벤트에 따라 실행할 내용을 정의한다. 다음은 이벤트를 등록하여 재생 상태에 따라 재생 시간을 출력하고 재생이 끝나면 알림창을 띄우는 동작을 하는 프로그램이다. 프로그램 예제 출력 결과를 확인해 보자.

참 고 문 헌

-처음 시작하는 HTML5 & CSS3 – 김석수 저, 2012

HTML5 기술문서.hwp