视频的云技巧-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，我们将观看完全品牌的视频，包括标题卡和保险杠！