滚动控制视频帧

滚动或拖动滑杆,让暂停的视频定位到对应画面。

17 / 22Video scrub打开示例
日轮掠过山脊 01 / 72 帧
  1. 日轮在画面左侧 起点 · 0%
  2. 日轮在画面中央上方 中段 · 50%
  3. 日轮在画面右侧 终点 · 100%
  1. 使用场景

    产品拆解或制作过程。例如读者来回滚动,停在某一步看清细节。

  2. 行为定义

    进度决定视频显示哪一帧。向下滚动看后面的画面,向上滚动可以回看,停下后画面也停在当前位置。

  3. 实现要点

    把进度换算成视频时间,向暂停的视频请求寻帧。一次只处理一个寻帧请求,完成后再定位到最新目标。

原生 HTML / CSS / JS

完整示例,可另存为 HTML 直接打开。

打开示例

查看源码
可打开示例查看完整 HTML。

GSAP 3.15.0

完整示例,从 CDN 加载指定版本。

打开示例

查看源码
可打开示例查看完整 HTML。