自制简易视频播放器

HTML结构：

    <video src="./1.mp4" id="video"></video>
    <!-- 视频控件 -->
    <div class="playBox">
        <!-- 播放/暂停按钮 -->
        <span id="btn"></span>
        <!-- 进度条 -->
        <div class="progress"></div>
    </div>

CSS结构：

        *{
            margin: 0;
            padding: 0;
        }
        #video{
            width: 100%;
        }
        .playBox{
            width: 100%;
            height: 50px;
            background-color: #fff;
            position: fixed;
            left: 0;
            bottom: 0;
            text-align: center;
            padding: 5px 0;
        }
        #btn{
            width: 50px;
            height: 50px;
            display: inline-block;
            background: url(./play.png);
        }
        .progress{
            height: 5px;
            position: absolute;
            top: 0;
            left: 0;
            background-color: orangered;
        }

JS实现：

 <script>
        let btn=document.querySelector('#btn')
		let video=document.querySelector('#video')
		let progress=document.querySelector('.progress')
		
		let flag=true
		let timeId=null
		
		btn.addEventListener('click',function(){
			if(flag){
				this.style.background='url(./pause.png)'
				video.play()
				// 进度条
				handleProgress()
			}else{
				this.style.background='url(./play.png)'
				video.pause()
				// 进度条
				clearInterval(timeId)
			}
			flag=!flag
		})
		function handleProgress(){
			timeId=setInterval(function(){
				// 视频当前时间
				let currentT=video.currentTime
				// 视频总时间
				let allT=video.duration
				// 屏幕宽度
				let w=document.body.offsetWidth
				progress.style.width=`${(currentT/allT)*w}px`
			},100)
		}
</script>

实现效果：