[HTML5 & CSS3] 오디오 & 비디오 재생하기

▶ 오디오 & 비디오 재생하기

 

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

HTML5에서 배경 음악이나 효과음 등 오디오를 삽입할 때는 <audio> 태그를 사용한다.

​

기본형)

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

속성	설명
autoplay	오디오를 자동 재생한다.
controls	웹 화면에 컨트롤 막대를 표시한다. 컨트롤 막대에는 재생/멈춤, 진행 바, 볼륨 등이 표시된다.
loop	오디오를 반복 재생한다.
muted	오디오를 재생해 진행하지만 소리는 끈다.
preload	재생 버튼을 눌러 재생하기 전에 오디오 파일을 다운로드해 준비해 둔다.

​

​

​

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

​

기본형)

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

 

컨트롤 막대가 있는 비디오 삽입하기

 

​

​

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

사용자들의 브라우저 환경을 모두 고려한다면 최신 브라우저와 이전 브라우저에서 모두 재생할 수 있도록 ogv 파일 도 함께 지정해 주어야 한다. 최근에는 무료 코덱을 사용하면서 화질도 뛰어난 webm 파일까지 함께 사용한다. 이렇게 여러 형식의 비디오 파일을 함께 사용하려면 <video> 태그와 <source> 태그를 함께 사용해 여러 개의 파일을 지정해야 한다.

<source> 태그에는 미디어 파일의 경로를 지정하는 src 속성과 미디어 파일의 형식을 알려주는 type 속성을 사용한다. 간단히 type 속성만 사용할 수도 있고 codecs 속성을 이용해 코덱까지 함께 표시할 수도 있다.

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

​

여러 형식의 비디오 파일 함께 삽입하기 ​

 

 

​

*이전 브라우저에서는 어떻게 해야 할까?

<video> 태그를 지원하지 않는 이전 브라우저를 고려해 다음과 같이 HTML5 지원 브라우저가 필요하다는 대체 텍스트를 표시할 수 있다.

​

​

​

*<audio> 태그와 <video> 태그의 속성

​

-mp4 파일 하나만 사용할때

<video src="media/Painting.mp4" width="400" height="250" controls></video>

 

​-여러 형식의 파일을 사용할 때

<video width="400" height="250" controls> <source src=media/Painting.mp4" type="video/mp4"> <source src=media/Painting.webm" type="video/webm"> <source src=media/Painting.ogv" type="video/ogg">

 

①width, height 속성 - 비디오 크기 조절

②controls 속성 - 컨트롤 막대 표시

③preload 속성 - 파일 다운로드 여부

속성 값	설명
none	미디어 파일을 미리 다운로드하지 않고 사용자가 재생 버튼을 눌러야만 다운로드하기 시작한다.
metadata	미디어 파일을 즉시 사용하지 않을 것이라고 생각해 미디어 파일 전체를 다운로드하지 않고 메타 정보만 다운로드한다.
auto	사용자가 즉시 이용할 수 있도록 웹 문서를 로드할 때 미디어 파일도 모두 다운로드한다. 다만, 다운로드가 끝나도 사용자가 재생 버튼을 눌러야만 재생된다. 속성 값을 지정하지 않고 preload라고만 설정하면 auto 값을 기본으로 한다.

④muted 속성 - 소리는 끄고 화면만 재생

⑤autoplay 속성 - 자동 재생(다운로드하자마자 재생)

속성을 사용하더라도 모바일 기기에선 자동 재생 안됨.

HTML5에선 가능하면 자동 재생을 사용하지 않길 권장한다.

⑥loop 속성 - 반복 재생(파일 재생이 끝나면 다시 처음으로 되돌아가 반복 재생)

⑦poster 속성 - 문제 상황 표시

브라우저 문제나 인터넷 연결 문제 등 비디오를 재생할 수 없을 경우, 비디오 화면 자리에 대신 표시하는 이미지를 '포스터 이미지'라고 부른다.

​

​

​​

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

​

기본형)

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

 

-<track> 태그의 속성

​

①kind 속성

자막의 종류를 지정한다. 사용할 수 있는 값은 다음과 같다.

속성 값	설명
subtitles	소리를 켤 수 있지만 이해할 수 없는 경우, 다른 언어로 번역한 자막일 경우에 사용하며 비디오 화면에 표시된다.
captions	청각장애인용 자막이거나 소리를 들을 수 없거나 켤 수 없는 경우에 사용한다. 비디오 화면에 표시된다.
descriptions	비디오 콘텐츠에 대한 설명이다. 비디오 화면에는 표시되지 않는다.
chapters	비디오 탐색을 위한 장 제목이다. 비디오 화면에 표시되지 않는다.
metadata	비디오 콘텐츠 정보이다. 비디오 화면에 표시되지 않는다.

②src 속성

자막 텍스트의 파일 경로를 지정한다.

​

③srclang 속성

사용한 언어를 지정한다.

​

④label 속성

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

​

⑤default 속성

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