아랄라랄라
R 스토리
아랄라랄라
전체 방문자
오늘
어제
  • All (197)
    • Web (144)
      • Markup | WEB (9)
      • Styles (45)
      • javascript (32)
      • jquery (28)
      • vue (16)
      • react (10)
      • more (4)
    • IT (31)
      • CS (3)
      • git hub (5)
      • UI | UX (18)
      • more (5)
    • ETC (22)
      • 이슈노트 (12)
      • 스터디 (10)
      • 아랄라 ☞☜ (0)
      • JOB🛠 (0)

인기 글

반응형
hELLO · Designed By 정상우.
아랄라랄라

R 스토리

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

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

2025. 4. 11. 11:08

 

 

 

 

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를 사용해 테두리 완전히 제거

 

 

 

 

 

 

 

 

 

 

 

 

해결-✨

 

 

 

728x90
저작자표시 (새창열림)

'ETC > 이슈노트' 카테고리의 다른 글

[이슈노트] iOS 이슈 모음 #9 (15 이하에서 mask 이슈)  (2) 2024.10.25
[이슈노트] iOS 이슈 모음 #8 (14 이하에서 gap 이슈)  (0) 2024.04.19
[이슈노트] iOS 이슈 모음 #7 (구버전에서 swiper 터치 슬라이드 이슈)  (0) 2023.04.10
[이슈노트] iOS 이슈 모음 #6 (letter-spacing, position: sticky, label 텍스트 줄바꿈)  (0) 2022.11.17
[이슈노트] iOS 이슈 모음 #5 (가로모드 여백, 확대)  (0) 2021.11.11

티스토리툴바