HTML5 백그라운드에 무한재생 동영상을 넣자! video 태그 사용법

2019. 2. 17. 00:07

HTML5에서 새롭게 추가된 태그 중 하나가 video 입니다. 과거에는 플래시 플레이어, 혹은 여러가지 ActiveX 같은 추가 프로그램을 설치해야만 재생이 되었지만, 버전이 향상되면서 video 요소 하나로 이 모든것을 퉁치게 되었습니다. video 태그에서 사용할 수 있는 여러 속성들이 있습니다. 아래를 참고해 주세요.

속성	설명
src	동영상 경로 지정
poster	동영상이 깨졌거나 재생 불가 시, 대신 표시할 이미지 경로 지정
preload	동영상 백그라운드 다운로드 후 재생 단추를 눌렀을 때 재생됨
autoplay	자동 재생
loop	무한 반복 (loop="숫자" 의 형태는 무한반복 횟수)
controls	동영상에 컨트롤 UI 생성
width	동영상 가로 화면 넓이
height	동영상 세로 화면 높이
muted	동영상 음소거

이렇게 됩니다. 위의 표를 토대로 하여 예시로 구성한 video 태그는 다음과 같습니다.

이렇게 해주시면 됩니다. 보시면 video 속성 중 가로 및 세로사이즈, 그리고 loop, autoplay, muted 정도만 사용했습니다. 이 세가지가 백그라운드에 동영상을 넣을 때 사용되는 대표 속성 입니다.

하지만 video 요소에서 직접 경로를 작성하게 되면 문제점이 하나 생깁니다. 바로 호환성 부분입니다. 아시다시피 동영상 재생에 필요한 코덱이라는게 있는데 이것을 웹 브라우저 프로그램마다 지원하는 여부가 조금씩 다릅니다. 그렇기에 모든 브라우저에서 정상적으로 동영상이 재생되게 하려면 해당 코덱에 대한 마크업을 해주시면 좋습니다. 그래서 보통 video 태그 안쪽에 source 태그를 별도로 넣는 방법을 사용합니다.

</video>

이렇게 마크업 하시고 각 브라우저별로 동영상이 정상적으로 재생 되는지에 대해서 테스트를 해보셔야 합니다. 만약 특정 브라우저에서 재생이 되지 않는다면 해당 브라우저에서 지원하는 코덱을 알아보시고 위의 예시처럼 별도로 마크업을 하셔야 합니다. 또한 필요하다면 동영상 인코딩을 브라우저에 맞춰서 하나 더 추가로 만드셔야 합니다. 그만큼 용량이 늘어나겠지만, 호환성을 위해서라면 이 정도는 감수해야죠!

끝으로 백그라운드용 동영상을 넣는다면 video 요소를 div 혹은 figure 태그를 사용해서 한번 더 감싸줍니다. 그리고 감싼 요소의 스타일에 z-index 속성을 넣으시고 속성값을 -1 혹은 그 이히의 값으로 넣어주시면 됩니다. 끝.