|
每天，互聯(lián)網(wǎng)上的數(shù)十億意見(jiàn)驅(qū)使著地球上最大的行業(yè)之一：廣告。該市場(chǎng)的龐大規(guī)模和爭(zhēng)奪消費(fèi)者注意力的競(jìng)爭(zhēng)性質(zhì)導(dǎo)致對(duì)創(chuàng)新的不斷需求。讀者感到厭倦，展示廣告是盲點(diǎn)。
為了打破這種反感面紗，廣告商必須給潛在客戶(hù)留下深刻的印象，使他們愉悅并取悅他們。現(xiàn)實(shí)情況是，靜態(tài)橫幅廣告的點(diǎn)擊率持續(xù)下降，甚至動(dòng)畫(huà)圖像或基于腳本的動(dòng)畫(huà)的效果也受到限制。Motion吸引了讀者的眼球，但故事吸引了觀眾，因此，為什么越來(lái)越多的廣告商轉(zhuǎn)向基于視頻的廣告。 但是，如果放置在主要視野之外，則視頻和視頻API仍然會(huì)遇到“盲點(diǎn)”問(wèn)題。覆蓋包含透明度的視頻可以使該視頻以及因此的消息成為內(nèi)容的一部分。 將視頻疊加層放置在網(wǎng)站的視口上方，更改內(nèi)容或幫助訪問(wèn)者瀏覽網(wǎng)站可以增進(jìn)對(duì)您產(chǎn)品的了解，并鼓勵(lì)潛在客戶(hù)參與。透明的視頻就像是您網(wǎng)站的一部分，而不僅僅是嵌入其中。由于所有其他網(wǎng)頁(yè)元素都是可見(jiàn)的，因此您可以借助常規(guī)的網(wǎng)絡(luò)開(kāi)發(fā)專(zhuān)業(yè)知識(shí)，在視頻的背后和周?chē)⒚匀说捏w驗(yàn)。 借助當(dāng)今5G帶寬的強(qiáng)大功能，網(wǎng)站上的視頻流不再是挑戰(zhàn)，因此您不必將自己局限于老式的基于文本的交互方式。借助Cloudinary和少許JavaScript，制作引人入勝的視頻廣告現(xiàn)在比您想象的要容易得多，也更有趣。 準(zhǔn)備視頻透明視頻廣告來(lái)自具有透明頻道的視頻（例如WebM視頻和透明背景集）。您可以在線購(gòu)買(mǎi)該格式的視頻，也可以創(chuàng)建自己的綠屏視頻并刪除背景。這就是我們?yōu)樵撗菔舅龅墓ぷ鳎何覀儚腃amtasia下載了一個(gè)視頻，然后使用該工具消除了背景。那些想用Camtasia處理視頻的人可以免費(fèi)獲得該視頻。 注意：Cloudinary正在研究一項(xiàng)實(shí)驗(yàn)功能，以“自動(dòng)”刪除視頻背景。 具有透明背景的WebM格式視頻后，將視頻上傳到Cloudinary： 登錄到Cloudinary，然后在儀表板上單擊“媒體庫(kù)”圖標(biāo)（頂部左數(shù)第二個(gè)）。 單擊右上角的“上傳”以指定要上傳的視頻。將其拖放到門(mén)戶(hù)上，或者在導(dǎo)航到包含視頻的文件夾后將其選中。上傳成功后，Cloudinary將其顯示在您的媒體庫(kù)中： 復(fù)制視頻URL，并使用內(nèi)置HTML5<video/>元素將其嵌入到您的網(wǎng)站中。在此之前，請(qǐng)隨時(shí)對(duì)視頻應(yīng)用更多的變換，例如調(diào)整大小，裁剪和添加背景。 您的視頻現(xiàn)在可以在您的站點(diǎn)上使用了。請(qǐng)繼續(xù)閱讀以了解如何將視頻內(nèi)容流式傳輸給訪問(wèn)者。 將視頻嵌入網(wǎng)站Cloudinary提供了一個(gè)SDK，可直接在HTML內(nèi)容內(nèi)交付透明視頻。使用該JavaScriptSDK，您可以跨所有瀏覽器交付內(nèi)容。本節(jié)的其余部分描述了用于向所有瀏覽器傳遞透明視頻的控件。 通常，您可以使用HTML5<video>元素或通過(guò)CloudinaryVideoPlayer將視頻添加到網(wǎng)頁(yè)中。但是，透明視頻是一個(gè)例外。原生HTML5和CloudinaryVideoPlayer可以處理除iOS上的Safari和BigSurMacOS之前的版本以外的所有透明視頻。鑒于Mac和iPhone無(wú)處不在，這是一個(gè)問(wèn)題。 幸運(yùn)的是，CloudinaryJavaScriptSDK可以幫助實(shí)現(xiàn)其injectTransparentVideoElement方法，該方法可以添加在任何地方都可以使用的透明視頻。這是一個(gè)簡(jiǎn)單網(wǎng)頁(yè)上的代碼示例： <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/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath./bootstrap/3.4.1/css/bootstrap-theme.min.css">
<script src="https://code./jquery-1.12.4.min.js"></script>
<script src="https://stackpath./bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https:///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復(fù)制代碼類(lèi)型：[html]正如預(yù)期的那樣，由于視頻的透明部分，您可以看到視頻后面的HTML元素。 此外，您可以使用透明視頻創(chuàng)建有趣的體驗(yàn)，例如，使用JavaScript設(shè)置內(nèi)容以播放或暫停用戶(hù)交互，從而為內(nèi)容和廣告打開(kāi)更多可能性。透明的展示廣告可以成為受眾正在觀看的內(nèi)容的一部分，吸引他們并吸引他們的注意力。在您的網(wǎng)站上，透明視頻還可以吸引觀眾參與內(nèi)容，從而引導(dǎo)他們導(dǎo)航到產(chǎn)品頁(yè)面或與演示進(jìn)行交互。 在其他行業(yè)，透明視頻的應(yīng)用比比皆是。例如，學(xué)術(shù)界的人們可以在要求教師繼續(xù)學(xué)習(xí)課程資料之前，在網(wǎng)站上顯示要求學(xué)生執(zhí)行某些任務(wù)的視頻。 請(qǐng)記住，您可以進(jìn)一步自定義上述腳本來(lái)轉(zhuǎn)換視頻。另外，如果瀏覽器不支持播放視頻所需的所有功能，則最好添加腳本可以渲染的后備值。 采取后續(xù)步驟除了描述用引人注目的透明視頻內(nèi)容來(lái)裝飾網(wǎng)絡(luò)廣告的好處外，本文還說(shuō)明了交互式內(nèi)容為何有用，而老式的靜態(tài)廣告卻沒(méi)有那么有用。您還學(xué)習(xí)了如何收集，購(gòu)買(mǎi)或準(zhǔn)備自己的交互式視頻以在您的網(wǎng)站上顯示，然后將該視頻嵌入到Cloudinary和JavaScript中。 Cloudinary即將推出的視頻編輯功能將基于現(xiàn)有技術(shù)，使您能夠創(chuàng)建具有人工智能（AI）的互動(dòng)鉚釘視頻。然后，您可以輕松地刪除視頻背景并創(chuàng)建透明的疊加層，以嵌入到您的網(wǎng)站中，從而進(jìn)一步提高了用戶(hù)的參與度 |
|
|
來(lái)自： 碼農(nóng)9527 > 《WEB》
