VIDEOJS：在每個播放列表項目前播放前貼片添加

我正在使用videojs-playlist插件以及Google的videojs-ima插件。除了我只在第一個視頻之前收到預加載廣告之外，一切都可以順利進行。我想在播放列表中的每個視頻之前。基本設置爲樣板，但供參考：VIDEOJS：在每個播放列表項目前播放前貼片添加

this.player = videojs('currentvideo', { autoplay : true, fluid : true }); 
this.player.playlist(this.playlist); 
this.player.playlist.autoadvance(5); 

const skippable_linear = {google's test ad}; 
const options = { 
    id: 'currentvideo', 
    adTagUrl: skippable_linear, 
    debug : true 
}; 

this.player.ima(
    options 
); 
this.player.ima.requestAds();

我試圖從一個「結束」事件處理中手動調用廣告的各種方式，如再次調用requestAds：

const _this = this; 
this.player.on('ended', function(){ 
    /* some other stuff */ 
    _this.player.ima.requestAds(); 
});

這播放廣告，我想要它，但

這打破播放列表的'autoadvance'設置（下一個視頻doesn'當廣告結束時開始播放），並且
這使得播放器進入「廣告顯示」模式（洗滌器不可用等）。

是否有一種簡單的方式來通過編程方式說「現在播放廣告」？我已經嘗試過，沒有快樂，使用ima插件和它所依賴的contrib-ads插件公開的所有看似適用的方法。我會在這裏承認，這是我第一次不得不處理播放廣告的視頻，所以我是一個小菜鳥。

來源

2017-03-13 axlotl

我正在嘗試做同樣的事情。就像你我在調用player.ima.requestAds()事件時失敗一樣。我挖得更深，我能拿出的最好的東西就是我分享的東西。

根據videojs-ima API你必須使用setContentWithAdTag方法，而不是你用來切換播放器內容的任何方法。在我們的案例中，它是player.playlist.next方法。

我將videojs-ima examples中的代碼與原來的playlist.next合併爲我自己的next。

然後相當殘暴地取代原來的插件方法。

下面的代碼：

player.playlist(myPlayilst); 
player.playlist.autoadvance(2); 
player.playlistUi(); //videojs-playlist-ui 

player.ima({ 
    id: 'video5', 
    adTagUrl: 'thy adserver request' 
}); 

//override playlist.next 
player.playlist.next = function(){ 

    var nextIndex = 0, 
     playlist = this.player_.playlist, 
     list = this.player_.playlist(); 

//everything below is copied directly from the original `next` (except for the "//load with ad") 

    // Repeat 
    if (playlist.repeat_) { 
     nextIndex = playlist.currentIndex_ + 1; 
     if (nextIndex > list.length - 1) { 
      nextIndex = 0; 
     } 

    } else { 
     // Don't go past the end of the playlist. 
     nextIndex = Math.min(playlist.currentIndex_ + 1, list.length - 1); 
    } 

    // Make the change 
    if (nextIndex !== playlist.currentIndex_) { 

    //load with ad 
     this.player_.playlist.currentItem(nextIndex); 
     this.player_.ima.setContentWithAdTag(
      this.player_.playlist.currentItem(), 
      null, 
      true); 

     this.player_.ima.requestAds(); 
    ///// 

     return list[playlist.currentItem()]; 
    } 
}

你可能需要重寫改變當前的播放，像playlist.previous其他方法。

我使用videojs-playlist-ui所以在我的情況下，需要更改名爲switchPlaylistItem_的onclick處理程序。我使用了一些好老蠻力是這樣做的：

videojs.getComponent('PlaylistMenuItem').prototype.switchPlaylistItem_ = function(e){ 
    this.player_.playlist.currentItem(this.player_.playlist().indexOf(this.item)); 
    this.player_.ima.setContentWithAdTag(
     this.player_.playlist.currentItem(), 
     null, 
     true); 
    this.player_.ima.requestAds(); 
};

PlaylistMenuItem的原型應該初始化播放器來改變之前。

這種解決方案的工作原理，但它感覺很不舒服，所以如果任何人都可以拿出更清潔的東西，請分享！

來源

2017-05-05 15:09:22

哦，這看起來很有希望！我最終創建了自己的播放列表（放棄播放列表插件），並在每個視頻後調用this.player.dispose（），然後重新創建播放器。將看這個。我的解決方案是不理想的。 – axlotl

老實說，我認爲最好是編寫自己的播放列表。最好的方法是分叉videojs-playlist，並將「next」和「prev」更改爲您的目的。 –

順便說一句 - 對不起，成爲這樣一位獵頭者 - 但是你可以通過任何一個機會來接受或接受我的回答嗎？我會很感激:) –

我結束了分叉videojs-playlist，並添加了重寫player.src方法的選項。隨意使用它：關於如何使用它都在github上自述

fw-videojs-playlist

詳細信息（包括ima.setContentWithAdTag爲例）

來源

2017-08-04 13:27:29

VIDEOJS：在每個播放列表項目前播放前貼片添加

回答

相關問題