[HTML/CSS]투명도 있는 비디오를 활용하고 싶을때(WebM)

 

 

안녕하세요 무택입니다 :)

오늘은 투명도 있는 영상을 웹에서 보여줄 때 어떻게 보여줄 수 있는지 알아보도록 하겠습니다. 결론부터 말씀드리면 WebM이란 포맷을 사용하면 되는데 아래에서 자세한 내용을 살펴봅시다👍

 

투명도 있는 동영상을 찾아보려 했으나 찾을 수가 없어 실제 적용 예시는 제외하게 되었습니다😢

그래도 아래 내용을 따라 하면 적용할 수 있으니 잘 살펴봐주세요

 

 

개념설명

WebM은 동영상 포맷입니다.

MP4, MOV, AVI 같은 포맷 중에 하나인 셈이죠. 이 포맷은 구글에서 지원하고 개발한 오픈소스 포맷입니다.(킹갓구글)

이 포맷은 이미지에서 투명도를 활용하려면 PNG를 쓰듯 동영상에서 투명도를 활용하려면 WebM을 쓴다고 생각하면 됩니다.

 

장점은 압축률이 좋아서 파일의 크기가 작습니다. 웹 환경에서 최적화된 파일이죠. 단점은 나온 지 10년이나 됐지만 브라우저 호환성이 100%는 아니라는 점입니다.

위 이미지를 보면 알 수 있듯 그래도 최신 브라우저는 다 지원하니 걱정할 필요는 없습니다. 하지만 모바일 환경에서는 상황에 따라 힘들 수도 있을 것 같네요

 

WebM변환 방법

1. MP4변환 사이트에 들어가 줍니다.

 

2. 제일 상단에서 사용할 파일을 선택하고 WebM으로 변환을 눌러줍니다.

 

 

3. 파일을 업로드하고 기다리면 WebM파일을 만들어줍니다.

그럼 파일을 눌러 다운로드해서 사용하면 끝!

 

그리고 아래같이 `video`태그를 이용해서 파일을 넣어주면 투명도 있는 영상을 잘 활용할 수 있습니다.

<video muted autoplay loop>
  <source src="./video_name.webm" type="video/mp4">
</video>