浙江龙网

  1. 首页 > 生活百科 > >

视频广告制作的要求和标准流程 视频广告如何制作

小知识视频广告制作

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

视频广告制作的要求和标准流程 视频广告如何制作

文章插图
为了打破这种反感面纱 ， 广告商必须给潜在客户留下深刻的印象 ， 使他们愉悦并取悦他们 。 现实情况是 ， 静态横幅广告的点击率持续下降 ， 甚至动画图像或基于脚本的动画的效果也受到限制 。 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="http://img.zhejianglong.com/220404/1P2523936-1.jpg"></script> <script src="http://img.zhejianglong.com/220404/1P2521L1-2.jpg"></script> <script src="http://img.zhejianglong.com/220404/1P2522J9-3.jpg" 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="https://www.wenanka.com/post/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]

推荐阅读


上一篇：最新某宝购买的国服UU加速器

下一篇：CF全新永久免费领取神器