muted attribute가 html video tag에 없기 때문이다. 이것은 react의 정상적인 동작이다.
chromium 족family 브라우저들은 muted되지 않은 HTMLVideoElement를 자동 재생하지 않는다. 정책이 그렇다고 한다.
나는 검색 엔진 최적화seo 수요 대응을 위해 ssr이 필요했다. 원래의 요구 사항에는 없던 내용이라, 기존의 앱은 create react app으로 작성되어 있었고 ssr을 할 방법이 없었다. 고객에게는 렌더된 html과 애셋만 전달하면 된다고 한다. 빠르게 렌더링을 하기 위해 headless 브라우저 기반으로 react 라우트를 렌더하는 react-snap을 사용하였다.
(여러분 이거 혼모노입니다. 무지성 ssg 가능합니다.)
헌데 react 컴포넌트는 video 엘리먼트를 dom에 렌더할 때 muted 속성attribute을 표기하지 않는다. https://github.com/facebook/react/issues/10389 아주 오래된2016 이슈라고 한다. (댄 아브라모프도 18일 전에 코멘트를 달았는데, 지금 내 이슈에는 전혀 도움이 되지 않는다.)
문제는 react-snap으로 렌더된 html에 muted 속성이 없어, 정작 웹 브라우저는 autoplay 속성이 있어도 자동 재생을 하지 않는다. 😡 왜why 지금now 알았을까? 클라이언트 시점에 렌더할 때에는 해당 video 엘리먼트의 muted property가 제대로 true이다. 단지 html attribute만 없을 뿐이고, 아무튼 그때에는 js 프로세스가 돌고 있으니 브라우저는 이 엘리먼트가 muted인 줄 안다. 지금은 모르고,
그러므로 나는 이렇게 하기로 하였다.
const maybeSSR = rootElement.hasChildNodes();
maybeSSR && document.querySelectorAll('video').forEach((video) => {
video.muted = true;
});아 이제 잘 된다. 평온하게 월요일을 맞이할 수 있겠다.
