視頻的雲技巧-css教學-PHP中文網

首頁

web前端

css教學

視頻的雲技巧

Joseph Gordon-Levitt

Apr 01, 2025 am 12:32 AM

視頻的雲技巧

創建視頻很耗時。製作精良的5分鐘視頻可能需要數小時才能計劃，錄製和編輯 - 這是在我們開始談論與網站上所有其他視頻一致的視頻之前。

當我們接受Jamstack Explorers項目（用於Web開發人員的視頻驅動的教育資源）時，我們想找到質量和運輸的正確平衡：在視頻製作過程中我們可以自動化什麼，以減少創建視頻內容所需的時間和步驟數，而無需犧牲質量？

借助熟悉的幫助，我們能夠在所有視頻內容中提供一致的品牌方法，而無需為創建視頻的人們添加一堆額外的編輯任務。而且，作為獎勵，如果我們將來更新我們的品牌，我們可以一次更新整個網站的所有視頻品牌，而無需視頻編輯！

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

為了使Explorers網站上的每個視頻都覺得這一切都合併在一起，我們在每個視頻中都包含一些常見的文章：

標題場景
一個簡短的介紹保險槓（視頻剪輯），顯示Jamstack Explorers品牌
如果這是任務中的最後一個視頻，則可以歸結為下一個視頻的簡短省略保險槓，或者顯示“任務完成”的“任務”

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

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

這個視頻（以及本洪的這一涉及任務）非常出色！但是，它突然開始和結束了，我們對這段視頻的居住地沒有感覺。

我們與亞當·霍爾德（Adam Hald）合作，創建了品牌的視頻資產，這些視頻資產有助於使每個視頻都有一個地位感。與所有應用的探險家品牌一起查看相同的視頻：

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

在本文中，我們將介紹如何自動使用Cloudinary自動自定義每個視頻。

云如何使它成為可能？

Cloudinary是一個基於雲的資產交付網絡，它為我們提供了一個強大的基於URL的API來操縱和轉換媒體。它支持各種資產類型，但真正發光的是圖像和視頻。

要使用Cloudinary，請您獲得一個免費帳戶，然後上傳您的資產。然後，該資產以雲URL提供：

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

該URL指向原始圖像，可用於視頻的雲技巧標籤和其他標記中。

動態調整文件格式和質量以減少文件大小

如果我們在網站上使用此圖像並希望提高我們的網站性能，我們可能會決定使用諸如WebP，Avif等下一代格式等等來減少此圖像的大小。這些新格式要小得多，但並不受所有瀏覽器的支持，這通常意味著使用工具以不同的格式生成此圖像的多個版本，然後使用 element或其他專用標記來提供現代選擇，並為較舊瀏覽器的JPG退縮提供現代選擇。

使用Cloudinary，我們要做的就是為URL添加一個轉換：

 https://res.cloudinary.com/netlify/image/upload/q_auto,f_auto/v1605632851/explorers/avatar.jpg
                                                ^^^^^^^^^^^^^
                                                      |
                                                      v
                                    自動質量和格式轉換

我們在瀏覽器中看到的是視覺上相同的：

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

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

我們可以進一步進行其他轉換，包括調整大小（w_150 for“大小為150px寬”）和顏色效果（e_grayscalefor“應用灰度效應”）：

 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使我們能夠添加評論並解釋每個轉換在做什麼，並且隨著我們維護和發展平台，這非常有幫助。

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

 ＃創建一個新目錄
Mkdir Cloudinary-Video

＃進入新目錄
CD Cloudinary-Video/

＃初始化一個新節點項目
npm init -y

＃安裝雲節點SDK
NPM安裝雲

接下來，使用YourCloud_nameand API憑據創建一個名為Index.jsand的新文件：

 const cloud = 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'，
    類型：“上傳”，

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

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

讓我們通過輸入index.jsin運行此代碼。輸出看起來像這樣：

 {
  ASSET_ID：'FCA4ABBA96FFDF70EF89498AA340AE4E'，
  public_id：'探險家/avatar'，
  版本：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'
    }
  這是給出的
}

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

雖然節點SDK可能對這樣的直接轉換而過於殺傷，但是當我們開始查看添加視頻品牌所需的複雜轉換時，它確實變得非常方便。

