[HTML5] video tag 크롬(chrome) autoplay + muted 버튼 음소거 해제 삽질기

삽질기

다음과 같은 코드로 페이지가 로딩되자마자 video 가 autoplay되는 기능을 구현하고 있었습니다.

 

하지만 역시나 마음처럼 되지 않았는데, 다른 브라우저에서는 동작하지만 chrome 에서만 동작하지 않는 상황이 벌어졌습니다... 

 

 

---

 

대안

그래서 열심히 구글링을 하던 중...

 

d0gf00t.tistory.com/36

[번역] 자동 재생 정책 변경사항 Autoplay Policy Changes

위와 같은 좋은 글을 보았고 크롬에선 자동재생 기능을 "사용자의 제한된 네트워크 상황에서 과도한 데이터 소비를 방지" 를 명목으로 지원하지 않는다는 것을 알게되었습니다.

 

위의 글을 읽어보면 몇 가지 해결방안을 제안하고 있는데, 그 중 사용자가 음소거를 해제하도록 유도하는 버튼을 넣는 것이 크롬 브라우저 정책을 위반하지 않는 좋은 방향성이라 판단되어 정리합니다.

 

다음과 같이 두가지 스텝으로 진행됩니다.

 

1. 음소거가 된 autoplay는 지원하므로, `muted` + `autoplay` 로 구현
2. 이후 사용자가 버튼을 클릭시 음소거 해제 하기

위와 같이 진행되며 다음과 같은 코드로 해결하실 수 있습니다.

 

결과화면

처음엔 음소거 autoplay가 되며, 옆의 unmute 버튼으로 음소거를 해제할 수 있습니다.

 

 

---

 

참조문서

poiemaweb.com/html5-tag-image-multimedia#22-%EB%B9%84%EB%94%94%EC%98%A4

d0gf00t.tistory.com/36