H5移动端自定义video播放控件controls（带播放暂停，进度条拖拽）

效果图如下

GIF.gif

html结构部分

<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,//鼠标相对于拖拽圆点的偏移距离
    //滑块宽度的一半
    cirW = durationIcon.offsetWidth/2,
    rate,
    total_time,//视频总时长
    current_time; //现在时间
//当浏览器能够开始播放指定的视频时      
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;
    //显示当前播放时间
    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;
        //显示当前播放进度条
        var new_width = (current_time/total_time)*progress.offsetWidth;
        duration.style.width = new_width + "px";
        durationIcon.style.left = (new_width - cirW) + 'px';    
    })
    //播放结束时
    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;//鼠标相对于拖拽圆点的偏移距离     
    })
    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;
    })
    //拖动结束时的处理
    durationIcon.addEventListener('touchend', function() {
        document.removeEventListener("touchmove", function(e){
            e.preventDefault();
        });
    });
})

说明：video不支持本地视频的进度拖动，会出现拖动就重头播放的情况，视频链接是网上随便找的，可能会出现请求不成功的情况。

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