새로운 프로젝트 하나 진행도중에, 아이폰(iOS)의 Safari(사파리) 에서는 video 태그의 autoplay 가 먹히지 않는 것으로 확인이 되었다..😂
이 경우, 구글서치를 많이 해봤는데 대부분 muted가 안먹혀있어서 되지않는다라는 내용이였는데...
코드 내에서도 해당 코드를 이미 넣었는데도 말이다 ㅠㅠ
<video loop="loop" muted="muted" autoplay="autoplay">
이 경우엔, 좀 더 깊숙하게 찾아보고 공부해보니, loop / muted / autoplay는 정상적으로 작동되고 있음을 확인하였고,
만약, 크롬(Chorme) 에서 autoplay가 되지 않는경우 muted를 넣어주면 해결이 된다! (누군가에게 도움을.. 🙄)
"iOS Safari Video Tag Autoplay Not Working" 이라는 내용으로 찾아보면 해당 오류들에 고생하시는 개발자분들이 많이 계시기도 하다...
정답은, Playsinline 을 추가로 넣어주는 것이다.
PC, 안드로이드, iOS10 미만버전들은, 위 코드로만 해도 충분히 처리된다.
iOS11 버전 이후는, playsinline 을 넣어주면 된다.
<video loop="loop" muted="muted" autoplay="autoplay" playsinline>
참고링크
- medium.com/code-divoire/autoplaying-inline-videos-on-iphone-ios-10-using-angular-d4e2eaba2164
- developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-playsinline
참고하면 좋을만한 링크 2개를 공유 해드려본다!
모바일의 모든 환경을 맞춰가는 반응형 개발 하는 개발자/디자이너분들 화이팅... 🤣😥