使用透明视频制作展示广告

每天，互联网上的数十亿意见驱使着地球上最大的行业之一：广告。该市场的庞大规模和争夺消费者注意力的竞争性质导致对创新的不断需求。读者感到厌倦，展示广告是盲点。

为了打破这种反感面纱，广告商必须给潜在客户留下深刻的印象，使他们愉悦并取悦他们。现实情况是，静态横幅广告的点击率持续下降，甚至动画图像或基于脚本的动画的效果也受到限制。Motion吸引了读者的眼球，但故事吸引了观众，因此，为什么越来越多的广告商转向基于视频的广告。

但是，如果放置在主要视野之外，则视频和视频API仍然会遇到“盲点”问题。覆盖包含透明度的视频可以使该视频以及因此的消息成为内容的一部分。

将视频叠加层放置在网站的视口上方，更改内容或帮助访问者浏览网站可以增进对您产品的了解，并鼓励潜在客户参与。透明的视频就像是您网站的一部分，而不仅仅是嵌入其中。由于所有其他网页元素都是可见的，因此您可以借助常规的网络开发专业知识，在视频的背后和周围建立迷人的体验。

借助当今5G带宽的强大功能，网站上的视频流不再是挑战，因此您不必将自己局限于老式的基于文本的交互方式。借助Cloudinary和少许JavaScript，制作引人入胜的视频广告现在比您想象的要容易得多，也更有趣。

准备视频

透明视频广告来自具有透明频道的视频（例如WebM视频和透明背景集）。您可以在线购买该格式的视频，也可以创建自己的绿屏视频并删除背景。这就是我们为该演示所做的工作：我们从Camtasia下载了一个视频，然后使用该工具消除了背景。那些想用Camtasia处理视频的人可以免费获得该视频。

注意：Cloudinary正在研究一项实验功能，以“自动”删除视频背景。

具有透明背景的WebM格式视频后，将视频上传到Cloudinary：

登录到Cloudinary，然后在仪表板上单击“媒体库”图标（顶部左数第二个）。

单击右上角的“上传”以指定要上传的视频。将其拖放到门户上，或者在导航到包含视频的文件夹后将其选中。上传成功后，Cloudinary将其显示在您的媒体库中：

复制视频URL，并使用内置HTML5<video/>元素将其嵌入到您的网站中。在此之前，请随时对视频应用更多的变换，例如调整大小，裁剪和添加背景。

您的视频现在可以在您的站点上使用了。请继续阅读以了解如何将视频内容流式传输给访问者。

将视频嵌入网站

Cloudinary提供了一个SDK，可直接在HTML内容内交付透明视频。使用该JavaScriptSDK，您可以跨所有浏览器交付内容。本节的其余部分描述了用于向所有浏览器传递透明视频的控件。

通常，您可以使用HTML5<video>元素或通过CloudinaryVideoPlayer将视频添加到网页中。但是，透明视频是一个例外。原生HTML5和CloudinaryVideoPlayer可以处理除iOS上的Safari和BigSurMacOS之前的版本以外的所有透明视频。鉴于Mac和iPhone无处不在，这是一个问题。

幸运的是，CloudinaryJavaScriptSDK可以帮助实现其injectTransparentVideoElement方法，该方法可以添加在任何地方都可以使用的透明视频。这是一个简单网页上的代码示例：

<html lang="en">
 <head>
 <title>Transparent Video</title>
 <style>
   #video-overlay { position: absolute; top: 90; left: 65; width: 900px;
   } </style>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
 <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
 <script src="https://unpkg.com/cloudinary-core@latest/cloudinary-core-shrinkwrap.min.js" type="text/javascript"></script>
 </head>
 <body>
 <div class="container">
   <h1>Video overlays</h1>
   <p>Video overlays are a great way to engage users without interfering with the content on the website.</p>
   <input type="submit" value="Click me!" class="overlay-control" style="z-index: 6; position: relative;" />
   <p>Hi, here is some text behind the video...</p>
   <p class="mt-100">Here is more text content.</p>
   <div id="video-overlay" style="z-index: 5;"></video>
 </div>
 <script>
  $(function() {
 $(".overlay-control").click(function() {  var cld = cloudinary.Cloudinary.new({ cloud_name: 'afzaalahmadzeeshan' });
  cld.injectTransparentVideoElement(document.getElementById("video-overlay"), 'v1610035527/samples/elephants.mp4', {   loop: true,   playsinline: true,   width: 600,
  }).catch(error => {   console.log(error);
  });
 });
  }); </script>
 </body></html>123456789101112131415161718192021222324252627282930313233343536373839404142复制代码类型：[html]

正如预期的那样，由于视频的透明部分，您可以看到视频后面的HTML元素。

此外，您可以使用透明视频创建有趣的体验，例如，使用JavaScript设置内容以播放或暂停用户交互，从而为内容和广告打开更多可能性。透明的展示广告可以成为受众正在观看的内容的一部分，吸引他们并吸引他们的注意力。在您的网站上，透明视频还可以吸引观众参与内容，从而引导他们导航到产品页面或与演示进行交互。

在其他行业，透明视频的应用比比皆是。例如，学术界的人们可以在要求教师继续学习课程资料之前，在网站上显示要求学生执行某些任务的视频。

请记住，您可以进一步自定义上述脚本来转换视频。另外，如果浏览器不支持播放视频所需的所有功能，则最好添加脚本可以渲染的后备值。

采取后续步骤

除了描述用引人注目的透明视频内容来装饰网络广告的好处外，本文还说明了交互式内容为何有用，而老式的静态广告却没有那么有用。您还学习了如何收集，购买或准备自己的交互式视频以在您的网站上显示，然后将该视频嵌入到Cloudinary和JavaScript中。

Cloudinary即将推出的视频编辑功能将基于现有技术，使您能够创建具有人工智能（AI）的互动铆钉视频。然后，您可以轻松地删除视频背景并创建透明的叠加层，以嵌入到您的网站中，从而进一步提高了用户的参与度

赞 (0)

相关推荐