크로스 브라우저 지원을 방해하는 동안 투명성으로 비디오를 오버레이합니다

디자인과 관련하여 웹 사이트가 점점 더 역동적이되면서 때로는 복잡한 애니메이션 요소를 통합해야 할 필요가 있습니다. CSS 전환에서 캔버스의 3D 렌더링 및 애니메이션 SVG로의 여러 가지 방법이 있습니다. 그러나 는 다소 효율적일 수 있고 그들과 함께 시각적으로 가능한 모든 것이 가능하기 때문에 종종 더 쉽습니다.

그러나 해당 비디오에 투명한 배경이 필요한 경우 오버레이 및 페이지의 다른 컨텐츠와 상호 작용할 수 있도록 어떨까요? 가능하지만 까다로울 수 있습니다. 특히 크로스 브라우저. 그것을 탐구합시다.

여기 예입니다

투명한 비디오 오버레이가 어떻게 작동하는지 확인하기 위해 재미 있고 관련성이 모두 느껴지는 예를 준비했습니다. 아이디어는 비디오를 인터랙티브 컨텐츠와 통합하여 슬라이더가 발전함에 따라 비디오의 컨텐츠가 변경되도록하는 것입니다. 오버레이에 개에 대한 실제 비디오가 달린 슬라이더 광고 개밥이며 현실적이고 귀여운 개가 전환율을 향상시킬 것이라고 확신합니다!

이 기사와 함께이 데모를 직접 재현 할 수 있습니다. 이와 같은 비디오를 만들기 위해 필요한 것 중 일부는 "이미지 시퀀스"입니다 (알파 트랜스 펜트 이미지가 비디오로 함께 꿰매겠습니다). 예제에 사용한 이미지를 제공하고 있습니다.

이미지 다운로드

가능성 탐색

이 효과를 달성하기 위해 페이지에 투명한 배경으로 애니메이션 콘텐츠를 삽입 할 수있는 NY 종류의 솔루션을 검색하기 시작했습니다.

gif

첫 번째는 GIF 였습니다 . GIF 형식은 30 년 전에 도입되었지만 여전히 널리 사용됩니다. 불행히도, 그것은 그 한계가 있습니다. 간단하고 작은 애니메이션 그래픽에 완벽하게 작동하지만 화려하고 긴 비디오 장면에는 적합하지 않으며 색상 공간이 제한되어 있으며 복잡한 비디오의 크기가 많이 커집니다.

apng

내가 본 다음 옵션은 APNG 였습니다 . APNG는 어떤 이유로 든 GIF만큼 인기가 없지만 훨씬 좋습니다. APNG는 24 비트 이미지와 8 비트 투명성을 지원하면서 애니메이션 GIF 파일과 유사하게 작동합니다. 또한 일반 PNG와 후진 호환입니다. APNG가 지원되지 않으면 첫 번째 프레임이 표시됩니다. 인기있는 브라우저에서 지원하지만 Internet Explorer 11에서는 지원하지 않습니다 (예, 일부 사람들은 여전히이를 지원해야합니다). 잠시가는 길처럼 보였지만 파일 크기와 성능에 만족하지 않았습니다.

재미있는 사실 : Apple은 iOS 10 Imessage 앱에서 애니메이션 스티커에 대한 선호 형식으로 APNG 형식을 채택했습니다.

PNG를 통한 루프

다음으로, 조잡하지만 일하는 아이디어가 마음에 들었습니다. 많은 PNG를 사용하고 자바 스크립트 로 그들을 통과하여 비디오를 모방하십시오. 그러나 많은 데이터 전송 (각 비디오 프레임은 별도의 이미지가 될 것임)과 리소스를 사용하여 애니메이션 (사용자의 배터리를 신속하게 배출하거나 컴퓨터 팬을 미치게 할 수 있음)을 사용해야합니다.

나는 그 아이디어를 빨리 버렸지 만 나중에 유용한 것으로 판명되었습니다. 기사의 끝에서 다시 돌아갈 게요.

알파 투명성이있는 웹

