指南：廣告合作夥伴整合
概覽
例如，如果您的廣告系統符合Google IMA3的要求，則您不需要此信息，而只需使用IMA3中的現有插件即可，使用IMA3插件指南進行廣告。
如果您確定需要此功能，那麼此內容將說明與Brightcove Player進行廣告集成所需的廣告API框架。您可以看到Brightcove生成的該框架的兩種實現，它們是針對Google的IMA3和FreeWheel的（下一節中顯示的參考文檔）。
同樣，本文檔不適用於希望在視頻中使用現有廣告框架的客戶。更適合這些客戶的文檔是：
廣告框架功能
Brightcove提供了廣告API框架作為自定義廣告插件的基礎。該框架提供了與Brightcove Player配合使用的視頻廣告庫所需的通用功能，從而減少了廣告集成所需編寫的代碼。該框架作為一個開源項目提供，您可以在該項目上進行構建。可從GitHub存儲庫中獲得項目代碼videojs-contrib-ads。
廣告框架使廣告合作夥伴能夠：
- 完全控制廣告體驗（即播放廣告時播放器的外觀和行為）。
- 與自定義或專有廣告服務器一起使用。
- 管理底層的廣告實施細節，例如確定何時發出廣告請求以及如何緩衝廣告素材。
- 輕鬆與視頻分析提供商和Brightcove Player生態系統進行互操作。
基礎知識
要使用和建立廣告API框架，您需要對Brightcove Player插件架構有透徹的了解。以下文檔提供了此知識：
如果需要，可以在以下位置從Brightcove的角度快速瀏覽視頻廣告：
使用框架
以下各節提供有關使用框架的詳細信息。
包括框架資源
要使用該插件，您必須首先確保包含該插件的CSS和JavaScript。
<link rel="stylesheet" href="//mypath/videojs.ads.css">
<script src="//mypath/videojs.ads.js"></script>
包含JavaScript後，您就可以調用該函數來初始化廣告框架。
<script type="text/javascript">
videojs.getPlayer('myPlayerID').one('loadedmetadata', function(){
var myPlayer = this;
// Initialize the ad framework
myPlayer.ads();
});
</script>
組態選項
該框架有許多可用的配置選項。例如，有一個timeout選項。要設置此選項，您將使用以下代碼：
<script type="text/javascript">
videojs.getPlayer('myPlayerID').one('loadedmetadata', function(){
var myPlayer = this;
// Initialize the ad framework
myPlayer.ads({
"timeout": 3000
});
});
</script>
下表提供了選項列表：
| 選項 | 類型 | 預設 | 描述 |
|---|---|---|---|
timeout |
數 | +5000 | 播放之前等待廣告實施初始化的最長時間（以毫秒為單位） |
prerollTimeout |
數 | +1000 | 等待廣告實施啟動預錄的最長時間（以毫秒為單位） |
postrollTimeout |
數 | 100 | 等待廣告實施啟動後期製作的最長時間（以毫秒為單位） |
debug |
布林 | 假的 | 如果debug設置為true，則廣告插件將在播放期間輸出有關其當前狀態的其他信息 |
活動
以下事件分為兩種不同的類型。分組及其描述如下。
的adstart和adend框架觸發事件以響應廣告集成商的方法調用。這些事件不應由廣告集成商直接觸發。
| 事件 | 描述 |
|---|---|
| Adstart | 播放器已進入線性廣告播放模式 |
| 堅持 | 播放器已退出線性廣告播放模式 |
的adskip和adtimeout事件是廣告集成商可以選擇觸發事件的可選事件，以指示播放器應跳過前片或後片機會。
| 事件 | 描述 |
|---|---|
| adskip | 播放器正在跳過線性廣告機會，內容播放應立即恢復 |
| adtimeout | 插件管理的超時已到期，常規視頻內容已開始播放 |
運行時設置
插件初始化後，便可以使用一個屬性來修改其行為。
| 屬性 | 描述 |
|---|---|
| contentSrc | 此屬性用於確定何時加載新視頻，以便可以將播放器重置為“準備顯示預卷”狀態。廣告提供商通常不會與之互動，但是希望更改視頻源以實現再現選擇器的插件作者可以修改contentSrc這樣，在發生音像切換時就不會啟動預卷。 |
範例
本節提供了一個帶有完整工作示例的實現示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contrib ads ad plugin</title>
</head>
<body>
<video-js id="myPlayerID"
data-account="1752604059001"
data-player="default"
data-embed="default"
controls=""
data-video-id="6077029038001"
data-playlist-id=""
data-application-id=""
width="960" height="540"></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-ads/6.9.0/videojs.ads.js"></script>
<script>
const player = videojs.getPlayer("myPlayerID");
let creative = '';
player.ads();
player.on('contentupdate', function () {
// Console output
console.log("### videojs EVENT: contentupdate");
// can fetch ad inventory here...
player.setTimeout(() => {
creative = 'https://solutions.brightcove.com/bcls/ads/bc-ads/bcls-ad-1-8seconds.mp4';
}, 100);
player.trigger('adsready');
// Console output
console.log("### videojs EVENT: adsready");
});
player.on('loadedmetadata', function () {
// Console output
console.log("### videojs EVENT: loadedmetadata");
});
player.on('readyforpreroll', function () {
// Console output
console.log("### videojs EVENT: readyforpreroll");
player.ads.startLinearAdMode();
// play your linear ad content
player.src(creative);
player.one('durationchange', function () {
player.play();
});
// when ad has finished restore player
player.one('adended', function () {
// Console output
console.log("### videojs EVENT: adended");
player.ads.endLinearAdMode();
});
});
player.on('ended', function () {
// Console output
console.log("### videojs EVENT: ended");
});
</script>
</body>
</html>