HTML5 Video Tag 사용하기

최근 간단한 서비스 소개 페이지를 개발하면서 기획, 백엔드 담당자와 논의한 내용에 대한 글이다.

다른 기획 요구사항을 제외하고, Video에 대한 요구사항만 추려보면 아래 4가지였다.

요구사항

1. 비디오 오디오는 20% 정도로 노출
2. 페이지 랜딩 시 유음으로 자동재생
3. Video 컨트롤바 제어
4. mp4 영상 제공

이슈

1. 클라이언트 오디오 볼륨의 20%로 재생

대부분의 사람들은 우연히 클릭한 비디오의 큰 음량으로 인해 깜짝 놀라거나 부끄러운 상황을 경험해본 적이 있을 것이다. 기획자는 비용과 시간을 들여 제작한 비디오를 유저가 꼭 시청하길 바랬고,클라이언트 오디오 볼륨의 20%가 절충안으로 제시했다.

요구사항을 충족시키기에 HTMLMediaElement API는 (브라우저 표준안에 한해서) 충분한 메소드와 이벤트를 제공한다.

특히 이벤트 중, onloadstart, onloadeddata는 여러모로 쓸모가 많은데, onloadstart를 사용해서 오디오 볼륨을 세팅할 수 있다.

<!-- 가독성을 위해서 불필요한 속성은 ...로 표기 -->
<video ... onloadstart="this.volume=0.2">
 <source src="video-url" type="video/mp4" />
 ...
</video>

2. 자동재생(autoplay) + 유음(muted) 제공

자연스러운 애니메이션 효과를 위해 비디오 영역이 viewport 안에 들어오면, 비디오를 유음 + 자동재생하는 것이 첫 기획안이었다. 그러나 video를 사용해본 경험이 있는 분들은 알 것이다.

크롬은 2018년 새로운 자동재생 정책을 내놓았다. 간략히 설명하면 음소거 상태에서만 자동재생이 허용된다. 사파리, 파이어폭스도 동일한 정책을 따르고 있다.

<!-- 자동재생 불가 -->
<video ... autoplay muted=false>
 <source src="video-url" type="video/mp4" />
 ...
</video>

자동재생이 필요하다면 유음을 포기해야 한다.

<!-- 음소거 상태이므로 자동재생 가능 -->
<video ... autoplay muted>
 <source src="video-url" type="video/mp4" />
 ...
</video>

사용자 경험을 최적화하고 데이터 소비를 줄이기 위한 정책이니, Chrome 정책을 우회하려고 시간을 쏟지 않길 바란다. 여담이지만 유튜브, 넷플릭스 등은 화이트리스트로 관리되어 음소거 없이도 자동재생이 가능하다.

👉🏻 Chrome 스펙을 확인하면 싶다면

3. Video Contols 제어

비디오 하단의 재생, 일시정지, 음소거 등을 표시하는 controls의 속성을 제어하려면 기본 제공되는 method(play(), pause() 등)를 사용하거나 별도의 button을 만들어서 trigger해야한다. controls를 직접 제어할 순 없을까? 내 기억이 맞다면, controls 영역은 비표준이기 때문에 직접 제어할 수 없다.

4. mp.4 형식이면 모두 재생한가? Nope, 코덱을 확인하자.

백엔드 담당자가 동영상을 서버에 업로드한 뒤 URL을 전달했다. 파일 포맷은 mp4였지만 크롬에서 재생되지 않는 이슈가 발생했다. 파일을 다운로드 받은 뒤, 코덱을 확인해보니 MPEG-4였다. 크롬에서 Video 태그가 공식 지원하는 비디오 코덱은 H.264, 오디오 코덱은 AAC이다. 파일 인코딩을 변환해서 사용해야 한다.

마치면서

처음 기획안을 보았을 때는 outlink 페이지를 기존 소스와 어떻게 분리해서 빌드할 것인지에 대해서만 고민했다. 그러나 개발이 진행될 수록 크롬 정책 등으로 인해 사소한 수정이 발생했다. 동영상 서비스를 개발, 운영하고 있지만 브라우저마다, OS마다, OS버전마다 어려운 점이 종종 발생한다. 간단해보이는 Video 삽입도 사소하게는 코덱부터 논의해야하는 상황이 생기니 말이다.