播放器热力图展示的实例和效果

最新推荐文章于 2025-11-30 10:22:24 发布

原创最新推荐文章于 2025-11-30 10:22:24 发布 · 438 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#mysql #播放热力图 #视频热力图 #音视频

视频安全同时被 3 个专栏收录

51 篇文章

订阅专栏

视频加密

41 篇文章

订阅专栏

保利威教育

20 篇文章

订阅专栏

播放热力图是分析视频观看行为的重要工具，能直观展示不同时间段的观众热度。通过高热度区域可识别精彩内容，低热度区域则反映潜在问题点，帮助创作者优化剪辑节奏和内容策略。

相关的组件：

* 初始化热力图组件，做集成
* 示例使用的 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>

注意看下方进度条处，有显示播放热力图，灰色那部分。