用雲轉換視頻

為了在Jamstack Explorers中轉換我們的視頻，我們遵循相同的方法：每個視頻都上傳到Cloudinary，然後我們修改URL以調整大小，調整質量並插入標題卡和保險槓。

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

覆蓋
過渡
文字疊加
剪接

讓我們看一下這些類別中的每個類別，看看我們是否不能在Ben的視頻中重新實現Jamstack Explorers品牌！讓我們通過設置upindex.jsto轉換我們的基本視頻：

 Cloudinary.uploader
  。
    //這兩個屬性與URL的開頭相匹配：
    // https：//res.cloudinary.com/netlify/image/upload/ ...
    // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^因為
    resource_type：'視頻'，
   類型：“上傳”，

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

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

您可能已經註意到，我們正在使用一個名為“保險槓”的視頻，而不是Ben的原始視頻。這是由於我們將視頻添加在一起時雲訂單的方式。我們將在下一節中添加Ben的視頻！

將兩個視頻與使用Cloudinary的自定義過渡相結合

為了添加保險槓，我們需要在Theeagerarray中添加第二個變換“圖層”，該變換添加了第二個視頻作為覆蓋層。

為此，我們使用theoverlaytransformation並將其設置為tovideo：publicId，其中PublicIdis資產的雲公共ID和任何轉換為colons（:)的slashes（/）。

我們還需要告訴Cloudinary如何在兩個視頻之間過渡，我們使用一種稱為Luma Matte的特殊視頻來進行，該視頻可讓我們用視頻的黑色區域掩蓋一個視頻，並與白色區域進行第二個視頻。這會導致風格化的交叉鍛煉。

這是Luma Matte本身的樣子：

視頻和過渡都有自己的轉換，這意味著我們需要將它們視為雲轉換中的不同“層”。這意味著將它們分配到單獨的對像中，然後將其他對象添加到“應用”每一層中，這使我們可以調用該部分完成並繼續為主視頻添加更多轉換。

為了告訴Cloudinary這是一個Luma Matte，而不是另一個視頻，我們設置了FeffectType Totransition。

在索引中進行以下更改。

 const videobasetransformations = {
  fetch_format：'auto'，
  質量：“自動”，
  身高：360，
  寬度：600，
  作物：“填充”，
}

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

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

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

如果我們使用Nonode index.js運行此此視頻，那麼您會回到這樣的視頻：

不錯！這似乎已經是Jamstack Explorers網站的一部分，並且該過渡從普通保險槓增加到自定義視頻中。

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

使用文本疊加層將標題卡添加到視頻中

要添加標題卡，有兩個不同的步驟：

提取一個簡短的視頻剪輯以充當標題卡背景
添加帶有視頻標題的文本覆蓋層

接下來的兩個部分單獨地穿過每個步驟，因此我們可以看到兩者之間的區別。

提取一個簡短的視頻剪輯以用作標題卡背景

當亞當·霍爾德（Adam Hald）創建Explorers視頻資產時，他包括了Abeautiful Intro Videothat在星空上打開的，非常適合標題卡。使用Cloudinary，我們可以抓住那顆星空的幾秒鐘，然後將其拼接到每個視頻中作為標題卡！

InIndex.js，添加以下轉換塊：

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

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

使用TheSpliceFlag，我們告訴Cloudinary直接添加此視頻而無需過渡。

在下一組轉換中，我們添加了以前從未見過的三個轉換：

我們setaudio_codectononeto從這一視頻段中刪除聲音。
我們設置了_offsetto3，這意味著我們將僅獲得視頻的前3秒。
我們以25值添加了TheAccelerateFect，該值將視頻降低了25％。

RunningNode Index.jswill現在給我們一個視頻，從不到4秒的沉默，星空天空開始：

使用Cloudinary添加文本疊加層

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

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

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

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

除了設置字體尺寸和對齊方式外，我們還應用了500px（默認為默認為中心）的寬度，以防止我們的標題文本粉碎到標題卡的側面，並設置thecropvalue tofit，這將包裝更長的標題。將thecolortowhitemakes設置為我們的文本在黑暗，星空背景下可見。

runnode index.jsto生成URL，我們將觀看完全品牌的視頻，包括標題卡和保險槓！