비디오에 대한 클라우드 트릭-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

비디오에 대한 클라우드 트릭

Joseph Gordon-Levitt

Apr 01, 2025 am 12:32 AM

비디오에 대한 클라우드 트릭

비디오를 만드는 데는 시간이 많이 걸립니다. 잘 만들어진 5 분짜리 비디오는 계획, 녹음 및 편집하는 데 몇 시간이 걸릴 수 있습니다.이 비디오는 사이트의 다른 모든 비디오와 일치하는 비디오를 만들기 시작하기 전 입니다.

Jamstack Explorers Project (웹 개발자를위한 비디오 중심의 교육 리소스)를 사용했을 때, 우리는 품질과 배송의 올바른 균형을 찾기를 원했습니다. 비디오 제작 과정에서 품질을 희생하지 않고 비디오 컨텐츠를 만드는 데 필요한 시간과 수의 수를 줄이기 위해 무엇을 자동화 할 수 있습니까?

클라우드의 도움으로 비디오를 만드는 사람들을위한 추가 편집 작업을 추가하지 않고 모든 비디오 컨텐츠에서 일관된 브랜딩 접근 방식을 제공 할 수있었습니다. 그리고 보너스로서, 앞으로 브랜딩을 업데이트하면 전체 사이트의 모든 비디오 브랜딩을 한 번에 한 번에 업데이트 할 수 있습니다. 비디오 편집이 필요하지 않습니다!

“비디오 브랜딩”은 무엇을 의미합니까?

Explorers 사이트의 모든 비디오가 모두 함께 맞는 것처럼 느끼게하려면 각 비디오에 몇 가지 일반적인 작품이 포함되어 있습니다.

제목 장면
Jamstack Explorers 브랜딩을 보여주는 짧은 소개 범퍼 (비디오 클립)
다음 비디오로 계산되거나 미션의 마지막 비디오라면 "미션 성취"를 보여주는 짧은 아웃트로 범퍼

끝까지 건너 뛰기 : 브랜드 비디오가 어떻게 보이는지는 다음과 같습니다.

브랜딩 추가의 영향을 보여주기 위해 여기에 Jamstack Explorers의 비디오 중 하나가 없습니다 .

이 비디오 (그리고 벤 홍 의이 뷰 미션)는 합법적으로 뛰어납니다! 그러나 조금 갑자기 시작하고 끝나고, 우리는이 비디오가 어디에 살고 있는지에 대한 감각이 없습니다.

우리는 Adam Hald와 협력하여 각 비디오에 장소 감각을 부여하는 브랜드 비디오 자산을 만들었습니다. 모든 Explorers 브랜딩이 적용된 동일한 비디오를 확인하십시오.

우리는 같은 훌륭한 콘텐츠를 얻지 만 이제는 이것이 더 큰 이야기의 일부인 것처럼 느끼게하는 약간의 추가 va-va-voom을 추가했습니다.

이 기사에서는 Cloudinary를 사용하여 모든 비디오를 자동으로 사용자 정의하는 방법을 살펴 보겠습니다.

Cloudinary는 어떻게이를 가능하게합니까?

Cloudinary는 클라우드 기반 자산 전달 네트워크로 미디어를 조작하고 변환 할 수있는 강력한 URL 기반 API를 제공합니다. 그것은 모든 종류의 자산 유형을 지원하지만 실제로 빛나는 곳은 이미지와 비디오와 함께 있습니다.

Cloudinary를 사용하려면 무료 계정을 만들고 자산을 업로드하십시오. 그런 다음이 자산은 Cloudinary URL에서 사용할 수있게됩니다.

 https://res.cloudinary.com/netlify/image/upload/v1605632851/explorers/avatar.jpg
                           ^^^^^^^ ^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
                              | | |
                              VVV
                      클라우드 (계정) 이름 버전 (선택 사항) 파일 이름

이 URL은 원래 이미지를 가리키며 비디오에 대한 클라우드 트릭 태그 및 기타 마크 업으로 사용할 수 있습니다.

파일 크기를 줄이기 위해 파일 형식 및 품질을 동적으로 조정

