HTML5 video 태그 컨트롤바 및 설정값 보기

설정값 태그 적용한 예시

<video style="width:300px; height:240px" controlslist="nodownload" controls autoplay loop muted>

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

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

  Your browser does not support the video tag.

</video>

빨간색 표시해놓은 부분이 비디오태그에 설정값 및 컨트롤바에 대한 제어를 해준다. 태그를 빼고 넣음으로써 테스트해보면 쉽게 이해가 되니 테스트를 해보자.

---

controlslist="nodownload"

다운로드 버튼 제거

---

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

---

autoplay

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

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

---

본 게시글이 도움이 되셨다면 로그인 없이 클릭 가능한 ♥ 공감 버튼 클릭 부탁드립니다 :) 
"당신의 하루가 별보다 빛나길"