[React] Chrome에서 video tag autoplay 오류 해결

안녕하세요, 황대성입니다!

 

이 포스팅은 다음과 같은 순서로 진행됩니다.

---

목차

1. 발생한 오류
2. 해결 방법

---

발생한 오류

 

영상을 자동으로 재생하기 위해 video tag에 autoplay를 준 코드를 작성하였다.

해당 예시 코드

이렇게 코드를 작성해서 다양한 환경에서 테스트를 해보았다.

 

사파리, 엣지, 파이어폭스에서 정상적으로 잘 작동되었다.

하지만 Chrome(크롬) 브라우저에서만 자동으로 재생이 되지 않았다.

---

해결 방법

 

재생하려는 비디오를 음소거하거나, 재생하려는 비디오의 음량이 0이여야합니다.

 

그래서 위의 코드를 아래와 같이 변경하였습니다.

변경한 코드

---

해결 방법은 굉장히 간단하지만, 원인을 모르면 정말 답답한 오류라서 포스팅 해보았습니다.

 

모두 즐코합시다~

 

참고한 사이트

 

video 태그 autoplay 재생이 안될때 (Chrome / Safari) - https://blog.edit.kr/entry/video-태그-autoplay-재생이-안될때-Chrome-Safari