웹 사이트 에서이 이미지를 사용하고 사이트 성능을 향상시키려는 경우 Webp, AVIF 등과 같은 차세대 형식을 사용 하여이 이미지의 크기를 줄이기로 결정할 수 있습니다. 이 새로운 형식은 훨씬 작지만 모든 브라우저에서 지원되지는 않습니다. 이는 일반적으로 도구를 사용 하여이 이미지의 여러 버전을 다른 형식으로 생성 한 다음 요소 또는 기타 특수 마크 업을 사용하여 이전 브라우저의 JPG 폴백을 제공합니다.

Cloudinary를 사용하면 URL에 변환을 추가하는 것입니다.

 https://res.cloudinary.com/netlify/image/upload/q_auto,f_auto/v1605632851/explorers/avatar.jpg
                                                ^^^^^^^^^^^^^
                                                      |
                                                      다섯
                                    자동 품질 및 형식 변환

브라우저에서 우리가 보는 것은 시각적으로 동일합니다.

파일 형식 및 품질 설정을 자동 (f_auto, q_auto)으로 설정하면 Cloudinary는 클라이언트가 지원하는 형식을 감지하고 합리적인 품질 수준에서 가장 효율적인 형식을 제공합니다. 예를 들어 Chrome 에서이 이미지는 97.6kb JPG에서 15.4KB 웹으로 변환되며 URL에 몇 가지를 추가하는 것입니다!

우리는 여러 가지 방법으로 이미지를 변환 할 수 있습니다!

우리는 크기 조정 (W_150 용 "150px 너비의 크기") 및 색상 효과 (E_Grayscalefor "Grayscale 효과를 적용")를 포함한 다른 변환으로 나아갈 수 있습니다.

 https://res.cloudinary.com/netlify/image/upload/q_auto,f_auto,w_150,e_grayscale/v1605632851/explorers/avatar.jpg

이것은 가능한 것의 작은 맛 일뿐입니다. 더 많은 예를 보려면 Cloudinary Docs를 확인하십시오!

이것을 조금 더 인간으로 읽을 수 있도록 노드 SDK가 있습니다.

우리가 얻을 수있는 것과 같은보다 고급 변형을 위해서는 URL을 직접 작성하면 읽기가 조금 어려워 질 수 있습니다. 우리는 thecloudinary 노드 sdkto를 사용하여 의견을 추가하고 각 변환이 무엇을하고 있는지 설명 할 수있는 능력을 제공했으며, 이는 플랫폼을 유지하고 진화시키는 데 매우 도움이되었습니다.

설치하려면 Cloudinary API 키를 가져 와서 YourConsole에서 비밀을 얻은 다음 NPM을 사용하여 SDK를 설치하십시오.

 # 새 디렉토리를 만듭니다
Mkdir Cloudinary-Video

# 새 디렉토리로 이동합니다
CD Cloudinary-Video/

# 새 노드 프로젝트를 초기화합니다
npm init -y

# Cloudinary 노드 SDK를 설치하십시오
NPM Cloudinary 설치

다음으로 index.jsand라는 새 파일을 작성하십시오.

 const cloudinary = require ( 'cloudinary'). v2;

// TODO이 값을 자신의 클라우드 자격 증명으로 바꾸십시오.
cloudinary.config ({
  cloud_name : 'your_cloud_name',
  api_key : 'your_api_key',
  api_secret : 'your_api_secret',
});

API 자격 증명을 GitHub에 커밋하거나 어디서나 공유하지 마십시오. 환경 변수를 사용하여 안전하게 유지하십시오! 환경 변수에 익숙하지 않은 경우 Colby Fayock은 환경 변수 사용에 대한 소개를 작성했습니다.

다음으로, 약간 더 인간이 읽을 수있는 구성 설정을 사용하기 전과 동일한 변환을 만들 수 있습니다.

 Cloudinary.uploader
  // 첫 번째 인수는 공개 ID (폴더 포함)입니다.
  // 변환하려는 이미지
  . 입구 ( '탐색기/아바타', {
    //이 두 속성은 URL의 시작과 일치합니다.
    // https : //res.cloudinary.com/netlify/image/upload/...
    // ^^^^^^^^^^^^^
    resource_type : 'image',
    유형 : '업로드',

    // "eger"
    // 천천히 첫 번째로드 시간
    열렬한: [
      {
        fetch_format : 'Auto',
        품질 : '자동',
        너비 : 150,
        효과 : '그레이 스케일',
      },
    ],,

    //이 변형 된 이미지가 동일하게 다시 실행되지 않도록 캐시를 허용합니다.
    // 계속해서 변환
    덮어 쓰기 : 거짓,
  })
  . (결과) => {
    Console.log (결과);
  });

