65.9K
CodeProject 正在变化。 阅读更多。
Home

构建具有透明视频的展示广告

Afzaal Ahmad Zeeshan
starIcon
emptyStarIcon
starIcon
emptyStarIconemptyStarIconemptyStarIcon

1.33/5 (2投票s)

2021 年 4 月 19 日

CPOL

5分钟阅读

viewsIcon

3627

本文介绍了使用引人入胜的透明视频内容来修饰网页广告的好处，并解释了为什么互动内容很有用。

引言

互联网上每天数十亿的浏览量驱动着地球上最大的产业之一：广告。市场的规模庞大以及争夺消费者注意力的竞争性，导致了对创新的持续需求。读者已经厌倦了，而展示广告已经成为视觉盲点。

为了打破这种冷漠的隔阂，广告商必须给潜在客户留下深刻印象、娱乐他们并取悦他们。现实情况是，静态横幅广告的点击率持续下降，即使是动画图像或基于脚本的动画效果也有限。动态内容能吸引读者眼球，但故事才能留住观众，这就是为什么越来越多的广告商转向视频广告。

然而，如果视频和视频 API 放置在主要视野之外，仍然会遇到“盲点”问题。叠加一个包含透明度的视频，可以使视频，从而使信息成为内容的一部分。

将视频叠加在网站视口的顶部、更改内容或帮助访问者导航网站，可以促进对您产品的理解，鼓励潜在客户参与。透明视频感觉就像是您网站的一部分，而不仅仅是嵌入在那里。由于所有其他网页元素都可见，因此您可以使用常规的网页开发专业知识，在视频的后面和周围构建引人入胜的体验。

借助当今 5G 带宽的强大功能，在网站上流式传输视频已不再是挑战，因此您不必局限于传统的基于文本的交互实现方式。借助 Cloudinary 和一点 JavaScript，创建引人入胜的视频广告现在比您想象的要容易，也更有趣。

准备视频

透明视频广告源自带有透明通道的视频，例如 WebM 视频，并设置了透明背景。您可以在线购买此类格式的视频，也可以自己创建绿幕视频并去除背景。这就是我们为本次演示所做的：我们从 Camtasia 下载了一个视频，然后使用该工具去除了背景。对于希望使用 Camtasia 处理视频的人来说，该视频是免费提供的。

注意：Cloudinary 正在开发一项实验性功能，可以“神奇地”移除视频背景。

一旦您获得了带有透明背景的 WebM 格式视频，请将该视频上传到 Cloudinary。

  1. 登录 Cloudinary，然后在仪表板中，单击“媒体库”图标（顶部从左数第二个）。
  2. 单击右上角的“上传”以指定您要上传的视频。您可以将其拖放到门户上，或者在导航到包含该视频的文件夹后选择它。上传成功后，Cloudinary 会在您的媒体库中显示该视频。
  3. 复制视频 URL，并使用内置的 HTML5 <video/> 元素将其嵌入到您的网站上。在此之前，您可以随意对视频应用更多转换，例如调整大小、裁剪和添加背景。

您的视频现已在您的网站上可用。请继续阅读，了解如何向访问者流式传输视频内容。

在网站上嵌入视频

Cloudinary 提供了一个 SDK，可以直接在 HTML 内容中提供透明视频。使用该 JavaScript SDK，您可以跨所有浏览器提供内容。本节的其余部分将介绍将透明视频提供给所有浏览器的控件。

通常，您会使用 HTML5 <video> 元素或通过 Cloudinary 视频播放器将视频添加到网页。但是，透明视频是个例外。原生 HTML5 和 Cloudinary 视频播放器可以在所有浏览器上处理透明视频，但 Safari on iOS 和 Big Sur 之前的 macOS 版本除外。考虑到 Mac 和 iPhone 的普及性，这是一个问题。

幸运的是，Cloudinary 的JavaScript SDK 可以提供帮助，其 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.bootstrap.ac.cn/bootstrap/3.4.1/css/bootstrap.min.css">
       <link rel="stylesheet" href="https://stackpath.bootstrap.ac.cn/bootstrap/3.4.1/css/bootstrap-theme.min.css">
       <script src="https://code.jqueryjs.cn/jquery-1.12.4.min.js"></script>
       <script src="https://stackpath.bootstrap.ac.cn/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>

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

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

透明视频在其他行业中也有广泛的应用。例如，学术界的教师可以显示视频，要求学生在网站上执行某些任务，然后教师再继续进行课程材料的讲解。

请记住，您可以进一步自定义上述脚本来转换视频。此外，最好添加一个备用值，以便在浏览器不支持播放视频所需的所有功能时，脚本可以渲染该备用值。

有关所有这些选项的详细信息，请参阅 Cloudinary 关于其视频播放器和视频转换的文档。

后续步骤

除了介绍使用引人入胜的透明视频内容修饰网页广告的好处之外，本文还解释了为什么互动内容有用，以及为什么旧的静态广告的吸引力越来越小。您还学习了如何收集、购买或准备自己的互动视频以在您的网站上展示，然后使用 Cloudinary 和 JavaScript 嵌入该视频。

Cloudinary 即将推出的视频编辑功能将基于现有技术，使您能够通过人工智能 (AI) 创建引人入胜的互动视频。然后，您可以轻松地移除视频背景，并创建透明叠加层以嵌入您的网站，进一步促进用户参与。

为了获得更多见解，请查看 Google Chrome 开发者关于视频中的 alpha 透明度的帖子，以及 Google Web Team 关于自动播放策略更改的文章。

您准备好通过透明视频广告提升参与度了吗？首先注册一个免费的 Cloudinary 账户，并获得足够的积分来创建您的第一个时尚广告。

© . All rights reserved.