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：在每个播放列表项目前播放前贴片添加

回答

相关问题