사파리에서 webm 영상 백그라운드가 투명하게 나오지 않는 이슈

웹에서 비디오 최적화를 위해서는 webm 확장자를 사용하는 것이 좋았다. 하지만 사파리 브라우저에서 자동 재생 이슈와 배경이 투명한 영상이 정상적으로 보이지 않고 까맣게 백그라운드 처리가 되는 이슈를 발견해서 처리하는 과정을 설명해봤다.

 

비디오 최적화하기

하나의 소스를 제공하는 것이 아니라, 최적화를 위해 여러 영상을 제공하고 브라우저가 렌더링 할 수 있는 영상을 사용한다.

아래의 예시에서는 브라우저가 webm 영상을 렌더링할 수 있는 경우 선택한 영상 파일이다. 그렇지 않으면 다음 요소로 이동하여 두 번째 요소는 mp4 형식의 영상을 가리키게 된다 . 브라우저가 mp4 영상을 렌더링할 수 있는 경우 해당 영상 파일을 사용하고 webm의 용량이 mp4보다 훨씬 작아 우선순위가 높기 때문에 먼저 선언해주면 된다.

<video controls>
  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm">
  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4" type="video/mp4">
  <p>Your browser cannot play the provided video file.</p>
</video>

 

 

자동 재생 정책(링크)

사용자의 관점에서 경고 없이 자발적으로 소음을 내기 시작하는 웹 페이지나 앱은 거슬리거나 불편하거나 불쾌할 수 있다. 그 때문에 브라우저는 일반적으로 특정 상황에서만 자동 재생이 성공적으로 발생하도록 허용한다.

일반적으로 다음 중 하나 이상 이 참인 경우에만 미디어 자동 재생이 허용된다고 가정할 수 있다 .

• 오디오가 음소거되었거나 볼륨이 0으로 설정되어 있는 경우
• 사용자가 사이트와 상호작용 하는 경우(클릭, 탭, 키 누르기 등).
• 사이트가 허용된 경우 이것은 브라우저가 사용자가 미디어를 자주 사용한다고 판단하는 경우, 자동으로 발생하거나 기본 설정 또는 기타 사용자 인터페이스 기능을 통해 수동으로 발생 가능.
• 자동 재생 권한 정책을<iframe>을 사용하여 문서에 자동 재생 지원을 부여하는 경우.

 

 

사파리 브라우저 이슈

내가 적용한 영상이 배경이 투명한 상태에서 오브제가 자동재생으로 움직이는 영상이었는데, 사파리 브라우저에서 배경이 까맣게 보이는 이슈가 있었다. 그래서 이게 사파리 버전 이슈인건가 해서 회사에 있는 몇 가지 브라우저를 버전 별로 확인해봤고 아래와 같은 특징을 발견했다.

 

1. 사파리에서 webm을 불러올 경우 백그라운드가 투명하게 되지 않는 경우, mp4를 불러오면 배경이 투명한 정상적으로 영상 재생됨.

• 버전 16.5.1(18615.2.9.11.7)

2. 사파리에서 webm이든 mp4든 NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission. 에러가 나면서 아예 영상이 자동 재생되지 않고 이미지만 보이는 경우 → 사파리 정책에서 자동재생을 막고 있음

• 버전 15.5(17613.2.7.1.8)
• 버전 16.3(18614.4.6.1.6)

 

해결방법

완벽하게 처리는 될 수 없었지만, 최대한 webm을 로드할 수 있도록 + 유저입장에서 불편하지 않도록 하는 방향으로 아래와 같이 처리했다.

1. 영상은 webm과 mp4를 기본적으로 제공하는 걸로 했다.
2. webm를 소스를 우선적으로 불러와 재생한다. 최적화를 위해!
3. 브라우저를 detect하여 mac OS + safari의 경우 mp4소스를 우선적으로 불러와 재생하도록 한다. (영상은 webm에 비해 무겁겠지만 어쩔 수 없었다ㅠㅠ)
4. 2번 혹은 3번에서 play에 에러가 있으면 영상없이 대체 이미지가 fallback 되도록 했다.

 

 

출처

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
• https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide

Autoplay guide for media and Web Audio APIs - Web media technologies | MDN

<video>: The Video Embed element - HTML: HyperText Markup Language | MDN