Question

我正在使用videojs-playlist插件和Google的videojs-ima插件。一切都在游泳，除了我在第一个视频之前只收到一个预加载广告。我想在播放列表中的每个视频之前想要一个。基本设置是样板，但供参考：

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();
});

这个在我想要的地方播放广告，但是

这打破了播放列表的“自动增强”功能。设置（下一个视频在广告结束时不会开始播放）和
这会让玩家进入＆＃34;广告显示＆＃34;模式（洗涤器不可用等）。

有没有一种简单的方法可以说，＆＃34;现在播放广告＆＃34;编程？我已经尝试过，没有快乐地使用ima插件和它所依赖的contrib-ads插件所暴露的所有看似适用的方法。我在这里承认，这是我第一次处理投放广告的视频，所以我有点像菜鸟。

Answer 1

我正在尝试做同样的事情。就像你在事件上调用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的原型应该在初始化播放器之前更改。

这个解决方案有效，但感觉很乱，所以如果有人能想出更清洁的东西，请分享！

Answer 2

我最终分叉videojs-playlist，并添加了覆盖player.src方法的选项。随意使用它：

fw-videojs-playlist

有关如何使用它的详细信息都在github自述文件中（包括ima.setContentWithAdTag的示例）

VIDEOJS：在每个播放列表项

2 个答案: