Video 태그 배경으로 자동재생하기

요즘은 비디오 태그를 이용해서 배경으로 자동재생해서 넣는 경우가 종종 있다.

.gif보다 부드럽고 예쁘게 나타낼수 있어서 비디오 태그의 효과가 더 극적인거 같다.

그러나 비디오 태그는 ie8 이상부터 가능하기 때문에 크로스브라우징 이슈를 고려해서 사용해야 한다.

1. 자동재생 : autoplay

비디오 자동재생은 웹접근성에 위배되서 크롬같은 일부 브라우저가 막아놓았다. 그러나 음소거일 경우에는 가능하다고 하니 muted 속성과 같이 쓰면 된다.

2. 연속재생 : loop

연속재생 속성을 넣으면 무한으로 돌아간다.

3. 로딩이슈 : preload

브라우저 로딩시 미리 로딩을 준비해 놓으면 빠르게 렌더링 할수 있다.

4. 네이티브 컨트롤러 : controls

default 값이 false 이므로 연속재생이나 자동재생이 없다면 넣어주는 것이 좋다. 지금처럼 배경처리일 경우는 없애거나 controls="false"로 설정한다.

5. 접근성용 숨김글자

<figure>

<video preload="auto" autoplay="true" loop="loop" muted="muted" poster="" src=""></video>

<figcaption>비디오 안내 내용이 들어갑니다.</figcaption>

</figure>