<video>태그에 autoplay,loop,muted등의 속성값을 주는건 흔한 일인데 어느순간부터 ios 비디오 정책으로 인해 아이폰등의 디바이스에서 해당 속성값을 사용할 경우 비디오가 전체화면으로 재생된다.
이 부분은 사용자들로 하여금 굉장히 좋지않은 사용성을 제공함으로 반드시 개선해줘야하는 부분이다.
아주 간단하게 개선할 수 있다.
<video src="video.mp4" autoplay loop muted playsinline></video>
기존에 자주 쓰는 속성에 [playsinline] 속성을 추가했다.
위의 속성을 추가하는 것만으로 IOS에서 전체화면으로 자동재생을 막고 정상적으로 작동할 수 있는 것을 확인 할 수 있다.
반응형
'퍼블리셔 Note > HTML' 카테고리의 다른 글
| [HTML] 유튜브 썸네일 이미지 가져오기 (0) | 2022.05.26 |
|---|---|
| [meta] 모바일 크롬 기반 브라우저에서 url창 영역 색상 바꿔주는 <mete> (0) | 2022.04.11 |
| [HTML] 특정 요소의 범위를 표현할 때 쓰는 'meter' (0) | 2022.03.28 |
| [HTML5]작업의 진행률 표시줄을 나타내는 태그 'progress' (0) | 2022.03.18 |
| [HTML5] 스크립트 없이 동적으로 클릭시 세부 사항을 보여주는 태그 'details' (0) | 2022.03.18 |