의 모든 형식이 여기에서 실패 했으므로 비디오를 살펴보기 시작했습니다. 2013 년에 게시 된 Chrome Video의 Alpha Transparency에 관한 기사를 찾았으며 Alpha 채널을 사용하여 Webm에 대한 Google 지원을 발표했습니다. 예제를 보여주고 사용 방법에 대한 팁을 공유합니다. 나는 기사를 살펴 보았고 즉시 갈 길처럼 느껴졌습니다. GIF가 5.8MB의 무게, 투명성이있는 웹, 동일한 프레임 속도와 전체 색상을 사용하여 540 KB에 불과했기 때문에 이미지 시퀀스를 Webm으로 변환 한 후에도 더 확신했습니다! 더 나은 성능과 품질을 제공하면서 10 배 이상 작습니다. 엄청난!

기쁨은 오래 지속되지 않았습니다. iOS 전화에서 웹 사이트를 열 자마자 브라우저 호환성을 확인하는 것으로 시작해야한다는 것을 깨달았습니다. 불행히도 Safari (iOS 및 MacOS)는 웹에서 투명성을 지원하지 않습니다. 내 비디오가 Chrome, Firefox 및 Edge에서 완벽하게 작동하는 동안 Safari는 못생긴 검은 배경으로 나를 맞이했습니다.

검색은 계속됩니다…

좋은 해결책

고맙게도, 나는 WWDC 2019에서 iOS 13에서 시작하여 Safari에 대한 Alpha Support와 함께 HEVC 비디오를 발표 한 비디오를 발견했습니다. Webm과 동일한 기능을 제공하지만 Apple 장치에 대한 지원을 제공하는 것처럼 보였습니다. 그래서 하이브리드 솔루션 : HEVC 용 Safari 용 Hevc 및 다른 브라우저 용 웹을 사용하기로 결정했습니다.

완벽한 솔루션처럼 보입니다. 그러나 이제 두 가지 작업이 있습니다.

1. 알파 트랜스 파트럴로 HEVC를 만듭니다
2. 올바른 형식을 제공하기 위해 Safari (및 버전)를 감지하십시오.

투명한 비디오 만들기

Webm 파일 만들기 쉬운 부분부터 시작합니다. 비디오 파일을 작성, 변환 또는 편집하려면 FFMPEG가 친구입니다. 그것은 매우 강력한 오픈 소스 멀티미디어 프레임 워크이며 멀티미디어 파일과 관련이 있다면 많은 것들이 가능하기 때문에 시작하는 것이 좋습니다. FFMPEG가 눈에 띄는 이미지 품질 저하없이 비디오 파일 크기를 10 번 이상 줄이는 데 도움이되었다고 말할 수 있습니다. 그러나 투명성으로 돌아 갑시다.

내 경험상, 애니메이션 요소를 웹 사이트 레이아웃에 포함시켜야한다면 PNG에서 일련의 비디오 프레임으로 얻을 수 있습니다. 내 예제 프로젝트에서 작업하는 동안에도 비디오에서 배경을 제거하는 도구는 일련의 이미지를 생성했습니다. 그래서 나는 우리가 일련의 이미지에서 비디오를 만들고 있다고 가정 할 것입니다 (세트를 다운로드 할 수 있습니다). 그러나 대신 비디오 파일이 있더라도 프로세스가 비슷해 보일 것입니다 (FFMPEG 옵션을 필요에 맞게 조정).

이제 비디오를 만들 준비가되었습니다. 명령 줄을 사용하면 PNG 파일이 포함 된 폴더로 이동하여 다음 명령을 실행합니다.

 FFMPEG -FRAMERATE 25 -I UNSCREEN- =. PNG -C : V LIBVPX -VP9 -PIX_FMT YUVA420P OUTPUT.WEBM

귀하의 요구에 맞게 인수를 조정할 수 있습니다.

• Framerate : 출력 비디오의 1 초에 얼마나 많은 이미지가 사용됩니까?
• -i Unscreen-=. png : 입력 파일 이름 및 형식. 내 파일에는 001에서 150까지의 숫자가 있으므로 = 이름으로 3 자리 숫자를 가진 모든 파일을 선택하는 마스크로 사용했습니다.
• -C : V : 사용할 코덱을 지정합니다. 대부분의 웹 브라우저에서 지원되는 VP9로 비디오가 인코딩되기를 원합니다.
• -pix_fmt : 사용할 픽셀 형식을 지정합니다. CAS에서는 알파 채널을 지원해야합니다. ffmpeg -pix_fmts를 실행하면 모든 지원되는 형식을 볼 수 있습니다.
• output.webm : 원하는 출력 파일 이름을 마지막 인수로 제공합니다.

