음소거 해제 시 비디오 재생되지 않는 문제

V 컬러링에서는 컬러링 구매 또는 설정 시 비디오 미리보기 서비스를 제공하고 있습니다. 컬러링 상세 화면은 페이지로 되어 있고, 미리보기는 팝업으로 구현되어 있습니다. 그리고 각 화면에서 음소거 On/Off를 할 수 있도록 되어 있습니다.

기본적으로 비디오는 음소거 상태로 자동 재생이 되는 것이 디폴트이고, 사용자가 action을 취하면 음소거가 해제되거나 다시 음소거 모드로 전환할 수 있습니다. 그리고 상세 페이지에서 음소거를 해제하고 미리보기 화면에 진입하면, 음소거 여부가 동기화되기 때문에 소리가 켜진 상태로 미리보기 비디오가 재생됩니다. 그런데 웹에서는 아무 이슈가 없었는데 앱 내부, 즉 웹뷰에서 영상이 재생되지 않는 이슈가 있었습니다.

안드로이드 기기의 하드웨어 볼륨 키로도 음소거 여부를 설정할 수 있어 해당 화면에서 앱과 웹 간의 인터페이스 통신을 통해 앱의 음소거 여부를 받고 있는데, 웹뷰에서만 발생한 문제였기 때문에 처음에는 인터페이스 연동 부분에서 문제가 있다고 생각했습니다. 그래서 초기에 인터페이스 호출 이후 받아오는 응답 데이터의 null 처리를 해 보았음에도 불구하고 여전히 이슈가 해결되지 않았습니다.

다음으로는 예전에 iOS에서 이슈가 되었던, 비디오 화면 종료 시 소스를 초기화해주는 코드가 혹시 영향을 미치지 않을까 해서 추가해 보았습니다. 이 코드를 넣지 않으면 iOS에서 상세 화면에 재진입했을 때 비디오가 자동 재생되지 않는 이슈가 있었습니다.

useEffect(() => {
	return () => {
		if (videoEl.current) {
			videoEl.current.src = '';
			videoEl.current.load();
		}
	};
}, []);

해결이 되지 않았습니다. 곰곰이 생각을 해 보다가, 아무래도 비디오가 플레이되는 부분에서 오류가 발생할 테니 그 부분을 캐치해 보는 것이 어떨까 해서 다음과 같은 코드를 넣어 보았습니다.

const play = () => {
	if (!videoEl.current) {
		return;
	}

	if (videoEl.current) {
		videoEl.current.play().catch(e => {
			if (e.code === 20) {
				play();
			}
		});
	}
};

이렇게 했더니 아주 정상적으로 잘 동작하는 것을 확인했습니다! 🙂 videoEl (ref로 지정한 비디오 엘리먼트) 이 없으면 return을 해 주고, play() 상태로 진입했을 때 catch를 하여 오류가 발생하면 다시 play를 하는 코드입니다.

(정책적인 원인으로 현재는 미리보기 등 팝업 진입 시 무조건 음소거 모드로 재생하도록 변경해 둔 상태입니다.)

2022년 5월 10일에 작성함.