[Cross Browsing] webm 영상의 투명도를 지원하지 않는 Safari 브라우저

WebM 이란?

먼저 WebP를 알아보자.

WebP 포맷은 2010년 구글에서 개발한 이미지 포맷으로 웹 환경에서 JPEG 및 PNG 포맷을 대체할 목적으로 개발되었다.
손실 압축과 비손실 압축을 둘 다 지원하며, 흔히 사용되는 JPEG 및 PNG 포맷보다 압축 효율이 좋다.
 
또한 애니메이션 GIF 파일을 대체하기 위해, WebP 포맷은 애니메이션 기능도 제공한다.
이미지의 속성에 따라 다르기는 하나, 애니메이션 WebP 파일은 같은 내용의 GIF 파일보다 파일 크기가 1/5 ~ 1/10 정도로 작다.
 
과거에는 WebP 포맷을 지원하는 브라우저가 많지 않았지만, 최근에는 Chrome, Firefox, Edge 등 주요 브라우저라면 대부분 WebP 포맷을 지원한다. 아이폰의 경우 2020년 9월 출시된 iOS14부터 WebP 포맷을 지원하며, Microsoft의 Internet Explorer는 WebP 포맷을 지원하지 않지만 대신 Edge가 WebP 포맷을 지원한다.

2022년 6월 15일에 Internet Explorer 11 데스크톱 애플리케이션이 Windows 10*의 특정 버전에 대한 지원을 종료했다.

그렇다면 WebM은?

WebM 포맷 역시 WebP 포맷처럼 웹 환경에서 사용할 목적으로 구글에서 개발한 동영상 포맷이다.
VP8 및 VP9 비디오 코덱을 사용하며, H.264 코덱과 비슷하거나 더 좋은 압축 효율을 보여준다.
 
WebM 포맷의 파일은 비디오 파일이기 때문에 HTML5 의 <video> 태그를 사용해 브라우저에서 재생할 수 있다.
현재 Internet Explorer를 제외한 거의 모든 브라우저에서 WebM 포맷을 지원한다.
(단 VP9을 사용한 파일은 VP8을 사용할 때보다 압축 효율이 더 좋지만 Safari에서는 재생할 수 없다.)
 
호환성이 좋아 영상 확장자로 주로 쓰이는 mp4는 알파채널(rgba의 a)이 없기 때문에 투명 색상을 지원하지 않는다. 하지만, WebM은 알파 채널이 존재하기 때문에 배경이 투명한 동영상을 만들 수 있다.
 
만약 투명한 배경이 포함된 동영상을 만들어야 한다면 WebM 포맷을 사용해야 한다.
 

WebM의 브라우저 호환성

이슈

아래와 같이 배경이 투명 색상인 webm 영상이 있다. (링크)

영상출처 : https://codepen.io/mortenjust/pen/BaLrjzm

아래와 같이 DeskTop의 Safari 에서는 배경이 투명으로 노출되지 않는 문제가 발생했다.
이 글을 Safari에서 보고 있다면, 위 영상의 배경이 아래표와 같은 검정색으로 보이고 있을 것..

 

Chrome, Edge 등 chromium 기반 브라우저	Safari

사실 Chrome과 Safari는 투명도를 지원하는 영상 타입이 다르다.

• Chrome은 알파값과 함께 VP9를 지원하지만 Safari는 지원하지 않는다.(Chrome은 webm 타입의 파일로 투명도를 제공한다.)
• Safari는 알파값과 함께 HEVC를 지원하지만 Chrome은 지원하지 않는다.(safari는 mov 타입의 파일로 투명도를 제공한다.)

Safari에서는 mov 타입(HEVC엔진)으로 알파값을 지원하기 때문에, VP8 및 VP9 비디오 코덱을 사용하는 WebM에서는 알파값을 인식하지 못한다. ('Can I Use'에서 Safari on iOS가 줄무늬(부분지원)인 이유가 이 때문인가...)

해결 방법

 

mov를 지원하는 환경에서는 투명한 배경을 가지는 mov를 불러오고, webm을 지원하는 환경에서는 투명한 배경을 가지는 webm을 불러온다.

To be continue...

사실 알파값 지원 여부 외에도 크로스 브라우징 이슈가 존재하는데...
모바일에서는 WebM이 어떻게 보이는지 다음 글에서 알아보자.
 

Reference

꿀캠 - GIF, WebP, WebM 포맷

"webm" | Can I use... Support tables for HTML5, CSS3, etc

Mockup Generator & Animator 3D<!-- --> - Rotato