웹사이트에서 Video 태그 Autoplay 이슈 해결하기

안녕하세요. 오늘은 웹사이트에 동영상을 띄우기 위해 Video 태그를 사용할 때 생길 수 있는 이슈에 대해 정리해보겠습니다.

 

 

🧐 동영상을 자연스럽게 렌더링하기

 

이번에 웹사이트에 동영상을 추가하기 위해 대중적으로 많이 사용하는 Video 태그를 사용하게 되었습니다. S3으로부터 비디오 파일을 받아온다음 렌더링해야하기 때문에 아무래도 로딩 시간이 너무 오래 걸리면 안된다는 점이 중요했습니다. 그러다보니 자연스레 4k 영상이라 용량이 매우 높았던 것을 압축해야 했습니다.

기본적으로 동영상이 용량이 이미지보다 훨씬 높을 수 밖에 없었기 때문에, 최대한 유저가 자연스럽게 동영상 로딩을 받아들일 수 있는 장치가 필요했죠.

 

Video 태그에는 'poster' , 'autoplay'라는 attribute를 추가할 수 있습니다. poster는 말그대로 동영상이 로딩/재생되기 전에 띄우는 일종의 썸네일에 해당하고 autoplay는 동영상 로딩을 마치면 자동으로 재생해주는 옵션에 해당합니다. 

 

<video
  autoplay loop
  poster="{썸네일 이미지 소스}"
  >
  <source src="{동영상 파일 소스}" type="video/mp4">
</video>

 

이렇게만 사용하면 AWS로부터 동영상을 로딩하는 동안 썸네일이 띄워지고, 받아오면 바로 재생되기 때문에 자연스럽게 보여지게 됩니다.

 

 

📱 모바일에서 자동재생

 

하지만 이렇게만 사용했을 때 사이트를 배포하고 핸드폰으로 보면 자동재생이 되지 않았습니다. 이유가 무엇일까요?

 

developers.google.com/web/updates/2017/09/autoplay-policy-changes

Autoplay Policy Changes  |  Web  |  Google Developers

크롬을 기준으로 생각해보겠습니다. 구글은 동영상 파일의 Autoplay 정책을 2018년 변경하였습니다. 'Media Engagement Index'라는 것을 두어 일정 조건을 만족해야만 Autoplay가 가능하도록 변경한 것이죠. 그 이유는 사용자 경험을 향상시키고 원하지 않는 광고가 자동으로 재생되는 경우를 방지하여, 불필요한 데이터 소비를 줄이기 위함입니다. 갑자기 웹사이트를 서핑하는데 뜬금없이 동영상이(그것도 소리가 시끄러운) 혼자 재생되면 문제가 있겠죠?

 

그래서 모바일에서는 Media Engagement Index가 애초에 낮기 때문에, (이유는 모바일에서의 네트워크 환경과 성능이 더 낮기 때문이겠죠?) 웹과 다르게 Autoplay가 바로 되지 않는 것입니다. 물론 이것은 구글의 정책이기 때문에 크롬에만 해당하고 사파리, 익스플로러에서는 다른 정책이 적용됩니다.

 

따라서 이 지수를 향상시키기 위해 'muted' = 소리 차단 attribute를 켜놓아야 자동 재생이 가능하게 됩니다. 저는 소리가 필요한 동영상이 아니었기 때문에 muted를 켜도 문제가 없었습니다. 그렇게 모바일에서의 자동 재생 이슈도 해결할 수 있었습니다.

 

<video
  autoplay loop muted
  poster="{썸네일 이미지 소스}"
  >
  <source src="{동영상 파일 소스}" type="video/mp4">
</video>

 

 

 

😭 이거까지 신경쓰기는 좀..

그렇게 문제를 해결하고 배포를 마친 저는 뜻밖의 문제에 맞닥뜨리게 되었습니다. 저 말고 다른 사람의 핸드폰으로 사이트를 열어보니, 역시 동영상이 재생되지 않는 경우가 있던 것이었죠. 

 

이유를 찾아보니 iOS 일정 버전에서는 저전력 모드면 동영상이 자동재생되지 않는 경우가 있는 것이었죠!

 

zinee-world.tistory.com/536?category=799601

[iOS13] 아이폰 저전력 모드에서 video 재생버튼 이슈

 

유저의 배터리 모드까지 신경써야 한다니.. 비디오 태그는 참 말썽이다 싶으면서도 한편으로는 데이터 환경에 예민한 모바일 브라우저에서는 이런 정책을 가져갈 수 밖에 없겠구나 싶었습니다. 생각할 수 있는 대안은 두개입니다.

 

 

1. 모바일에서는 동영상 파일을 포기한다

- 실제로 많은 사이트들이 웹에서는 동영상 형태의 배너를 사용하다가도 모바일에서는 단순 이미지로 바꾸어 띄우는 경우가 많습니다. 모바일에서 비디오 태그가 불리한 것은 사실이고, 기기에 따라 로딩 속도가 너무 차이나기 때문에 아예 리스크를 줄이는 방법이죠.

 

2. 짧은 영상은 GIF 파일로 대체한다.

- GIF 파일 역시 웹에서 권장되는 이미지 포맷이기 때문에, 동영상의 길이가 짧다면 GIF를 사용하는 것도 하나의 방법이 될 수 있습니다. 

 

동영상의 크기에 따라 두 가지 방법 중 타협하는 방법이 있겠습니다.

 

 

 

📚 레퍼런스

developers.google.com/web/updates/2017/09/autoplay-policy-changes

 

okayoon.tistory.com/entry/video%ED%83%9C%EA%B7%B8-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%AA%A8%EB%B0%94%EC%9D%BC-%EC%9D%B4%EC%8A%88-%EC%A0%95%EB%A6%AC-%EC%82%AC%ED%95%AD