效果圖如下

GIF.gif

html結(jié)構(gòu)部分

<div class="player">
    <video id="video" muted poster="images/video_poster.png">
        <source src="https://video.pearvideo.com/mp4/adshort/20190702/cont-1572578-14079299_adpkg-ad_sd.mp4">
    </video>
    <!--播放控件-->
    <div class="controls">
        <div class="playBtn"></div>
        <div class="progress">
            <div class="duration"></div>
            <i></i>
        </div>
        <div class="time">
            <span class="current">00:00</span>/<span class="totle">00:30</span>
        </div>
    </div>
</div>

JS部分

var playBtn = document.querySelector('.playBtn'),
    video = document.querySelector('#video'),
    duration = document.querySelector('.duration'),
    durationIcon = document.querySelector('.progress i'),
    progress = document.querySelector('.progress'),
    total = document.querySelector('.time .totle'),
    current = document.querySelector('.time .current'),
    cw = document.body.clientWidth ||document.documentElement.clientWidth,//屏幕寬度 
    oL,//鼠標(biāo)相對于拖拽圓點的偏移距離
    //滑塊寬度的一半
    cirW = durationIcon.offsetWidth/2,
    rate,
    total_time,//視頻總時長
    current_time; //現(xiàn)在時間
//當(dāng)瀏覽器能夠開始播放指定的視頻時      
video.addEventListener('canplay',function(){    
    //播放暫停按鈕切換
    playBtn.onclick = function(){
        this.classList.toggle('pause');
        if(video.paused){
            video.play();
        }else{
            video.pause();
        }
    }       
    //顯示總時長
    total_time = video.duration;//視頻總時長
    var m = parseInt(total_time/60); //分
    var s = parseInt(total_time%60); //秒
    m = m >= 10 ? m : "0"+m;
    s = s >= 10 ? s : "0"+s;
    total.innerHTML = m + ":" + s;
    //顯示當(dāng)前播放時間
    video.addEventListener('timeupdate',function(){
        current_time = this.currentTime;
        var _m = parseInt(current_time/60); //分
        var _s = parseInt(current_time%60); //秒
        _m = _m >= 10 ? _m : "0"+_m;
        _s = _s >= 10 ? _s : "0"+_s;
        current.innerHTML = _m + ":" + _s;
        //顯示當(dāng)前播放進度條
        var new_width = (current_time/total_time)*progress.offsetWidth;
        duration.style.width = new_width + "px";
        durationIcon.style.left = (new_width - cirW) + 'px';    
    })
    //播放結(jié)束時
    video.addEventListener("ended",function(){
        playBtn.classList.remove('pause');
    })
    //移動端進度條拖動
    durationIcon.addEventListener('touchstart',function(e){
        var ev = e || window.event;
        var touch = ev.targetTouches[0];        
        oL = touch.clientX - durationIcon.offsetLeft - progress.offsetLeft;//鼠標(biāo)相對于拖拽圓點的偏移距離     
    })
    durationIcon.addEventListener('touchmove',function(e){
        e.preventDefault();
        var ev = e || window.event;
        var touch = ev.targetTouches[0];
        var oLeft = touch.clientX - progress.offsetLeft - oL ; //滑塊最左端距離父元素最左端的距離
        var durationWidth = oLeft + cirW;
        //拖動邊界檢測
        if(oLeft<-cirW){
            oLeft = -cirW;
            durationWidth = 0;
            
        }else if(oLeft>progress.offsetWidth- cirW){
            oLeft = progress.offsetWidth - cirW;
            durationWidth = progress.offsetWidth;
        }       
        //拖動實時改變進度條
        durationIcon.style.left = oLeft + 'px'; 
        duration.style.width = durationWidth + 'px';
        rate = durationWidth/progress.offsetWidth * 100;                
        video.currentTime = (rate * total_time) / 100;
    })
    //拖動結(jié)束時的處理
    durationIcon.addEventListener('touchend', function() {
        document.removeEventListener("touchmove", function(e){
            e.preventDefault();
        });
    });
})

說明：video不支持本地視頻的進度拖動，會出現(xiàn)拖動就重頭播放的情況，視頻鏈接是網(wǎng)上隨便找的，可能會出現(xiàn)請求不成功的情況。

參考api: http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp