創(chuàng)建視頻很耗時(shí)。製作精良的5分鐘視頻可能需要數(shù)小時(shí)才能計(jì)劃，錄製和編輯 - 這是在我們開(kāi)始談?wù)撆c網(wǎng)站上所有其他視頻一致的視頻之前。

當(dāng)我們接受Jamstack Explorers項(xiàng)目（用於Web開(kāi)發(fā)人員的視頻驅(qū)動(dòng)的教育資源）時(shí)，我們想找到質(zhì)量和運(yùn)輸?shù)恼_平衡：在視頻製作過(guò)程中我們可以自動(dòng)化什麼，以減少創(chuàng)建視頻內(nèi)容所需的時(shí)間和步驟數(shù)，而無(wú)需犧牲質(zhì)量？

借助熟悉的幫助，我們能夠在所有視頻內(nèi)容中提供一致的品牌方法，而無(wú)需為創(chuàng)建視頻的人們添加一堆額外的編輯任務(wù)。而且，作為獎(jiǎng)勵(lì)，如果我們將來(lái)更新我們的品牌，我們可以一次更新整個(gè)網(wǎng)站的所有視頻品牌，而無(wú)需視頻編輯！

“視頻品牌”是什麼意思？

為了使Explorers網(wǎng)站上的每個(gè)視頻都覺(jué)得這一切都合併在一起，我們?cè)诿總€(gè)視頻中都包含一些常見(jiàn)的文章：

1. 標(biāo)題場(chǎng)景
2. 一個(gè)簡(jiǎn)短的介紹保險(xiǎn)槓（視頻剪輯），顯示Jamstack Explorers品牌
3. 如果這是任務(wù)中的最後一個(gè)視頻，則可以歸結(jié)為下一個(gè)視頻的簡(jiǎn)短省略保險(xiǎn)槓，或者顯示“任務(wù)完成”的“任務(wù)”

跳到最後：這是品牌視頻的外觀

為了顯示添加品牌的影響，以下是Jamstack Explorers的視頻之一，沒(méi)有任何品牌：

這個(gè)視頻（以及本洪的這一涉及任務(wù)）非常出色！但是，它突然開(kāi)始和結(jié)束了，我們對(duì)這段視頻的居住地沒(méi)有感覺(jué)。

我們與亞當(dāng)·霍爾德（Adam Hald）合作，創(chuàng)建了品牌的視頻資產(chǎn)，這些視頻資產(chǎn)有助於使每個(gè)視頻都有一個(gè)地位感。與所有應(yīng)用的探險(xiǎn)家品牌一起查看相同的視頻：

我們得到了同樣的出色內(nèi)容，但是現(xiàn)在我們添加了一些額外的va-va-voom ，使這感覺(jué)就像是一個(gè)更大的故事的一部分。

在本文中，我們將介紹如何自動(dòng)使用Cloudinary自動(dòng)自定義每個(gè)視頻。

云如何使它成為可能？

Cloudinary是一個(gè)基於雲(yún)的資產(chǎn)交付網(wǎng)絡(luò)，它為我們提供了一個(gè)強(qiáng)大的基於URL的API來(lái)操縱和轉(zhuǎn)換媒體。它支持各種資產(chǎn)類型，但真正發(fā)光的是圖像和視頻。

要使用Cloudinary，請(qǐng)您獲得一個(gè)免費(fèi)帳戶，然後上傳您的資產(chǎn)。然後，該資產(chǎn)以雲(yún)URL提供：

 https://res.cloudinary.com/netlify/image/upload/v1605632851/explorers/avatar.jpg
                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^es
                              | | |
                              VVV
                      雲(yún)（帳戶）名稱版本（可選）文件名

該URL指向原始圖像，可用於標(biāo)籤和其他標(biāo)記中。

動(dòng)態(tài)調(diào)整文件格式和質(zhì)量以減少文件大小

如果我們?cè)诰W(wǎng)站上使用此圖像並希望提高我們的網(wǎng)站性能，我們可能會(huì)決定使用諸如WebP，Avif等下一代格式等等來(lái)減少此圖像的大小。這些新格式要小得多，但並不受所有瀏覽器的支持，這通常意味著使用工具以不同的格式生成此圖像的多個(gè)版本，然後使用 element或其他專用標(biāo)記來(lái)提供現(xiàn)代選擇，並為較舊瀏覽器的JPG退縮提供現(xiàn)代選擇。

使用Cloudinary，我們要做的就是為URL添加一個(gè)轉(zhuǎn)換：

 https://res.cloudinary.com/netlify/image/upload/q_auto,f_auto/v1605632851/explorers/avatar.jpg
                                                ^^^^^^^^^^^^^
                                                      |
                                                      v
                                    自動(dòng)質(zhì)量和格式轉(zhuǎn)換

我們?cè)跒g覽器中看到的是視覺(jué)上相同的：

通過(guò)將文件格式和質(zhì)量設(shè)置設(shè)置為自動(dòng)設(shè)置（F_AUTO，Q_AUTO），Cloudinary能夠檢測(cè)客戶端支持哪些格式，並在合理的質(zhì)量級(jí)別上提供最有效的格式。例如，在Chrome中，此圖像從97.6KB JPG轉(zhuǎn)換為15.4KB WebP，我們要做的就是在URL中添加幾件事！

我們可以以許多不同的方式改變我們的圖像！

我們可以進(jìn)一步進(jìn)行其他轉(zhuǎn)換，包括調(diào)整大?。╳_150 for“大小為150px寬”）和顏色效果（e_grayscalefor“應(yīng)用灰度效應(yīng)”）：

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

這只是可能的可能性的微小味道 - 請(qǐng)確保將Cloudinary Docs刪除以獲取更多示例！

有一個(gè)節(jié)點(diǎn)SDK可以使它更加人性化一些

對(duì)於更高級(jí)的轉(zhuǎn)換，例如我們將要進(jìn)入??的內(nèi)容，手工編寫(xiě)URL可能會(huì)很難閱讀。我們最終使用了thecloudinary節(jié)點(diǎn)sdkto使我們能夠添加評(píng)論並解釋每個(gè)轉(zhuǎn)換在做什麼，並且隨著我們維護(hù)和發(fā)展平臺(tái)，這非常有幫助。

要安裝它，請(qǐng)從YourConsole獲取Cloudinary API密鑰和秘密，然後使用NPM安裝SDK：

 ＃創(chuàng)建一個(gè)新目錄
Mkdir Cloudinary-Video

＃進(jìn)入新目錄
CD Cloudinary-Video/

＃初始化一個(gè)新節(jié)點(diǎn)項(xiàng)目
npm init -y

＃安裝雲(yún)節(jié)點(diǎn)SDK
NPM安裝雲(yún)

接下來(lái)，使用YourCloud_nameand API憑據(jù)創(chuàng)建一個(gè)名為Index.jsand的新文件：

 const cloud = require（'cloudinary'）。 v2;

// todo用自己的雲(yún)憑證替換這些值
cloudinary.config（{
  cloud_name：'your_cloud_name'，
  api_key：'your_api_key'，
  api_secret：'your_api_secret'，
}）;

不要將API憑據(jù)提交給GitHub或在任何地方共享。使用環(huán)境變量來(lái)確保它們的安全！如果您不熟悉環(huán)境變量，Colby Fayock為使用環(huán)境變量寫(xiě)了一篇重要的文章。

接下來(lái)，我們可以使用稍微更可讀的配置設(shè)置來(lái)創(chuàng)建與以前相同的轉(zhuǎn)換：

 Cloudinary.uploader
  //第一個(gè)參數(shù)應(yīng)該是公共ID（包括文件夾?。?  //我們想轉(zhuǎn)換的圖像
  。
    //這兩個(gè)屬性與URL的開(kāi)頭相匹配：
    // https：//res.cloudinary.com/netlify/image/upload/ ...
    // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^因?yàn)?    resource_type：'image'，
    類型：“上傳”，

    //“急切”表示我們想提前進(jìn)行這些轉(zhuǎn)換以避免
    //第一次加載時(shí)間緩慢
    渴望的： [
      {
        fetch_format：'auto'，
        質(zhì)量：“自動(dòng)”，
        寬度：150，
        效果：“灰度”，
      }，，
    ]，，

    //允許將此轉(zhuǎn)換的圖像緩存以避免重新運(yùn)行相同的圖像
    //一遍又一遍地轉(zhuǎn)變
    覆蓋：false，
  }））
  。然後（（結(jié)果）=> {
    console.log（結(jié)果）;
  }）;

讓我們通過(guò)輸入index.jsin運(yùn)行此代碼。輸出看起來(lái)像這樣：

 {
  ASSET_ID：'FCA4ABBA96FFDF70EF89498AA340AE4E'，
  public_id：'探險(xiǎn)家/avatar'，
  版本：1605632851，
  version_id：'B8A923931AF20404E89D03852FF1BFF1'，
  簽名：'e7201C9AB36CB5B6A0545CEE4F5F8EE27FB7F99F'，
  寬度：300，
  身高：300，
  格式：'jpg'，
  resource_type：'image'，
  Create_at：'2020-11-17T17：07：31Z'，
  字節(jié)：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'，
  渴望的： [
    {
      轉(zhuǎn)換：'e_grayscale，f_auto，q_auto，w_150'，
      寬度：150，
      身高：150，
      字節(jié)：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'
    }
  這是給出的
}

在TheeagerProperty下，我們的轉(zhuǎn)換與完整的URL一起顯示，以查看轉(zhuǎn)換的圖像。

雖然節(jié)點(diǎn)SDK可能對(duì)這樣的直接轉(zhuǎn)換而過(guò)於殺傷，但是當(dāng)我們開(kāi)始查看添加視頻品牌所需的複雜轉(zhuǎn)換時(shí)，它確實(shí)變得非常方便。

用雲(yún)轉(zhuǎn)換視頻

為了在Jamstack Explorers中轉(zhuǎn)換我們的視頻，我們遵循相同的方法：每個(gè)視頻都上傳到Cloudinary，然後我們修改URL以調(diào)整大小，調(diào)整質(zhì)量並插入標(biāo)題卡和保險(xiǎn)槓。

我們將要解決一些主要的轉(zhuǎn)型類別，以添加品牌：

1. 覆蓋
2. 過(guò)渡
3. 文字疊加
4. 剪接

讓我們看一下這些類別中的每個(gè)類別，看看我們是否不能在Ben的視頻中重新實(shí)現(xiàn)Jamstack Explorers品牌！讓我們通過(guò)設(shè)置upindex.jsto轉(zhuǎn)換我們的基本視頻：

 Cloudinary.uploader
  。
    //這兩個(gè)屬性與URL的開(kāi)頭相匹配：
    // https：//res.cloudinary.com/netlify/image/upload/ ...
    // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^因?yàn)?    resource_type：'視頻'，
   類型：“上傳”，

    //“急切”表示我們想提前進(jìn)行這些轉(zhuǎn)換以避免
    //第一次加載時(shí)間緩慢
    渴望的： [
      {
        fetch_format：'auto'，
        質(zhì)量：“自動(dòng)”，
        身高：360，
        寬度：640，
        作物：“填充”，//如果視頻不同，請(qǐng)避免信箱
      }，，
    ]，，

    //允許將此轉(zhuǎn)換的圖像緩存以避免重新運(yùn)行相同的圖像
    //一遍又一遍地轉(zhuǎn)變
    覆蓋：false，
  }））
  。然後（（結(jié)果）=> {
    console.log（結(jié)果）;
  }）;

您可能已經(jīng)註意到，我們正在使用一個(gè)名為“保險(xiǎn)槓”的視頻，而不是Ben的原始視頻。這是由於我們將視頻添加在一起時(shí)雲(yún)訂單的方式。我們將在下一節(jié)中添加Ben的視頻！

將兩個(gè)視頻與使用Cloudinary的自定義過(guò)渡相結(jié)合

為了添加保險(xiǎn)槓，我們需要在T??heeagerarray中添加第二個(gè)變換“圖層”，該變換添加了第二個(gè)視頻作為覆蓋層。

為此，我們使用theoverlaytransformation並將其設(shè)置為tovideo：publicId，其中PublicIdis資產(chǎn)的雲(yún)公共ID和任何轉(zhuǎn)換為??colons（:)的slashes（/）。

我們還需要告訴Cloudinary如何在兩個(gè)視頻之間過(guò)渡，我們使用一種稱為Luma Matte的特殊視頻來(lái)進(jìn)行，該視頻可讓我們用視頻的黑色區(qū)域掩蓋一個(gè)視頻，並與白色區(qū)域進(jìn)行第二個(gè)視頻。這會(huì)導(dǎo)致風(fēng)格化的交叉鍛煉。

這是Luma Matte本身的樣子：

視頻和過(guò)渡都有自己的轉(zhuǎn)換，這意味著我們需要將它們視為雲(yún)轉(zhuǎn)換中的不同“層”。這意味著將它們分配到單獨(dú)的對(duì)像中，然後將其他對(duì)象添加到“應(yīng)用”每一層中，這使我們可以調(diào)用該部分完成並繼續(xù)為主視頻添加更多轉(zhuǎn)換。

