- Html5에 새롭게 추가된 기능으로 구 버전의 브라우저(IE8 이하)에서는 지원되지 않습니다.
- 현재는 mp4/webm/ogg 파일 형식만 지원 합니다.
사용 예제
<video width="320" height="240" controls> <source src="동영상 주소.mp4" type="video/mp4"> <source src="동영상 주소.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
속성&값
※ 사용할 수 있는 속성
- src: 동영상 파일이 있는 위치를 지정해 줍니다.
- controls: '재생/정지/일시정지' 등의 조절 장치를 보여 줄지를 정해줍니다.
- height: 동영상 플레이어의 세로 크기 지정.
- width: 동영상 플레이어의 가로 크기 지정.
- muted: 음소거 지정.
- poster: 재생 대기 중인 동영상의 대표 이미지를 지정해 줄수 있습니다.
- loop: 동영상이 끝나면 반복해서 재생을 할지를 지정해 줍니다.
- autoplay: 페이지를 열면 자동으로 재생 시작할지를 지정해 줍니다.
- preload: 페이지를 열면 동영상 파일을 어떻게 로드할지를 정해 줍니다.(none/metadata/auto)
※ 사용할 수 있는 속성의 값
- src: 동영상 파일이 있는 곳의 주소(URL).
- controls: controls / "" / - , (값을 지정해 주지 않고 'controls'만 사용해도 controls="controls"와 동일 합니다.)
- height: 동영상 플레이어의 세로 크기 지정.
- width: 동영상 플레이어의 가로 크기 지정.
- muted: muted , muted(음소거)만 가능.
- poster: 이미지 파일이 있는 곳의 주소(URL).
- loop: loop / "" / - , (값을 지정해 주지 않고 'loop'만 사용해도 loop="loop"와 동일 합니다.)
- autoplay: autoplay / "" / - , (값을 지정해 주지 않고 'autoplay'만 사용해도 autoplay="autoplay"와 동일 합니다.)
- preload: none / metadata / auto
none: 미리 동영상 파일을 다운로드하지 않음.
metadata: 기본정보(크기,시간, 길이 등)만 가져옴.
auto: 미리 동영상 파일을 다운로드 함. (기본값 = auto)
source 태그
- 위 속성 이외에 <video> 태그 안에 다시 태그(Tag) 사용이 가능 합니다.
- 브라우저마다 지원하는 코덱이 다르기 때문에 source 태그를 사용하여 모든 브라우저에서 video 태그가 실행되게 해줍니다.
