이번에 프로젝트를 위한 간단한 시연준비를 하면서 고생한 부분을 기록, 공유한다.
이번에 시연할 때 AWS를 통해 전달 받은 MediaSource를 웹 페이지에서 보여주어야 했다.
음.. 다른 mp4 파일 과는 다르게 실시간으로 업로드 되는 것을 2,3초 간격으로 받아 영상을 보여주어야 했다.
우리가 선택한 것은 익숙한 기술인 HLS였고, 나는 hls.js를 이용해서 구현했다.
뭐 기존에 다루던 라이브러리였고, 시연이라 데모수준에서 영상을 터트리는데는 큰 이슈는 없었다.
다만.. autoplay에서 애를 먹었다.
문제의 발견
요구사항은 해당 웹페이지에 접속하면 '미디어 소스 로드와 함께 자동으로 재생이 되어야 하며, Video태그에서 제공하는 컨트롤러 UI가 없어야 한다!' 였다.
처음에 ' 이런거야 뭐 video 태그에 autoplay 하나 넣어 주면 됨 ㅋㅋ ' 라고 생각했고 ....사건의 시작이었다.
<video autoplay></video>
참 쉽죠? 하하..
하지만 Chrome에서 문제가 발생했다. 영상이 바로 재생이 되지 않는 이슈 발생!
원인 분석
원인 분석을 위해 여러가지 링크, 블로그, 문서들을 보았다.
먼저 블로그나 다른 문서들을 보면 muted 옵션을 추가로 주면 정상적으로 재생이 된다고 한다!
<video autoplay muted></video>
자 하나 더 늘었다. 과연 정상적으로 동작할까?
결과를 확인해본 재생은 정상적으로 되었다! 단지 음소거가 된 상태로 재생되었을 뿐..
mute를 하지 않고 자동재생 하는 법은 없을까 ?
결론부터 말하면 없다.
여기서 관련 링크 하나 첨부하고 -> 링크
Autoplay Policy Changes | Web | Google Developers
Learn best practices for good user experiences with the new autoplay policies in Chrome, coming April 2018.
developers.google.com
구글에서 2018년에 Autoplay Policy를 재정의 했다.
SNS 및 여러 포스팅이 활발해 짐에 따라 용량이 큰 동영상 재생등이 사용자가 원치않는 리소스를 가져간다고 판단하여 브라우저에서 막아버렸다.
단, Autoplay를 하고 싶다면 muted를 하여 사용자가 컨텐츠를 사용하는데 지장없도록 제약하였다. 이것이 크롬에서 Autoplay가 되지 않는 이유이다.
물론 이것은 크롬브라우저만의 정책이기 때문에 익스플로러나 사파리 같은 다른 브라우저에서는 정상적으로 Autoplay가 된다.
시도
개발자라면 OS나 브라우저에서 막은 정책들을 우회하는 법을 연구해야한다.................엌ㅋㅋㅋ
물론 상황에 따라 사용하기 위함이고.. 무조건 정책을 어기려고 하는건 아니니..
우선 고객사가 Autoplay가 되길 바라기 때문에 여러가지 시도를 해보았다.
[ 첫 번째 시도 ]
<접근 방법>
- Video 태그에 autoplay를 빼서 페이지에 접근하자마자 재생이 안되도록 한다.
- 페이지가 열리면 video 태그의 재생상태를 확인한다.
- 재생상태가 paused ( 당연히 paused 겠지... ) 면 1초뒤에 재생을 하도록 한다.
<기대 결과>
- Video 로딩 후 1초뒤에 재생.
<코드>
<!-- 본문 -->
<video id="video"></video>
<script>
$(function(){
// video 태그 선택
var video = document.getElementById("video");
// video 태그의 재생상태가 paused면
if(video.paused){
// 1초뒤에 재생
setTimeout(function(){
video.play();
}
}, 1000);
}
</script>
<결과>
- 실패 ㅠ
- 재생되지 않음.
[ 두번째 시도 ]
<접근 방법>
- muted가 된 상태로 autoplay 를 넣어 재생 시킨다
- 페이지에 접속 후 1초뒤에 muted 해제하기
<기대 결과>
- 페이지에 접속하면 autoplay, muted 속성으로 음소거된 상태로 자동재생됨.
- 1초뒤에 muted가 해제되면서 정상적으로 영상이 나오지 않을까?
<코드>
<!-- 본문 -->
<video autoplay muted id="video"></video>
<script>
$(function(){
// video 태그 선택
var video = document.getElementById("video");
// 1초 뒤에 muted 해제
setTimeout(function(){
video.muted = false;
}
}, 1000);
}
</script>
<결과>
- 실패 ㅠ
- muted = false값이 정상적으로 처리 되지 않음... 에러남 ㅠㅠ
여기서 잠깐
우선 접근 자체를 제일 처음에만 autoplay가 되지 않게 하면 되지 않을까? 해서 접근한 것이었는데... 틀렸다..
구글은 똑똑했고, 프로그램이 자동으로가 아닌 '사용자가 원해서' 영상을 시청할 수 있도록 사용자 액션이 필요했다.
위에 링크에도 설명되어 있지만 영상 재생에 있어 사용자가 '원한다' 라는 액션이 있어야 한다. 그게 재생버튼을 누르는 것이든 mute버튼을 누르는 것이든...
자 그럼 다시..
그래서 세번째 시도를 해보았다.
사용자가 마치 클릭한거 처럼! 해볼까 ?
[ 세번째 시도 ]
<접근 방법>
- 페이지에 접속 했을 때 1초뒤에 onclick 이벤트를 trigger를 통해서 발생시킨다!!
<기대 결과>
- onclick 이벤트를 통해 실행시켰으니 되겠지? ㅋㅋㅋ후후
<코드>
<!-- 본문 -->
<video id="video" onclick="playVideo();"></video>
<script>
$(function(){
// video 태그 선택
$("#video").trigger("click");
}
function playVideo(){
var video = document.getElementById("video");
video.play();
}
</script>
<결과>
- 실패 ㅠ
- trigger로 처리 해도 사용자가 직접 누른것으로 인지 하지 못하는 것 같다... ( 정확하게 모르겠음..ㅠㅠ )
결론..
결국에는 '시청하기' 버튼을 눌러서 재생 하도록 개발을 하긴 했지만 아직도 의문이다.. 정말 방법이 없는 것인가..?
혹시 이글을 보고 해결법 아시는 분은 댓글로 남겨주시면 아주 감사하겠습니다 ㅠㅠ