178. (TWOK/ERROR) [Web] 모바일 웹 브라우저에서 비디오 자동 재생 되지 않는 이슈 - video auto play not working

---

[환경 설정 및 설명]

​

프로그램 : Intelij

​

설 명 : [Web] 모바일 웹 브라우저에서 비디오 자동 재생 되지 않는 이슈 - video auto play not working

---

[에러 원인]

​

1. 모바일 브라우저 (크롬, 사파리) 및 웹뷰에서 비디오 자동 재생이 되지 않는 이슈 발생

​

<video controls autoplay>

<source src="assets/video/test.mp4" type="video/mp4" />

지원 가능한 영상이 없습니다.

</video>

​

​

2. Chrome 의 자동재생 정책 :

​

>> 오디오 및 비디오 요소에 대한 자동 재생 정책은 Chrome 66에서 시작되었으며 Chrome에서 원치 않는 미디어 자동 재생의 약 절반을 효과적으로 차단합니다

​

>> Web Audio API의 경우 Chrome 71에서 자동 재생 정책이 시작되었습니다. 이는 웹 게임, 일부 WebRTC 애플리케이션 및 오디오 기능을 사용하는 기타 웹 페이지에 영향을 미칩니다

​

>> 음소거된 자동 재생은 언제나 허용됩니다

​

>> 사용자의 제한된 네트워크 상황에서 과도한 데이터 소비를 방지합니다

 

---

[해결 방법]

​

1. 자동 재생 부분에서 음소거 된 auto play 는 지원이 되므로 video 속성에 muted , autoplay 추가해 초기 음소거 모드 자동 재생 실시

​

​

2. 음소거된 화면 UI 를 별도로 표시 한 후 >> 사용자의 음소거 해제 클릭 이벤트 유도

​

​

3. 사용자가 음소거 해제 클릭 수행 시 >> 사운드 재생 실시

​

>> [자바 스크립트 소스 코드]

>> const player = document.getElementById("video");

>> player.muted = false;

 

---

[참고 사이트]

​

https://developer.chrome.com/blog/autoplay/?hl=ko

Autoplay policy in Chrome - Chrome for Developers

---