VIDEOJS：在每个播放列表项之前播放前贴片添加

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

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

fw-videojs-playlist

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

Answer 2

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

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