5. 미디어 삽입

기존 버전의 HTML과 다르게 HTML5에서는 별도의 플러그인 없이 오디오와 비디오를 재생할 수 있게 되었다.

이를 가능하게 해주는 것이 <audio>와 <video>태그이다.

 

-<video>태그

 <h3>비디오 플레이</h3>
    <video src="media/bear.mp4" width="320" height="240" controls autoplay>
        브라우저가 video태그를 지원하지 않습니다.
    </video>

(controls 속성에 의해 비디오 제어 버튼이 출력되고, autoplay 속성에 의해 비디오는 바로 재생된다.)

video 내부에 입력한 텍스트는 이 태그를 지원하지 않는 브라우저일 시 출력된다.

video 태그에 이용되는 속성은 다음과 같다.

• width, height : 너비와 높이를 조절하는 속성. 생략하면 비디오 원본 크기로 재생된다.
• controls : 비디오 제어 버튼을 출력하는 장치
• autoplay : 비디오 로딩 즉시 재생
• loop : 반복 재생
• muted : 오디오를 끌 때 사용

 

비디오 소스를 <source>를 통해 별도로 지정 가능하기도 하다.

    <video width="320" height="240" controls autoplay>
         <source src="media/bear.mp4" type="video/mp4">

이 때 type 속성을 통해 비디오의 mime타입을 지정해준다. 브라우저에서 재생 가능한 타입은 mp4, WebM, ogg가 있는데, 각 브라우저마다 지원하는 타입이 각각 다르다.

비디오 형식	mime type
mp4	video/mp4
WebM	video/webm
ogg	video/ogg

-<audio>태그

    <audio src="media/EmbraceableYou.mp3" controls autoplay loop>
        브라우저가 audio태그를 지원하지 않습니다.
    </audio>

다음과 같이 플레이어(controls 속성에 의해)가 로드된다.

audio태그가 가질 수 있는 속성은 다음과 같다.

• controls : 오디오 제어버튼 출력
• autoplay : 오디오 로딩 즉시 재생
• loop : 반복재생

 

비디오 소스와 마찬가지로 오디오도 <source>를 통해 별도로 지정 가능하기도 하다.

<audio controls autoplay loop>
       <source src="media/EmbraceableYou.mp3" type="audio/mpeg">

마찬가지로, source 역시 mime type가 필요하다.

오디오 형식	mime type
mp3	audio/mpeg
wav	audio/wav
ogg	audio/ogg

*크롬이나 모바일 브라우저는 autoplay 기능이 보안상의 이유로 작동되지 않는다!