為了告訴Cloudinary這是一個(gè)Luma Matte，而不是另一個(gè)視頻，我們?cè)O(shè)置了FeffectType Totransition。

在索引中進(jìn)行以下更改。

 const videobasetransformations = {
  fetch_format：'auto'，
  質(zhì)量：“自動(dòng)”，
  身高：360，
  寬度：600，
  作物：“填充”，
}

Cloudinary.uploader
  。
    //這兩個(gè)屬性與URL的開(kāi)頭相匹配：
    // <https:></https:> ...
    //
    resource_type：'視頻'，
    類型：“上傳”，

    //“急切”表示我們想提前進(jìn)行這些轉(zhuǎn)換以避免
    //第一次加載時(shí)間緩慢
    渴望的： [
      VideoBaseTransformations，
      {
        覆蓋：“視頻：探險(xiǎn)家：LCA-07- lifecycle-hooks”，
        ... videobaseTransformations，
      }，，
      {
        覆蓋：“視頻：探險(xiǎn)家：過(guò)渡”，
        效果：“過(guò)渡”，
      }，，
      {flags：'layer_apply'}，//  {
    console.log（結(jié)果）;
  }）;

我們需要在所有視頻上使用相同的格式，質(zhì)量和尺寸轉(zhuǎn)換，因此我們將它們拉出了一個(gè)稱為VideoBaseTrysformations的變量，然後添加了第二個(gè)對(duì)像以包含覆蓋層。

如果我們使用Nonode index.js運(yùn)行此此視頻，那麼您會(huì)回到這樣的視頻：

不錯(cuò)！這似乎已經(jīng)是Jamstack Explorers網(wǎng)站的一部分，並且該過(guò)渡從普通保險(xiǎn)槓增加到自定義視頻中。

添加Enero保險(xiǎn)槓的工作完全相同：我們需要為結(jié)束保險(xiǎn)槓和過(guò)渡添加另一個(gè)覆蓋層。我們不會(huì)在教程中顯示此代碼，但是如果您有興趣，您可以在源代碼中看到它。

使用文本疊加層將標(biāo)題卡添加到視頻中

要添加標(biāo)題卡，有兩個(gè)不同的步驟：

1. 提取一個(gè)簡(jiǎn)短的視頻剪輯以充當(dāng)標(biāo)題卡背景
2. 添加帶有視頻標(biāo)題的文本覆蓋層

接下來(lái)的兩個(gè)部分單獨(dú)地穿過(guò)每個(gè)步驟，因此我們可以看到兩者之間的區(qū)別。

提取一個(gè)簡(jiǎn)短的視頻剪輯以用作標(biāo)題卡背景

當(dāng)亞當(dāng)·霍爾德（Adam Hald）創(chuàng)建Explorers視頻資產(chǎn)時(shí)，他包括了Abeautiful Intro Videothat在星空上打開(kāi)的，非常適合標(biāo)題卡。使用Cloudinary，我們可以抓住那顆星空的幾秒鐘，然後將其拼接到每個(gè)視頻中作為標(biāo)題卡！

InIndex.js，添加以下轉(zhuǎn)換塊：

 Cloudinary.uploader
  。
    //這兩個(gè)屬性與URL的開(kāi)頭相匹配：
    // https：//res.cloudinary.com/netlify/image/upload/ ...
    //
    resource_type：'視頻'，
    類型：“上傳”，

    //“急切”表示我們想提前進(jìn)行這些轉(zhuǎn)換以避免
    //第一次加載時(shí)間緩慢
    渴望的： [
      VideoBaseTransformations，
      {
        覆蓋：“視頻：探險(xiǎn)家：LCA-07- lifecycle-hooks”，
        ... videobaseTransformations，
      }，，
      {
        覆蓋：“視頻：探險(xiǎn)家：過(guò)渡”，
        效果：“過(guò)渡”，
      }，，
      {flags：'layer_apply'}，//  {
    console.log（結(jié)果）;
  }）;

使用TheSpliceFlag，我們告訴Cloudinary直接添加此視頻而無(wú)需過(guò)渡。

在下一組轉(zhuǎn)換中，我們添加了以前從未見(jiàn)過(guò)的三個(gè)轉(zhuǎn)換：

1. 我們setaudio_codectononeto從這一視頻段中刪除聲音。
2. 我們?cè)O(shè)置了_offsetto3，這意味著我們將僅獲得視頻的前3秒。
3. 我們以25值添加了TheAccelerateFect，該值將視頻降低了25％。

