2

我正在使用 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 插件所公开的所有看似适用的方法，但并不高兴。我在这里承认这是我第一次不得不处理运行广告的视频，所以我有点菜鸟。

4

2 回答 2

2

我正在尝试做同样的事情。就像你一样，我在调用player.ima.requestAds()事件时失败了。我挖得更深，我能想到的最好的就是我在下面分享的内容。

根据 videojs-ima API，您必须使用该setContentWithAdTag方法而不是您使用的任何方法来切换播放器内容。在我们的例子中，它是player.playlist.next方法。

我将videojs-ima 示例中的代码与原始代码结合起来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在我的情况下使用它，因此必须更改名为.onclick 的处理程序switchPlaylistItem_。我使用了一些很好的旧蛮力来做到这一点：

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，所以如果有人能想出更干净的东西，请分享！

于 2017-05-05T15:09:22.857 回答
1

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

fw-videojs-播放列表

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

于 2017-08-04T13:27:29.457 回答