사용 가능한 옵션이 더 많지만, 아마도 기사를 통과하는 데 하나 이상의 기사가 필요하기 때문에 세부 사항으로 뛰어 들지 않을 것입니다. 예제 명령에 제공된 명령은 사용 사례에 대해 잘 작동합니다.

프로세스가 완료되면 새 output.webm 파일이 표시되며 지원되는 브라우저에서 열면 비디오가 표시됩니다. 쉽지?

HEVC 알파 생성

Webp 파일이 준비되어 있으므로 Alpha Transparency 와 함께 HEVC를 사용할 두 번째 형식으로 이동해야합니다. 불행히도, 글을 쓰는 시점에서 FFMPEG는 HEVC를 지원하지 않으므로 다른 도구를 사용해야합니다. 내가 아는 한, 알파로 HEVC를 만드는 유일한 방법은 Mac에서 Finder 또는 Compressor를 사용하는 것입니다. PC가 있다면 Mac을 가진 사람에게 당신을 위해 그것을 요청해야 할 것입니다. 컴프레서 앱에는 최종 컷 프로가 제공되므로 사용하지 않지만 사용자 지정 설정이 필요한 경우 고려할 가치가 있습니다.

MacOS Catalina 이후 Finder에는 내장 인 Encode Media Tool이 비디오를 변환하기위한 내장 된 미디어 도구가 있습니다. 간단하고 무료이므로 우리의 요구를 충족시킵니다.

Finder는 비디오 파일을 입력으로 기대하므로 먼저 이미지 시퀀스를 Prores 4444로 변환해야합니다. 인코딩 미디어 도구가 비디오 만 허용하지 않기 때문에 중요한 단계입니다. 입력 파일에 대한 올바른 인코딩을 알 때까지 두통을 주었다.

FFMPEG를 사용하여 입력 비디오를 만들 수 있습니다. 웹을 만들 때와 마찬가지로 적절한 인수로 FFMPEG를 실행하면됩니다.

 FFMPEG -FRAMERATE 25 -I UNSCREEN -=. PNG -C : V PRORES_KS -PIX_FMT YUVA444P10LE -ALPHA_BITS 16- 프로파일 : V 4444 -F MOV -VFRAMES 150 OUTPUT.MOV

이 시점부터 Mac이 필요합니다. 그러나 프로세스는 간단하고 터미널에 타이핑하는 것이 포함되지 않으므로 Mac과 함께 비 테크 친구에게 당신을 위해 그것을하도록 요청하더라도, 나는 그들이 관리 할 수 ​​있다고 확신합니다.

PRORES4444 비디오가 준비되면 Finder의 포함 폴더로 이동하고 마우스 오른쪽 버튼을 클릭하고 상황에 맞는 메뉴에서 선택한 비디오 파일을 선택할 수 있습니다.

창이 나타납니다. 원하는 HEVC 품질 (선택할 두 가지가 있음)을 선택하고 투명성을 보존하는 옵션을 확인하십시오. 그런 다음 "계속"버튼을 클릭하십시오.

잠시 후에 알파와 함께 HEVC로 인코딩되는 새 파일이 표시됩니다. 끝났어! Safari 에서이 파일을 열면 투명성이 작동하는지 확인합니다.

마지막으로, 웹 사이트에서 비디오를 사용할 시간입니다!

모든 브라우저에 투명한 비디오를 제공합니다

처리해야 할 사항이 하나 더 있습니다. 일부 브라우저는 웹 또는 HEVC 자체를 지원 하지만 투명성이 없습니다 . 해당 브라우저는 비디오를 재생하지만 알파 채널 대신 검은 배경으로 재생됩니다. 예를 들어, Safari 12는 투명성없이 HEVC를 재생합니다. 그것은 우리에게 용납 할 수 없습니다.

