HTML5进度栏：通过JavaScript添加标记

Question

我有一个带有进度条元素的HTML5视频元素

<video id="media-video" controls>
    <source id="media-source" src="video.mp4" type="video/mp4">
</video>
<div id="media-controls-progress">
    <progress id="progress-bar" min="0" max="100" value="0">0% played</progress>
</div>

我想在此进度条上添加标记。在JavaScript中，我定义了标记应该可见的秒数。

var markers = [4, 10, 12]

我想在没有任何库的情况下解决此问题，但是我没有通过Google找到解决方案。