javascript - 移动端用audio标签制作音频播放器进度条出现的问题？

Question

var percentage = (Audio.currentTime * 100 / Audio.duration) + '%';
if (percentage == "NaN%") {
       percentage = 0 + '%';
    }
var styles = {
    "left": percentage
    };
$audio_progress.css(styles);

如果通过上边的代码实现进度条,那个红点（$audio_progress）在音频结束后（left：100%）会超过蓝色区域，我该对代码进行怎样的修改呢？

如果那个红点是可以用户滑动来实现任意时间段音频的播放，我该如何去实现这个功能呢？
毫无头绪，请各位前辈指点迷经？

Answer 1

<p style="width: 300px;height: 20px;background: blue;position: relative">
    <p style="width: 290px;height: 20px;background: blue;position: relative">
        <p style="position: absolute;left: 100%;top: 5px;width: 10px;height: 10px;background: yellow"></p>
    </p>
</p>

这个方法不知道对你没有用滑块外面包两层，第二层的宽度是第一层宽度减去滑块的宽度

Answer 2

建议用video.js，支持自定义皮肤（也就是样式啦）

Answer 3

首先我回答一下超出等我问题。你 left:100% 应该还需要减去 红点（$audio_progress）的宽度吧。