HTML5 Video Tag 사용하기

(본인이 velog에 작성한 글을 옮겨왔습니다.)

 

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

 

V 비즈링 소개 페이지

비디오에 대한 요구사항만 크게 추려보면 아래 4가지였다. 

 

요구사항 

1. 비디오 볼륨은 20% 정도로 노출
2. 페이지 랜딩 시 유음으로 자동재생
3. 컨트롤바를 클릭했을 때 이벤트 추가 
4. mp4 영상 재생 

아주 간단한 요구사항이지만, 1~4번은 서로 상충되거나 불가능한 요구사항이다. 커뮤니케이션 비용을 고려하지 않고 개발기간을 산정했다면 난감한 상황을 겪었을 것이다. 

 

이슈

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

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

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

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

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

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

자연스러운 애니메이션 효과를 위해 비디오 영역이 뷰포트 안에 들어오면, 비디오를 유음 + 자동재생하는 것이 첫 기획이었다. 그러나 크롬의 자동재생 정책에 의하면, 음소거 상태에서만 자동재생이 허용된다.(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 스펙을 확인하면 싶다면

3. 컨트롤바를 클릭했을 때 이벤트 추가 

뷰포트에서 비디오가 재생, 일시정지되는 이유는 2가지이다. 

1. 뷰포트에서 비디오가 노출되거나, 사라졌을 경우 
2. 사용자가 비디오 컨트롤에서 재생, 일시정지 버튼을 직접 클릭했을 경우

즉, 사용자가 비디오 컨트롤을 직접 제어할 경우, 뷰포트 노출에 의한 이벤트는 무시되어야 한다. 

 

그렇다면 사용자가 비디오 컨트롤을 직접 제어했는지를 어떻게 확인할 수 있을까?

비디오 컨트롤 버튼에 이벤트를 바인딩하면 쉽게 해결되지 않을까? 

 

// 이게 될까?
${controls-play-button}.addEventListener('click', () => { console.log('clicked') });

 

비디오 컨트롤바는 브라우저마다 표준이 다르고, 해당 버튼에 대한 개별적인 이벤트는 제공하지 않는다. 

브라우저마다 다른 컨트롤바

즉,  HTMLMediaElement API가 제공하는 play, pause 이벤트를 사용해서 제어해야한다. 

 

4. mp.4 재생, 코덱을 확인하자.

mp.4는 코덱이 아니다. 비디오 컨테이너일 뿐, 브라우저마다 지원하는 코덱이 다르기 때문에 주의해야한다. 

처음 백엔드 담당자가 동영상 URL을 전달했을 때, 크롬에서 동영상이 재생되지 않았다. 

파일을 다운로드 받은 뒤 코덱을 확인해보니 MPEG-4였다. 

 

재생되지 않는 동영상 파일의 인코딩 정보

 

크롬 비디오는 MP4 컨테이너(H.264/AAC)를 지원한다. H.256은 비디오 코덱이고, ACC는 오디오 코덱이다. 

 

브라우저 별 코덱 지원

미리 검토했으면 커뮤니케이션 비용을 줄일 수 있는 부분이었다. 

 

마치면서

B2C 앱 리뉴얼을 앞둔 상황이라, 소개 페이지의 기획안은 상세히 검토하지 못했다. outlink 페이지를 기존 소스와 분리하는 것에만 몰입한 채, 빌드 스크립트를 개발하고 나니 비디오 요구사항에 대한 문제점이 보였다. 미리 검토했더라면 커뮤니케이션 비용, QA 비용을 좀 더 절감하지 않았을까-하는 아쉬움이 남는 일이었다. 

 

 

* 참고 자료https://dev.opera.com/articles/custom-html5-video-player-with-css3-and-jqueryhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElementhttps://videojs.com/html5-video-support