TypingNode Index.jsin 으로이 코드를 실행하겠습니다. 출력은 다음과 같이 보입니다.

 {
  asset_id : 'fca4abba96ffdf70ef89498aa340ae4e',
  public_id : '탐색기/아바타',
  버전 : 1605632851,
  version_id : 'b8a923931af20404e89d03852ff1bff1',
  서명 : 'E7201C9AB36CB5B6A0545CEE4F5F8EE27FB7F99F',
  너비 : 300,
  높이 : 300,
  형식 : 'JPG',
  resource_type : 'image',
  create_at : '2020-11-17T17 : 07 : 31Z',
  바이트 : 97633,
  유형 : '업로드',
  URL : 'http://res.cloudinary.com/netlify/image/upload/v1605632851/explorers/avatar.jpg',
  Secure_url : 'https://res.cloudinary.com/netlify/image/upload/v1605632851/explorers/avatar.jpg',
  Access_Mode : 'public',
  열렬한: [
    {
      변환 : 'e_grayscale, f_auto, q_auto, w_150',
      너비 : 150,
      높이 : 150,
      바이트 : 6192,
      형식 : 'JPG',
      URL : 'http://res.cloudinary.com/netlify/image/upload/e_grayscale,f_auto,q_auto,w_150/v1605632851/explorers/avatar.jpg',
      Secure_url : 'https://res.cloudinary.com/netlify/image/upload/e_grayscale,f_auto,q_auto,w_150/v1605632851/explorers/avatar.jpg'
    }
  ]]
}

ElegerProperty에서 변환 된 이미지를 볼 수있는 전체 URL과 함께 변환이 표시됩니다.

노드 SDK는 아마도 이와 같은 간단한 변환에 대한 과잉 일 것입니다. 비디오 브랜딩을 추가하는 데 필요한 복잡한 변환을보기 시작할 때 실제로 편리해집니다.

Cloudinary로 비디오를 변환합니다

Jamstack Explorers에서 비디오를 변환하기 위해 동일한 접근 방식을 따릅니다. 각 비디오는 Cloudinary에 업로드 한 다음 URL을 수정하여 제목 카드 및 범퍼를 크기를 조정하고 조정하고 삽입합니다.

브랜딩을 추가하기 위해 해결해야 할 몇 가지 주요 범주의 변환이 있습니다.

오버레이
전환
텍스트 오버레이
스 플라이 싱

이러한 각 카테고리를 살펴보고 Ben의 비디오에서 Jamstack Explorers 브랜딩을 되풀이 할 수 없는지 확인하십시오! upindex.jsto를 기본 비디오를 변환하여 설정하겠습니다.

 Cloudinary.uploader
  . 입구 ( '탐색기/범퍼', {
    //이 두 속성은 URL의 시작과 일치합니다.
    // https : //res.cloudinary.com/netlify/image/upload/...
    // ^^^^^^^^^^^^^
    Resource_type : '비디오',
   유형 : '업로드',

    // "eger"
    // 천천히 첫 번째로드 시간
    열렬한: [
      {
        fetch_format : 'Auto',
        품질 : '자동',
        높이 : 360,
        너비 : 640,
        Crop : 'Fill', // 비디오가 다른 크기 인 경우 레터 박스를 피하십시오.
      },
    ],,

    //이 변형 된 이미지가 동일하게 다시 실행되지 않도록 캐시를 허용합니다.
    // 계속해서 변환
    덮어 쓰기 : 거짓,
  })
  . (결과) => {
    Console.log (결과);
  });

Ben의 오리지널 비디오 대신 "범퍼"라는 비디오를 사용하고 있음을 알 수 있습니다. 이것은 우리가 함께 추가 할 때 Cloudinary가 비디오를 주문하는 방식 때문입니다. 다음 섹션에 Ben의 비디오를 추가하겠습니다!

Cloudinary를 사용하여 두 개의 비디오를 사용자 정의 전환과 결합하십시오

범퍼를 추가하려면 두 번째 비디오를 오버레이로 추가하는 EagerArray에 "레이어"를 추가해야합니다.