RunningNode Index.jswill現(xiàn)在給我們一個(gè)視頻，從不到4秒的沉默，星空天空開(kāi)始：

使用Cloudinary添加文本疊加層

我們的最後一步是添加文本覆蓋層以顯示視頻標(biāo)題！

文本覆蓋層將SameOverlayProperty與其他疊加層一起使用，但是我們通過(guò)一個(gè)具有字體設(shè)置的對(duì)象。 Cloudinary支持各種字體 - 我還沒(méi)有找到確定的列表，但是它似乎是大量的Google字體 - 如果您購(gòu)買(mǎi)了使用自定義字體的許可證，則可以在文本Overlaysas中使用自定義字體，從而可以使用自定義字體。

 Cloudinary.uploader
  。
    //這兩個(gè)屬性與URL的開(kāi)頭相匹配：
    // <https:></https:> ...
    //
    resource_type：'視頻'，
    類型：“上傳”，

    //“急切”表示我們想提前進(jìn)行這些轉(zhuǎn)換以避免
    //第一次加載時(shí)間緩慢
    渴望的： [
      VideoBaseTransformations，
      {
        覆蓋：“視頻：探險(xiǎn)家：LCA-07- lifecycle-hooks”，
        ... videobaseTransformations，
      }，，
      {
        覆蓋：“視頻：探險(xiǎn)家：過(guò)渡”，
        效果：“過(guò)渡”，
      }，，
      {flags：'layer_apply'}，//  {
    console.log（結(jié)果）;
  }）;

除了設(shè)置字體尺寸和對(duì)齊方式外，我們還應(yīng)用了500px（默認(rèn)為默認(rèn)為中心）的寬度，以防止我們的標(biāo)題文本粉碎到標(biāo)題卡的側(cè)面，並設(shè)置thecropvalue tofit，這將包裝更長(zhǎng)的標(biāo)題。將thecolortowhitemakes設(shè)置為我們的文本在黑暗，星空背景下可見(jiàn)。

runnode index.jsto生成URL，我們將觀看完全品牌的視頻，包括標(biāo)題卡和保險(xiǎn)槓！

建立一次視頻品牌；到處使用它

創(chuàng)建保險(xiǎn)槓，過(guò)渡和標(biāo)題卡是很多工作。創(chuàng)建高質(zhì)量的視頻內(nèi)容也是很多工作。如果我們不得不手動(dòng)編輯每個(gè)Jamstack Explorers視頻來(lái)插入這些標(biāo)題卡和保險(xiǎn)槓，那麼我們實(shí)際上不太可能做到這一點(diǎn)。

我們知道，讓我們保持視頻一致品牌的唯一現(xiàn)實(shí)方式是構(gòu)造添加品牌的摩擦，而Cloudinary讓我們完全自動(dòng)化它。這意味著我們可以在沒(méi)有任何手動(dòng)步驟的情況下保持一致！

作為額外的獎(jiǎng)勵(lì)，這也意味著，如果我們將來(lái)更新標(biāo)題卡或保險(xiǎn)槓，我們可以通過(guò)一個(gè)地方更改代碼來(lái)更新所有視頻的所有品牌。這對(duì)我們來(lái)說(shuō)是一個(gè)巨大的解脫，因?yàn)槲覀冎捞诫U(xiǎn)家將隨著時(shí)間的流逝而繼續(xù)發(fā)展和發(fā)展。

下一步該怎麼辦

現(xiàn)在，您知道如何使用Cloudinary添加自定義品牌，這裡有一些其他資源來(lái)幫助您繼續(xù)學(xué)習(xí)。

• 請(qǐng)參閱本教程的TheSource代碼。
• 請(qǐng)參閱“視頻品牌”的Jamstack ExplorersSource代碼。
• 了解有關(guān)Cloudinary的視頻轉(zhuǎn)換API的更多信息。
• 了解Web開(kāi)發(fā)OnJamstack Explorers。
• 了解如何使用Cloudinary來(lái)創(chuàng)建自定義社交媒體圖像。
• 觀看Ben的完整任務(wù)，以了解一切如何融合在一起！

您還能使用Cloudinary自動(dòng)化什麼？通過(guò)自動(dòng)化視頻編輯工作流的重複部分來(lái)節(jié)省多少時(shí)間？我正是那種喜歡談?wù)撨@些東西的書(shū)呆子，所以請(qǐng)?jiān)赥witter上向我發(fā)送您的想法！

以上是視頻的雲(yún)技巧的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！