js实现简单的视频播放

功能1：播放暂停切换

        思路：准备一个播放的图片和一个暂停的图片；

                   利用标杆思想，设置一个flag变量，播放的时候将flag设置为false，暂停的时候设置为true，如果flag为true则播放同时改变为播放图片，为false则暂停同时改变为暂停图片

功能2：进度条显示

        思路：首先要获取视频播放的当前时间用currentTime()获取，还有视频的总时间，duration()来获取，用document.body.offsetWidth()获取当前屏幕的宽度

        进度条的宽度=（当前时间/总时间）*屏幕宽度

功能3：拖动进度条到某个位置开始播放

思路：用event.clientX()返回当事件被触发时鼠标指针相对于浏览器页面（或客户区）的水平坐标。

        此时进度条的宽度=event.clientX()+‘px’

        此进度条长度所对应的视频时间：(e.clientX / document.body.offsetWidth) * video.duration

代码如下：

 <video src="./1.mp4" id="video"></video>
    <div id="playBox">
        <!-- 播放按钮 -->
        <span id="playBtn"></span>
        <!--进度条 -->
        <div id="compro">
            <div id="progress">
            </div>
        </div>
    </div>

   * {
            margin: 0;
            padding: 0;
        }
        
        #video {
            width: 100%;
        }
        
        #playBox {
            background-color: #fff;
            width: 100%;
            height: 50px;
            padding: 10px 0;
            position: fixed;
            left: 0;
            bottom: 0;
            text-align: center;
        }
        
        #playBtn {
            width: 50px;
            height: 50px;
            display: inline-block;
            background: url(./play.png) no-repeat;
        }
        
        #compro {
            position: absolute;
            top: 0;
            left: 0;
            height: 5px;
            width: 100%;
            background-color: rgba(173, 255, 47, 0.4);
        }
        
        #progress {
            /* width: 100%; */
            height: 5px;
            background-color: rgb(173, 255, 47);
            position: absolute;
            top: 0;
            left: 0;
        }

   window.onload = function() {
            let flag = true
            let timeId = null
            playBtn.addEventListener('click', function() {
                    if (flag) {
                        video.play()
                        playBtn.style.background = "url('./play.png')"
                        progressBar()
                    } else {

                        video.pause()
                        playBtn.style.background = "url('./puse.png')"
                        clearInterval(timeId)
                    }
                    flag = !flag
                })
                // 进度条
            function progressBar() {
                timeId = setInterval(function() {
                    // 获取屏幕的宽度
                    let ctime = video.currentTime
                    let alltime = video.duration
                    let swidth = document.body.offsetWidth
                    let wval = (ctime / alltime) * swidth
                        // console.log(ctime, alltime, swidth);
                    progress.style.width = wval + 'px'
                    if (ctime == alltime) {
                        progress.style.width = 0 + 'px'
                    }
                }, 100)
            }
            // 拖动进度条
            compro.addEventListener('click', function(e) {
                // 改变progress的宽度
                progress.style.width = e.clientX + 'px'
                    // 获取当前宽度的视频播放时间
                video.currentTime = (e.clientX / document.body.offsetWidth) * video.duration
                progressBar()
            })

        }