VideoJS 7.4.1 如何实现悬停进度条显示MPD配置的流内缩略图

从提供的MPD配置中提取核心计算参数 #

直接基于给出的MPD节点拆解所有缩略图关联规则，不需要额外解析外部配置：

• 单张独立缩略图覆盖的视频时长：2秒，来自SegmentTemplate节点的duration="2"配置
• 缩略图资源路径规则：以MPD所在目录为基准，路径格式为thumbs/[序号].jpg，来自SegmentTemplate的media规则、Representation节点的id="thumbs"配置
• 资源序号起始值：0，来自SegmentTemplate的startNumber="0"配置
• 单张缩略图展示尺寸：宽160px、高90px，来自Representation节点的width、height属性
• 缩略图瓦片布局：1x1，即每张资源为单张独立时间点的缩略图，不需要对整图做切割展示，来自EssentialProperty节点的value="1x1"配置

分步实现逻辑 #

• 自定义预览容器挂载
  在VideoJS的进度条DOM层（.vjs-progress-control节点下）新增一个固定定位的预览元素，默认设置为隐藏、pointer-events: none（避免遮挡进度条原生交互）、z-index高于所有控制层元素，位置初始对齐进度条上方。
• 进度条悬停事件绑定
  给进度条节点绑定mousemove监听事件，核心计算逻辑：
  1. 计算当前悬停位置对应的视频时间点：
     hoverTime = mouseXOffset / progressBarTotalWidth * videoTotalDuration
  2. 匹配当前时间点对应的缩略图资源序号：
     thumbIndex = Math.floor(hoverTime / 单图覆盖时长) + 起始序号值
     代入你的配置后计算公式为：thumbIndex = Math.floor(hoverTime / 2)
  3. 按照路径规则拼接完整的缩略图地址，赋值给预览容器的背景图；同时提前预加载相邻序号的缩略图资源，减少快速移动鼠标时的加载延迟
  4. 动态调整预览容器的水平位置，让容器始终对齐鼠标悬停的进度条位置，避免视觉偏移
• 鼠标离开的清理逻辑
  给进度条节点绑定mouseleave监听事件，触发时隐藏预览容器，清空当前加载的图片地址，减少不必要的资源占用。

*VideoJS 7.4.1版本专属适配注意点 #

• 该版本*没有内置DASH流缩略图解析能力，也不支持v8版本才推出的内置缩略图组件，所有预览逻辑需要手动实现，不要直接引用高版本的现成组件代码
• 计算缩略图序号时增加边界钳制逻辑：当计算得到的序号超出有效范围（小于起始值、大于总时长/单图覆盖时长得到的最大序号）时，直接取边界值，避免请求无效的404资源
• 因为当前配置是1x1的单图布局，不需要实现瓦片切割的背景偏移逻辑；后续如果换成多列多行的瓦片缩略图（比如4x4布局），再根据单图尺寸、瓦片行列数计算对应的background-position即可

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