새로운 프로젝트 하나 진행도중에, 아이폰(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
Autoplaying inline videos on iPhone iOS 10 using Angular
Starting with iOS 10, Safari on mobile (iPhone and iPad) started allowing developers to autoplay videos inline provided the video you are…
medium.com
- developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-playsinline
: The Video Embed element The HTML Video element ( ) embeds a media player which supports video playback into the document. You can use for audio content as well, but the element may provide a more appropriate user experience. The source for this interacti
developer.mozilla.org
참고하면 좋을만한 링크 2개를 공유 해드려본다!
모바일의 모든 환경을 맞춰가는 반응형 개발 하는 개발자/디자이너분들 화이팅... 🤣😥