이를 위해, 우리는 theoverlaytransformation을 사용하고 Tovideo : publicid, whatepublicidis 콜론으로 변환 된 슬래시 (/)가있는 자산의 Cloudinary Public ID를 설정합니다 (:).

또한 두 비디오 사이를 전환하는 방법을 Cloudinary에게 알려야합니다.이 두 비디오는 Luma Matte 라는 특별한 종류의 비디오를 사용하여 비디오의 검은 색 영역으로 하나의 비디오를 마스킹하고 White Area가있는 두 번째 비디오를 사용합니다. 이로 인해 양식화 된 크로스 페이드가 발생합니다.

Luma 무광택이 그 자체로 보이는 것은 다음과 같습니다.

비디오와 전환에는 둘 다 자체 변환이있어서 구름 변환에서 다른 "레이어"로 취급해야합니다. 즉, 별도의 객체로 나누는 다음 각 레이어를 "적용"하기 위해 추가 객체를 추가하여 해당 섹션을 호출하고 메인 비디오에 더 많은 변환을 계속 추가 할 수 있습니다.

Cloudinary에게 이것은 Luma 무광택이며 다른 비디오가 아니라 TheEffectType Totransition을 설정합니다.

index.jsto에서 다음을 변경하십시오.

 const videobasetransformations = {
  fetch_format : 'Auto',
  품질 : '자동',
  높이 : 360,
  너비 : 600,
  작물 : '채우기',
}

