html视频播放进度条上如何加入点号，并且鼠标移动到点号上显示关键帧图片

问题是这样的：最近正在做html进行视频处理，想在html视频播放进度条上加入点号，并且鼠标移动到点号上显示关键帧图片。
就像爱奇艺视频播放的下面的效果:

有哪位朋友知道该如何做出点号吗？难道是用若干个点的图片贴在视频进度条下方？我用的是html5中,

 <video src="0.mp4" controls="controls"  style="width:450px;height:300px;">

，这个标签做的，但是视频进度条上没有点号，也不能显示鼠标移动到点号附近，显示出图片的效果。
哪位朋友能指导一下吗，十分感谢。