node.js - 视频 : playing a pre-roll add before each playlist item

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

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

1. 这会破坏播放列表的“自动前进”设置(广告结束后不会开始播放下一个视频)，并且
2. 这会将播放器置于“广告显示”模式(洗涤器不可用等)。

有没有一种简单的方法可以通过编程方式说“立即播放广告”？我尝试过使用 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 的原型(prototype)应在初始化播放器之前更改。

这个解决方案有效，但感觉很hacky，所以如果有人能想出更干净的东西，请分享!