PPBar开源项目做播放器进度条的例子-优快云博客

PPBar是一款开源的视频播放器进度条组件，提供丰富的可视化功能。主要特性包括热力图（支持自定义时间分段和数据点）、缩略图预览（可配置行列数和尺寸）以及章节标记功能。该组件兼容多种播放器，支持UI定制可模拟YouTube/B站等平台的进度条样式。通过简单API即可实现动态数据更新、播放器联动等交互效果，适用于各类视频播放场景。

PPBar

PPBar是一款功能强大的视频播放器进度条组件，支持热力图、缩略图、章节标记等丰富功能。热力图可以直观展示视频各时间段的观看量变化，支持自定义时间分段和数据点。缩略图功能允许预览视频关键帧，可配置行列数、尺寸等参数。该组件兼容多种播放器（如保利威播放器），提供灵活的UI定制选项，可模拟YouTube/B站等平台的进度条样式。通过简单的API调用即可实现热力图数据动态更新、控制栏联动等交互效果，适用于各类视频播放场景。

项目开源地址：https://github.com/web-streaming/ppbar

功能强大的播放器进度条，支持章节、标记、热力图、缩略图、直播、旋转等功能。还支持自定义 UI，可以将它打造成 Youtube 或 B站的播放器进度条的外观。

项目地址：https://github.com/web-streaming/ppbar/blob/HEAD/README_zh.md

热力图

热力图用于标记整个视频不同时间段观看量的变化。比如 0 到 5 秒观看量是 100，5 到 10 秒观看量是 200 ... 然后将这些观看量绘制成曲线就是 ppbar 的热力图了。

const bar = new ProgressBar(document.body, {
  heatMap: {
    points: [1, 2, 3],
    defaultDuration： 5,
  }
})

上面代码配置表示，每个点表示的时长为 5 秒，也就是 0 - 5 的值是 1，5 - 10 为 2，10 - 15 为 3。

另外还支持给每个点单独设置时长。

const bar = new ProgressBar(document.body, {
  heatMap: {
    points: [{ duration: 10, score: 1 }, { score: 2 }, { duration: 2, score: 3 }],
    defaultDuration： 5,
  }
})

上面配置中，第一个和第三个有自己的时长，第二个则是使用 defaultDuration。

如果希望热力图和 Youtube 一样，只有 hover 的时候才显示，可以设置 hoverShow。

const bar = new ProgressBar(document.body, {
  heatMap: {
    points: [1, 2, 3],
    defaultDuration： 5,
    hoverShow: true
  }
})

缩略图

缩略图用于预览视频的不同时间点的画面。一张缩略图由多张小缩略图拼接而成。

const bar = new ProgressBar(document.body, {
  thumbnail: {
    start: 0, // 缩略图开始时间，单位秒
    gap: 10, // 单个小缩略图表示的时长
    row: 5, // 大缩略图是又几行小缩略图组成
    col: 5, // 大缩略图是又几列小缩略图组成
    width: 160, // 单个小缩略图宽度
    height: 90, // 单个小缩略图的高度
    images: [], // 缩略图地址数组
  }
})

以上参数的值都是默认参数。

另外如果你不希望展示缩略图可以将它设置为 false。

const bar = new ProgressBar(document.body, {
  thumbnail: false
})

相关的组件：

* 初始化热力图组件，做集成
* 示例使用的 PPBar 来实现，仓库链接：https://www.npmjs.com/package/ppbar
* 也可以自行实现热力图效果或者其他第三方仓库实现

应用例子：

<script src="https://player.polyv.net/resp/vod-player/latest/player.js"></script>
  <script>
    function getHeatPoints() {
      return [9592, 9692, 10063, 41138, 30485, 23905, 10966.5, 10316.5, 8533.5, 7249, 7181, 6813, 5929, 18046.5,  8817, 3684.5, 4863.5, 7818, 11122, 11977.5, 12045.5, 6882, 8616, 3389.5, 2791.5, 2378, 2415, 3561.5, 4563.5, 5351, 5166, 3649.5, 3817.5, 6808, 3503, 2831.5, 2617.5, 2401, 2149, 2478.5, 2498.5, 2311.5, 1843.5, 1800, 2101, 2002.5, 2882.5, 3380, 3880, 3966, 3257, 8804, 5440, 6468, 6432, 3885, 3611, 7348, 11954, 12317, 5834, 1549.5, 1658.5, 1649, 2053, 3831.5, 6050.5, 7764, 8290, 8549, 5757, 1898, 1393, 1263.5, 1356.5, 2841, 5774, 4294, 1798, 1260.5];
    }
    // 创建热力图节点
    const $heatMap = document.createElement('div');
    $heatMap.classList.add('heat-map');
 
    /**
     * 初始化热力图组件
     * 示例使用的 PPBar 来实现，仓库链接：https://www.npmjs.com/package/ppbar
     * 也可以自行实现热力图效果或者其他第三方仓库实现
    */
    const bar = new ppbar.ProgressBar($heatMap);
    var pdiv = document.getElementById("player");
      var w = pdiv.offsetWidth;    // 返回元素的总宽度
      var h = pdiv.offsetWidth*0.5625;    // 返回元素的总高度
 
    const player = polyvPlayer({
      wrap: '#player',
      width: '100%',
      height: h, df: 3, autoplay: 'true',
      vid: 'b5487973205af63cc2afe3bf58cb3b90_b',
      //vid: '88083abbf5b42072ec029201d9fee095_8',
      
      /**
       * 传入参数 progressSlot，参数类型是 HTMLElement
       * 传入后会将该节点添加到进度条控件里面，样式可参考页面的设置或根据实际调整
      */
      progressSlot: $heatMap,
      videoKeyframes: [
        {
          keycontext: '打点1',
          keytime: 20,
        },
        {
          keycontext: '保利威',
          btnDesc: '前往',
          btnHref: 'https://www.polyv.net/',
          keytime: 68,
        },
        {
          keycontext: '打点3',
 
          keytime: 80,
        },
        {
          keycontext: '打点4',
          keytime: 90,
        }
      ]
      // hideControlBar: true,
    });
 
    // 播放器初始化完成，更新热力图数据，切换视频会再次触发
    player.on('s2j_onPlayerInitOver', () => {
      const duration = player.j2s_getDuration();
      // 参数参考 https://www.npmjs.com/package/ppbar#heatmap
      bar.updateConfig({
        duration: duration,
        heatMap: {
          points: getHeatPoints(),
          defaultDuration: 5,
        }
      });
    });
 
    // 保利威播放器控制栏显示则显示热力图
    player.on('controlShow', () => {
      $heatMap.classList.remove('hide');
    });
 
    // 控制栏隐藏则隐藏热力图
    player.on('controlHide', () => {
      $heatMap.classList.add('hide');
    });
 
    document.getElementById('switchMedia').addEventListener('click', () => {
      player.changeVid('88083abbf5b42072ec029201d9fee095_8');
    });
  </script>

效果：