Videojs Preroll与Playlist插件冲突问题求助

我想用Video.js的preroll插件给视频添加前置广告，单独使用该插件时功能正常，但启用playlist插件后两者出现冲突——视频播放结束后无法自动切换到下一个视频，禁用preroll插件后，playlist的自动切换功能恢复正常。

我的代码如下：

var player = videojs("examplePlayer", {
            playbackRates: [0.25, 0.5, 1, 1.5, 2, 2.5],
            controls: true,
            loop: false,
        });
        player.playlist([
            {
                sources: [
                    {
                        src: "http://media.w3.org/2010/05/sintel/trailer.mp4",
                        type: "video/mp4",
                    },
                ],
                poster: "http://media.w3.org/2010/05/sintel/poster.png",
            },
            {
                sources: [
                    {
                        src: "http://media.w3.org/2010/05/bunny/trailer.mp4",
                        type: "video/mp4",
                    },
                ],
                poster: "http://media.w3.org/2010/05/bunny/poster.png",
            },
            {
                sources: [
                    {
                        src: "http://vjs.zencdn.net/v/oceans.mp4",
                        type: "video/mp4",
                    },
                ],
                poster: "http://www.videojs.com/img/poster.jpg",
            },
            {
                sources: [
                    {
                        src: "http://media.w3.org/2010/05/bunny/movie.mp4",
                        type: "video/mp4",
                    },
                ],
                poster: "http://media.w3.org/2010/05/bunny/poster.png",
            },
            {
                sources: [
                    {
                        src: "http://media.w3.org/2010/05/video/movie_300.mp4",
                        type: "video/mp4",
                    },
                ],
                poster: "http://media.w3.org/2010/05/video/poster.png",
            },
        ]);

        // Play through the playlist automatically.
        player.playlist.autoadvance(0);
        // fire up the plugin
        player.preroll({
            src: {
                src: "./reklam.mp4",
                type: "video/mp4",
            },
            href: "http://videojs.com",
            adsOptions: { debug: true },
            skipTime: 5,
            adSign: true,
        });

原因分析 #

preroll插件通常会劫持播放器的ended事件来处理广告逻辑，这会覆盖playlist插件依赖的自动切换触发事件，导致视频播放结束后playlist无法响应切换。

方案一：监听广告完成事件，手动触发playlist切换 #

在preroll初始化后，监听广告播放完成的事件，手动调用playlist的切换逻辑，绕过被干扰的ended事件：

// 初始化preroll后添加以下代码
player.on('preroll:complete', function() {
  // 获取当前播放项索引和总数量
  var currentIndex = player.playlist.currentItem();
  var totalItems = player.playlist.items().length;
  
  // 如果不是最后一个视频，自动切换到下一个
  if (currentIndex < totalItems - 1) {
    setTimeout(function() {
      player.playlist.next();
    }, 0);
  }
});

方案二：调整preroll插件配置，保留原生ended事件 #

部分preroll插件支持通过配置保留原生ended事件，避免与playlist冲突。尝试修改adsOptions：

player.preroll({
  src: {
    src: "./reklam.mp4",
    type: "video/mp4",
  },
  href: "http://videojs.com",
  adsOptions: { 
    debug: true,
    preserveEnded: true // 新增配置，若插件支持则保留原生ended事件
  },
  skipTime: 5,
  adSign: true,
});

方案三：调整初始化顺序，优先初始化preroll #

修改插件初始化顺序，先加载preroll再配置playlist，确保playlist的事件绑定优先级更高：

var player = videojs("examplePlayer", {
  playbackRates: [0.25, 0.5, 1, 1.5, 2, 2.5],
  controls: true,
  loop: false,
});

// 先初始化preroll插件
player.preroll({
  src: {
    src: "./reklam.mp4",
    type: "video/mp4",
  },
  href: "http://videojs.com",
  adsOptions: { debug: true },
  skipTime: 5,
  adSign: true,
});

// 再配置playlist和自动切换
player.playlist([
  // 你的视频列表内容
]);
player.playlist.autoadvance(0);

内容的提问来源于stack exchange，提问作者Hiedrass