[html5] video 태그 사용법

 

 

[html5] video 태그 사용법

 

video 태그는 html5에서 새로운 요소로, 비디오나 영화를 삽입할 때 사용합니다.

 

html5 이전에는 비디오를 삽입할 때 플래시 같은 플러그인 삽입으로 재생을 했습니다.

 

 

[html] object 태그 정리

 

 

하지만 브라우저마다 각기 다른 플러그인을 지원하고, 코드도 너무 복잡했습니다.

 

 

<video>요소는 비디오를 삽입하는 표준적인 방법을 제공합니다.

 

 현재는 mp4, webm, ogg 세 파일 형식만 지원하고 있습니다.

 

 

  

<video>요소 지원 브라우저 : IE 9+, Chrome 4.0+,  FF3.5+, Safari 4.0+, Opera 10.5+

 

 

▶사용 법:

<video width="300" height="200" controls loop>
  <source src="nature.mp4" type="video/mp4">
  <source src="nature.ogg" type="video/ogg">
대체내용
</video>

 

width, height 속성은  항상 함께 사용하는 것이 좋은데,

 

너비와 높이를 따로 설정하지 않으면 비디오에 대한 공간을 남겨둘 수가 없어서

 

비디오가 로딩될 동안 페이지 구성이 바뀝니다. 

 

또한 video 요소를 지원하지 않는 브라우저를 위해 '대체내용'도 함께 넣어주세요

 

 

▶함께 사용할 수 있는 속성

 

 

height 비디오 화면 높이 (px 단위)

width 비디오 화면 너비 (px 단위)

   

autoplay

이 속성을 지정하면, 비디오가 로드되자마자 자동으로 재생을 시작 함.

 

지원브라우저: IE 9+, Chrome, FF, Safari, Opera

 

사용법:

 

html5에서 <video autoplay>

xhtml에서 <video autoplay="autoplay">

 

 

controls

이 속성을 지정하면, 오디에 재생에 관한 조절 장치를 보여 줌

(playback/pause/resume/volume 등)

 

지원브라우저: IE 9+, Chrome, FF, Safari, Opera

 

 

사용법:

 

html5에서는, <video controls>

xhtml에서는, <video controls="controls">

 

 

loop

속성을 지정하면, 비디오를 반복 재생합니다.

 

지원브라우저: IE 9+, Chrome, FF, Safari, Opera

 

사용법:

 

html5에서는, <video loop>

xhtml에서는, <video loop="loop">

 

 

muted

비디오에 포함된 오디오를 음소거할지 지정 (기본값 false)

 

지원 브라우저: IE 10+, Chrome, FF,  Opera, Safari 6+

 

 

사용법:

 

html5에서는, <video muted>

xhtml에서는, <video muted="muted">

 

 

 

preload

 

*주요 브라우저에서 이 속성을 지원하는데 ie만 지원하지 않음.

비디오 파일을 어떻게 로드해야 하는지 지정

 

-none: 비디오 파일을 로드하지 않음
-metadata:  metadata만 로드 함
-auto:  전체 비디오 파일을 로드 함

 

설정하지 않으면, 브라우저의 기본 속성값이 지정 됨(명세에서는 metadata로 설정하라 권고 함)

 

 

사용법: <video preload="auto|metadata|none">

 
*autoplay를 지정하면, preload 속성은 무시 됨.

 

 

 

poster 비디오가 다운되는 동안이나, 사용자가 재생 버튼을 누를 때까지 보일 이미지 url 지정

 

src : 삽입할 비디오의 주소

 

지원브라우저: IE 9+, Chrome, FF, Safari, Opera

 

src 속성은 위 브라우저에서 지원하지만, 브라우저마다 지원 파일 포맷이 다름.

 

현재 <vedio>요소는 세 가지 파일 형식을 지원합니다.

 

 

MP4 파일: IE, Chrome, FF,Safari
WebM 파일: Chrome, FF, Opera
ogg 파일: Chrome, FF, Opera

 

 

사용법:

<video width="400" height="300" src="rain.mp4" autoplay>

이 브라우저는 video를 지원하지 않습니다</video>

 

 

 

 

 
 

src 속성 대신 여러 파일 포맷을 올리기 위해  <source> 요소를 같이 사용할 수 있습니다.

(브라우저는 첫번째 인식된 포맷을 사용 함)

 

 

<source>요소

 

<source>태그는 <video> <audio>태그와 함께 사용하며,

 

미디어 유형이나 코덱에 따라 자원을 선택할 수 있도록 지정.

 

 

지원 브라우저: IE9.0+, FF3.5+, Safari4.0+, Opera 10.5+

 

 

▶함께 사용할 수 있는 속성

 

media: media_query(주요 브라우저 지원 안함)

 

src:  파일 경로 

 

type: MIME_type(파일 형식 유형)

 

Format	MIME-type
mp4	video/mp4
ogg	video/ogg
webm	video/webm

 

 

사용법:

<video controls  width="400" height="400">
  <source src="test.mp4" type="video/mp4">
  <source src="test.ogg" type="video/ogg">
이 브라우저는 vedio 태그를 지원하지 않습니다
</video>

 

 

 

audio 태그로 음악 파일 삽입하기

 

[html5] embed 태그