javascript 视频进度条制作

原生手写进度条

let timerId = null;
    fn();	//进行调用

    function fn() {
        timerId = setInterval(() => {
            //视频总时间
            let totalTime = video.duration;		//通过dir获取
            //视频当前时间
            let curTime = video.currentTime; //通过dir获取
            //页面总宽度
            let totalWidth = document.body.clientWidth; //通过dir获取
            let curWidth = totalWidth * curTime / totalTime; //公式
            //进度当前速度
            document.querySelector('#progress').style.width = curWidth + 'px';
            console.log(1);
        }, 50);
    }```
在暂停按钮出 清除定时器，点继续播放处 进行重新调用即可

html

```javascript
<div class="progress" id="progress">

    </div>

css

.progress{
    height: 4px;
    position: fixed;
    left: 0;
    bottom: 86px;
    width: 0;
    z-index: -100;
    background-color: #f77;
}```