[Issue]video 태그 이슈와 해결 방법

video 태그 이슈와 해결방법

회사에서 웹 홈페이지를 오픈할 예정이라 앱뷰를 웹뷰로 전환하는 과정에서

비디오 태그를 사용할 일이 생겼습니다

저희 회사는 미디어 커머스 사업을 하고 있기 때문에 앱에서의 비디오 재생은 필수적인데요

앱에서 자동 재생으로 노출되는 비디오를 웹뷰로 구현중에 모바일 브라우저에서 2가지 이슈가 발생했는데요

한가지는 비디오가 재생되는 메인 페이지에서 다른 페이지에 접속했다가 다시 메인 페이지로 돌아오면

자동 재생이 멈춰있는 이슈였고

두번째 이슈는 모바일웹(크롬, 사파리 등)을 끄지않고 휴대폰에서

다른탭을 보다가 다시 모바일웹에 들어오면 자동 재생이 멈추는 이슈였습니다

사실 처음에는 두가지 모두 하나의 문제라고 생각했었는데요 두 이슈는 서로 다른 방법으로 해결해야 했습니다

비디오 태그 자동 재생 방법

우선 비디오 자동 재생을 위해서는 몇가지 옵션이 필요합니다

pc브라우저 혹은 안드로이드는 autoplay, muted 두가지 태그만으로도 자동 재생이 가능합니다

ios 10버전 이상에서는 playsinline 태그를 더 추가해줘야 합니다

태그에 위 옵션들을 추가해주면 자동 재생이 가능합니다

첫번째 이슈 해결 방법

자동 재생은 구현해둔 상태에서 첫번째 이슈를 발견하고 해결하기 위해 여러 방법을 생각해봤는데요

다른 페이지에 다녀오는 순간 video태그의 autoplay가 true가 아닌 다른 상태로 변경된다고

생각이 되었습니다. 그래서 React ref를 사용해서 비디오 태그에 ref를 걸어주고

다른 페이지에 다녀오는 순간을 추적해보니 autoplay가 false가 되면서

video.pause()가 동작하는걸 확인할 수 있었습니다.

그래서 useEffect를 이용해서 다른 페이지에서 비디오가 재생되는 페이지로 돌아왔을때

비디오 태그의 autoplay 속성이 false라면 다시 true로 바꿔주고

HTML 제공하는 메서드인 play() 함수를 실행시켜서

관련 링크
HTML Audio/Video DOM play() Method

비디오를 다시 재생시키는 방법으로 이슈를 해결할 수 있었습니다.

두번째 이슈 해결 방법

첫번째 이슈를 해결하고 사실 마무리가 되었다고 생각했는데요

모바일웹에서 사이트를 나가지않고 다른탭에 갔다가 다시 모바일웹을 띄우면

비디오가 또 멈춰있었습니다.

우선 이슈를 해결하기 위해서 구글링을 하면서 어떤식으로 검색해야 할지 많이 난처했었습니다

그러던 중 한 블로그를 보고 이슈를 해결할 수 있었습니다

이슈해결도움주신분 블로그

우선 웹사이트를 나가지않고 다른탭에 가던지 잠시 브라우저를 닫아놓던지 하는 용어는

포그라운드/백그라운드 라고 표현한다고 하는데요

이 용어는 리눅스에서 흔히들 사용하는 터미널 용어라고 합니다

Foreground

PC에서는 웹 브라우저 활성화 탭을 의미하고
App에서는 웹 브라우저의 활성화 탭을 의미합니다

Background

PC 에서는 웹 브라우저 활성화 탭을 제외한 나머지 탭을 의미하고
App 에서는 웹 브라우저 활성화 탭을 제외한 나머지 탭 +
홈버튼을 클릭하여 브라우저를 벗어난 상태를 의미합니다

사용자가 미디어 요소를 실행하는 웹앱 서비스에서 홈 버튼을 클릭하여 현재 탭을 벗어나게되면

자연스럽게 미디어 요소를 초기화 혹은 일시정지시켜야 하는 UX를 제공해야 한다고 합니다

제가 겪은 이슈는 Page Visibility API를 이용해서 해결할 수 있었는데요

Page Visibility API는 웹페이지가 visible 또는 focus 상태인지 당신이 알도록 한다
Page Visibility API

현재 유저가 보고 있는 웹페이지가 visible 또는 focus 상태인지를 감지할 수 있기때문에

해당 상황에 맞춰 적절한 메소드를 이용할 수 있었습니다

사용자가 웹뷰를 닫았을때는 자동으로 비디오 pause()가 동작하기 때문에

웹뷰를 보고 있을때는 다시 비디오를 play()를 이용해서 재생시켜줘서 이슈를 해결했습니다.