[이슈노트] iOS 이슈 모음 #10 (video 자동 재생, line 이슈)

 

 

 

 

ios에서 비디오 자동재생이 화면에서 그려지는게 아니라 새창(?)에서 돌아간다.

확인해보니 iOS의 Safari에서 <video> 요소가 자동재생될 때 전체화면으로 전환되는 문제는 Apple의 정책 때문이라고 한다.

기본적으로 iOS Safari에서는 사용자가 직접 재생하지 않는 한, 비디오가 자동으로 전체 화면이 되는 경우가 있다.

 

 

 

---

 

 

해결 방법 👉

 

1. playsinline 속성 추가
iOS Safari에서 <video>가 자동 전체화면이 되는 것을 방지하려면 playsinline 속성을 추가해야 한다.

 

 

2. muted 속성 확인
iOS에서는 자동 재생하려면 muted 속성이 반드시 필요하다. 이미 설정되어 있으므로 이 부분은 유지해야 한다다.

 

 

3. preload 속성 설정
비디오가 미리 로드되도록 preload="auto"를 사용하는 것도 도움이 될 수 있다.

 

 

<video width="188" height="188" loop autoplay muted playsinline preload="auto" 
       poster="@@CDN_PATH/image/v3/randombox.png">
    <source src="@@CDN_PATH/image/v3/randombox.MP4" type="video/mp4">
    브라우저에서 지원되는 포맷이 아닙니다.
</video>

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

수정했더니 자동 재생은 되는데 비디오에 검정 테두리가 생겼다. 😥

 

 

 

 

 

왜이래 정말..

 

 

 

 

 

비디오 주변에 흐릿한 테두리(박스)가 보이는 문제는 iOS Safari에서 <video> 요소의 배경색, 테두리 효과, 또는 하드웨어 가속 문제로 인해 발생할 가능성이 크다.

 

 

 

 

이는 css로 수정한다.

 

 

 

video {
    background-color: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    transform: translateZ(0);
    will-change: transform;
    mix-blend-mode: multiply;
    -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
}

 

 

1. 배경을 투명하게 설정 (background-color: transparent;)
2. 하드웨어 가속 활성화 (transform: translateZ(0);)
3. 불필요한 테두리 제거 (border, outline, box-shadow)
4. mix-blend-mode를 사용해 자연스럽게 배경과 섞기
5. -webkit-mask-image를 사용해 테두리 완전히 제거

 

 

 

 

 

 

 

 

 

 

 

 

해결-✨