Bilibili 式悬停预览：preview 播放模式实战

列表页的静态封面只能「看脸」；B 站的答案是悬停即播——鼠标停上去，卡片无声循环播放一段精华，移开即复位。这个细节对点击率的提升立竿见影，也被各大平台验证。ZWPlayer 把它做成 mode: 'preview'，一个配置项加四个参数。

悬停预览 图 1:列表卡片悬停中——缩略图区域实时播放视频片段(无声循环)

配置

new ZWPlayer({
  playerElm: 'player',
  url: 'clip.mp4',
  mode: 'preview',
  preview: {
    hoverToPlay: true,   // 悬停触发播放
    startTime: 20,       // 从第 20 秒开始预览(挑精华段)
    duration: 8,         // 预览 8 秒后循环
    resetOnLeave: true,  // 移开后复位到起点画面
  },
  controlbar: false,     // 预览态通常隐藏控制条
});

四个参数各自解决一个产品问题：

  • startTime：预览别从黑屏片头开始——指到内容最抓人的段落；
  • duration：3～8 秒是甜点——足够传达内容，不至喧宾夺主；
  • resetOnLeave：多位观众/多次悬停都从同一画面开始，行为可预期；
  • 静音：预览强制静音（浏览器自动播放策略的要求，也是场景礼貌）。

列表页实践

  • 一卡一实例：每个卡片一个 preview 播放器，hoverToPlay 天然错峰——同时只有鼠标下那张在播，性能可控；
  • 配缩略图：未悬停时显示进度条雪碧图取的封面帧，悬停接管为动态——静态与动态无缝衔接；
  • 流式场景：feed 流滚动中频繁创建销毁播放器会抖——复用实例换 url（player.play(url)）比反复 new 稳；
  • 移动端：无 hover，退化为点击进详情页预览——预览参数同样生效。

与正片播放的接力

列表页预览、详情页正片是两个场景两个实例；同页切换时把 preview 模式还原（mode 切回 standard）再全屏播放即可。ZWPlayer 的模式系统（standard/music/preview/auto）互相独立切换，音乐模式同理。

适合谁

  • 内容站/媒体站：列表页点击率的经典优化位；
  • 教育平台：课程卡片预览讲师风格；
  • 电商/UGC：商品与作品卡片的动态化。

相关文章