미디어 재생 태그 <audio>, <video>, <source>

HTML5 이전에서 오디오나 비디오 같은 미디어물을 재생하기 위해서는 embed라는 태그를 사용거나 플러그인을 사용하였다.

하지만 HTMl5에서는 audio 태그, video 태그를 사용하여 HTML5에서 직접 재생시켜준다.

이번 포스팅에서는 audio 태그와 video 태그의 사용법에 대해서 알아보자.

1.1 audio 태그

 - audio 태그는 음악파일을 재생하기 위한 태그로 음악을 제어할 수 있는 속성들을 가지고 있다.

 - audio 태그는 닫는 태그와 함께 사용되어야하며 기본형태는 <audio></audio>이다.

 - audio 태그의 속성

속성	설명
src	음악 파일의 경로를 지정한다.
preload	음악파일을 모두 다운로드 한 뒤 음악을 재생할 지 지정한다.  (버퍼링은 없지만 초기 실행이 늦을수 있다.)
autoplay	해당 음악을 자동으로 재생할 지를 지정한다.
loop	해당 음악파일을 반복해서 재생할지를 지정한다.
controls	재생 도구를 출력할지 여부를 지정한다.

1.2 audio 태그의 속성 표기 방법

 - audio 태그는 아래의 2가지 방식으로 사용가능하다.

 - XHTML5 방식

   <audio src="music.mp3" controls="controls" autoplay="autoplay"></audio>

 - HTML5 방식

   <audio src="music.mp3" controls autoplay></audio>

1.3 예시

 - <audio src="music.mp3" controls="controls" autoplay="autoplay" loop="loop" preload="auto"></audio>

 - 다음사진은 위의 audio태그를 사용한 모습이다.

  

2.1 video 태그

 - video 태그 또한 영상을 재생하기 위한 다양한 형태의 속성들을 가지고 있다.

 - video 태그는 닫는 태그와 함께 사용되어야하며 기본형태는 <video></video> 이다.

 - video 태그의 속성

속성	설명
src	영상 파일의 경로를 지정한다.
poster	영상을 준비 중일때 불러올 이미지 경로를 지정한다.
preload	영상파일을 모두 다운로드한 뒤 영상을 재생할 지 지정한다.  (버퍼링은 없지만 초기 실행이 늦을수 있다.)
autoplay	해당 영상을 자동으로 재생할지를 지정한다.
loop	해당 영상을 반복해서 재생할지를 지정한다.
controls	재생 도구를 출력할 지 여부를 지정한다.
width	영상의 너비를 지정한다.
height	영상의 높이를 지정한다.

2.2 예시

 - <video poster="http://placehold.it/1000x550" src="yuna.mp4" controls="controls" loop="loop" width="1000px" preload="auto">

 - 다음 사진은 영상이 재생되기전 poster 속성의 이미지파일지 출력되는 모습니다.

   

- 다음 사진은 동영상이 재생될때의 모습이다.

   

3.1 source 태그

 - 현재 다양한 브라우저가 존재한다. 하지만 브라우저마다 재생할 수있는 파일의 형식(확장자)가 다르다.

   이문제를 해결할 수 있는 방법이 source 태그이다.

 - source 태그는 <source src="music.mp3" type="audio/mp4" /> 가 기본 형식이다.

 - source 태그의 type 속성을 지정해주지 않으면 속도저하의 문제가 발생하게 된다는 것을 명심하자.

3.2 source 태그의 예시

 - audio 태그에서의 source 태그

   <audio controls = "controls">

<source src="music.mp3" type="audio/mp3" />

<source src="music.ogg" type="audio/ogg" />

   </audio>

 - video 태그에서의 source 태그

   <video controls = "controls">

<source src="movie.mp4" type="video/mp4" />

<source src="movie.webm" type="video/webm" />

   </video>

 - source 태그는 순차적으로 재생을 시도하게 된다.

   최상위 파일을 실행할 수 없을 때 바로 다음 source 태그에 해당하는 파일을 재생한다.