Cloudinary.uploader
  . 입구 ( '탐색기/범퍼', {
    //이 두 속성은 URL의 시작과 일치합니다.
    // <https:></https:> ...
    //
    Resource_type : '비디오',
    유형 : '업로드',

    // "eger"
    // 천천히 첫 번째로드 시간
    열렬한: [
      videobasetransformations,
      {
        오버레이 : '비디오 : 탐험가 : LCA-07-Lifecycle-Hooks',
        ... videobasetransformations,
      },
      {
        오버레이 : '비디오 : 탐험가 : 전환',
        효과 : '전환',
      },
      {플래그 : 'layer_apply'}, //  {
    Console.log (결과);
  });

모든 비디오에서 동일한 형식, 품질 및 크기 변환이 필요하므로 videobasetransformations라는 변수로 꺼내서 오버레이를 포함하는 두 번째 객체를 추가했습니다.

우리가 이것을 Node Index.js로 실행하면, 우리가 돌아 오는 비디오는 다음과 같습니다.

나쁘지 않다! 이것은 이미 Jamstack Explorers 사이트의 일부인 것처럼 보이며 전환은 일반적인 범퍼에서 사용자 정의 비디오로 멋진 흐름을 더합니다.

Altro 범퍼 추가는 정확히 동일하게 작동합니다. 엔딩 범퍼와 전환에 대한 또 다른 오버레이를 추가해야합니다. 자습서 에이 코드를 표시하지는 않지만 관심이 있으시면 소스 코드에서 볼 수 있습니다.

텍스트 오버레이를 사용하여 비디오에 제목 카드 추가

제목 카드를 추가하려면 두 가지 단계가 있습니다.

타이틀 카드 배경 역할을하기 위해 짧은 비디오 클립을 추출하십시오.
비디오 제목에 텍스트 오버레이를 추가하십시오

다음 두 섹션은 각 단계를 개별적으로 통과하여 둘 사이의 구별을 볼 수 있습니다.

제목 카드 배경으로 사용할 짧은 비디오 클립을 추출하십시오.

Adam Hald가 Explorers 비디오 자산을 만들었을 때, 그는 제목 카드에 완벽한 별이 빛나는 하늘에 Abeautiful Intro Videothat Opens를 포함 시켰습니다. Cloudinary를 사용하면 별이 빛나는 하늘의 몇 초를 잡고 모든 비디오로 제목 카드로 연결할 수 있습니다!

inindex.js, 다음 변환 블록을 추가하십시오.

 Cloudinary.uploader
  . 입구 ( '탐색기/범퍼', {
    //이 두 속성은 URL의 시작과 일치합니다.
    // https : //res.cloudinary.com/netlify/image/upload/...
    //
    Resource_type : '비디오',
    유형 : '업로드',

    // "eger"
    // 천천히 첫 번째로드 시간
    열렬한: [
      videobasetransformations,
      {
        오버레이 : '비디오 : 탐험가 : LCA-07-Lifecycle-Hooks',
        ... videobasetransformations,
      },
      {
        오버레이 : '비디오 : 탐험가 : 전환',
        효과 : '전환',
      },
      {플래그 : 'layer_apply'}, //  {
    Console.log (결과);
  });

thespliceflag를 사용하여 Cloudinary에게 전환 없이이 비디오를 직접 추가하도록 지시합니다.

다음 변환 세트에서는 전에 보지 못한 세 가지 변환을 추가합니다.

우리는이 비디오 세그먼트에서 사운드를 제거합니다.
우리는 설정 _offsetto3를 설정합니다. 즉, 비디오의 첫 3 초만 얻을 수 있습니다.
우리는 25의 값으로 TheaccelerateEffect를 추가하여 비디오를 25%줄입니다.

RunningNode Index.jswill 이제 4 초 미만의 조용한 별이 빛나는 하늘로 시작하는 비디오를 제공합니다.

Cloudinary를 사용하여 비디오에 텍스트 오버레이를 추가하십시오

마지막 단계는 비디오 제목을 표시하기 위해 텍스트 오버레이를 추가하는 것입니다!

텍스트 오버레이는 다른 오버레이와 같은 동일한 오버 레이 프 로티를 사용하지만 글꼴에 대한 설정이있는 객체를 전달합니다. Cloudinary는 다양한 글꼴을 지원합니다. 결정적인 목록을 찾을 수는 없었지만 많은 Google 글꼴 인 것 같습니다. 사용자 정의 글꼴을 사용하기위한 라이센스를 구입 한 경우 텍스트 오버레이 사업에 사용하기 위해 사용자 정의 글꼴을 Cloudinary에 사용할 수 있습니다.

 Cloudinary.uploader
  . 입구 ( '탐색기/범퍼', {
    //이 두 속성은 URL의 시작과 일치합니다.
    // <https:></https:> ...
    //
    Resource_type : '비디오',
    유형 : '업로드',

    // "eger"
    // 천천히 첫 번째로드 시간
    열렬한: [
      videobasetransformations,
      {
        오버레이 : '비디오 : 탐험가 : LCA-07-Lifecycle-Hooks',
        ... videobasetransformations,
      },
      {
        오버레이 : '비디오 : 탐험가 : 전환',
        효과 : '전환',
      },
      {플래그 : 'layer_apply'}, //  {
    Console.log (결과);
  });

글꼴 크기 및 정렬을 설정하는 것 외에도 타이틀 텍스트가 제목 카드의 측면에 부딪히는 것을 막고 TheCropValue Tofit을 설정하여 더 긴 타이틀을 감싸는 폭을 500px (기본적으로 중앙에 중심으로)를 적용합니다. 우리의 텍스트는 어둡고 별이 빛나는 배경에 대해 텍스트를 볼 수 있습니다.

runnode index.jsto URL을 생성하면 타이틀 카드 및 범퍼를 포함한 완전히 브랜드 비디오가 표시됩니다!

비디오 브랜딩을 한 번 구축하십시오. 어디서나 사용하십시오

범퍼, 전환 및 타이틀 카드를 만드는 것은 많은 일입니다. 고품질 비디오 컨텐츠를 만드는 것도 많은 효과가 있습니다. 이 타이틀 카드와 범퍼를 삽입하기 위해 모든 Jamstack Explorers 비디오를 수동으로 편집해야한다면 실제로 수행했을 가능성은 거의 없습니다.

우리는 비디오를 지속적으로 브랜드로 유지하는 유일한 현실적인 방법은 브랜딩을 추가하는 마찰이 Toreduce라는 것을 알고 있었으며 Cloudinary는 완전히 자동화 할 수 있습니다. 이것은 우리가 수동 단계없이 일관성을 유지할 수 있음을 의미합니다!

추가 보너스로서, 앞으로 제목 카드 나 범퍼를 업데이트하면 코드를 한 곳에서 변경하여 모든 비디오의 모든 브랜딩을 업데이트 할 수 있음을 의미 합니다. 우리는 탐험가들이 시간이 지남에 따라 계속 성장하고 진화 할 것이라는 것을 알고 있기 때문에 이것은 우리에게 큰 구호입니다.