일반적으로 요소를 사용하여 비디오를 여러 형식과 함께 폴백으로 제공하고 브라우저는 지원하는 브라우저를 선택합니다. 그러나 특정 사파리 버전에서 HEVC 만 표시하려면 JavaScript를 사용하여 비디오 SRC 속성을 설정해야합니다.

투명성이있는 HEVC는 iOS 13과 Mac Safari 13에서 지원되므로이를 감지하여 시작하겠습니다. 지원을 기반으로 웹 사이트 기능을 조정하는 권장 방법은 사용자 에이전트를 보지 않고 API의 존재를 감지하는 것이지만 브라우저가 비디오 형식의 투명성을 지원하는 경우 간단한 방법을 찾지 못했습니다. 대신, 나는 내 자신의 솔루션을 생각해 냈습니다. 예쁘지는 않지만 일을합니다.

 함수 supportshevcalpha () {
  Const Navigator = Window.Navigator;
  const ua = navigator.useragent.tolowercase ()
  const hasmediacapabilities = !!
  const issafari = ((ua.indexof ( 'safari')! = -1) && (!
  Issafari && hasmediacapabilities를 반환합니다
}

이것은 구형 버전에서는 지원되지 않는 Navigator.mediacapabilities를보고 브라우저가 전혀 Safari임을보고 Safari 13 이상을 대상으로합니다. 함수가 True가 반환되면 HEVC 알파와 함께 가면 좋습니다. 다른 경우에는 Webm 비디오를로드하겠습니다.

다음은 HTML에서 어떻게 결합되는지에 대한 예입니다.

  

<cript>
const player = document.getElementById ( 'player');
player.src = supportshevcalpha ()? 'output.mov': 'output.webm';
스크립트></cript>

비디오 요소에 대한 루프 음소거 autoplay playsinline 인수에 대해 궁금한 점이 있다면 GIF와 같은 경험을 복제하는 것입니다.

• 음소거되지 않으면 비디오는 사용자 상호 작용없이 재생되지 않습니다.
• iOS의 PlaySinline을 사용하면 비디오가 전체 화면에서 열리지 않고 레이아웃의 위치에서 바로 재생됩니다.
• 루프를 사용하면 비디오가 계속 반복됩니다.
• AutoPlay를 사용하면 페이지로드에서 비디오를 자동으로 재생하기 시작합니다 (우리가 자리 잡은 한).

그게 다야! 우리는 투명한 비디오를위한 가볍고 성능 및 고품질 솔루션을 가지고 있으며, 대부분의 최신 브라우저 (최소한 최근 두 버전의 Chrome, Firefox, Safari 및 Edge)에서 작동합니다. 우리는 기본 HTML 및 CSS를 추가하여 정적 컨텐츠를 통합하고 조금 더 실제 생활을하거나 데모에있는 것과 동일한 아이디어를 사용할 수 있습니다. 그거 나쁘지 않았어?

이봐,하지만 IE 11은 어떻습니까? 내 회사 전체가 그것을 사용하고 있습니다!

일반적으로 이와 같은 기능을 최신 브라우저로 제한하고 IE에 비디오를 숨기는 것이 좋습니다. 비디오는 아마도 웹 사이트의 중요한 요소가 아닐 것입니다. 그러나 나는 IE 11 지원이 필수였던 상업 프로젝트에서 일했고 투명한 비디오를 보여주기 위해 무언가를 알아 내야했습니다. 결국, 나는 JavaScript로 PNG 이미지를 순환하게되었습니다. 프레임의 양을 줄이고 타이머를 사용하여 프레임을 전환했습니다. 물론, 성능은 끔찍했지만 효과가있었습니다. 이 비디오는 전체 디자인에 매우 중요했기 때문에 우리는 의도적으로 IE 11의 공연을 희생하여 전체 경험을 제공하기로 결정했습니다.

요약

Alpha Transparent Video의 아이디어를 조사하는 데 시간을 절약했으며 이제 웹 사이트에 이와 같은 애니메이션 요소를 통합 할 수 있기를 바랍니다. 언젠가는 필요합니다!

투명한 비디오를 사용하는 방법에 대한 다른 아이디어가 있습니까? 아니면 이미 그것에 대한 경험이 있습니까? 의견에 알려주세요.

위 내용은 크로스 브라우저 지원을 방해하는 동안 투명성으로 비디오를 오버레이합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!