video播放器

* {
        margin: 0;
        padding: 0;
    }
    body {
        padding: 20px;
    }
    i {
        font-style: normal;
    }
    ._video_wrapper {
        position: relative;
        width: 700px;
    }
    ._video_ {
        padding-bottom: 36px;
        width: 100%;
    }
    ._video_controls_wrapper {
        box-sizing: border-box;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 42px;
        background-color: #181818;
    }
    ._video_controls {
        box-sizing: border-box;
        overflow: hidden;
        padding: 6px 10px;
        width: 100%;
    }
    ._video_play_btn {
        float: left;
        border-width: 10px 15px;
        border-style: solid;
        border-color: transparent transparent transparent red;
        cursor: pointer;
    }
    ._video_play_btn:hover {
        border-left-color: #eee; 
    }
    ._video_progress {
        position: relative;
        width: 700px;
        height: 8px;
        background: #eee;
        cursor: pointer;
    }
    ._video_progress_played {
        position: absolute;
        top: -2x;
        left: 0;
        height: 8px;
        background: #f00;
    }
    ._video_move {
        position: absolute;
        margin-left: -6px;
        top: -2px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #000;
    }
    ._video_time {
        margin-left: 10px;
        font-size: 13px; 
        color: #fff;
    }

<div class='_video_wrapper'>
    <video class="_video_">
      <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">
    </video>
    <div class='_video_controls_wrapper'>
        <div class='_video_progress'>
            <div class='_video_progress_played' style='width:0;'></div>
            <div class='_video_move'  style='left:0;'></div>
        </div>
        <div class='_video_controls'>
            <div class='_video_play_btn'></div>
            <span class='_video_time'><i class='_video_time_played'>0:00</i> / <i class='_video_time_all'>0:00</i></span>
        </div>
    </div>
</div>

    let _video_ = document.querySelector("._video_"),
        _video_time_played = document.querySelector('._video_time_played'),
        _video_time_all = document.querySelector('._video_time_all'),
        _video_move = document.querySelector('._video_move'),
        _video_progress = document.querySelector('._video_progress'),
        _video_progress_played = document.querySelector('._video_progress_played'),
        _video_play_btn = document.querySelector('._video_play_btn'),
        _video_play_flag = false,
        _video_played_progress = 0;

    //格式时间（ xxx -> 0:00 ）
    function time_formated (time) {
        var duration = Math.round(time),
            minutes = Math.floor(duration / 60) > 0 ? Math.floor(duration / 60) : '0',
            seconds = Math.ceil(duration) % 60  > 0 
                    ? Math.ceil(duration) % 60  > 9
                    ? Math.ceil(duration) % 60 
                    : '0'+ Math.ceil(duration) % 60 
                    : '00';
        return minutes + ':' + seconds;
    }

    //通过canplay获取duration
    _video_.addEventListener('canplay', () => {
        _video_time_all.innerHTML = time_formated(_video_.duration);
    })

    //video的play/pause
    _video_play_btn.addEventListener('click',() => {
        _video_play_flag ? _video_.pause() : _video_.play();
        _video_play_flag = !_video_play_flag;
    },false)

    //video当前播放时间改变
    _video_.addEventListener('timeupdate',() => {
        _video_time_played.innerHTML=time_formated(_video_.currentTime);
        _video_move.style.left= _video_.currentTime  / _video_.duration *100 + '%';
        _video_progress_played.style.width = _video_.currentTime  / _video_.duration *100  + '%';
    },false)

    //_video_move滑动控制进度
    _video_move.addEventListener('mousedown', (e) => {
        var _diff_ = e.clientX - this.offsetLeft;
        document.onmousemove = function(e) {
            _video_played_progress = e.clientX - _diff_;
            if ( _video_played_progress <= 0 ) _video_played_progress = 0;
            if ( _video_played_progress >= 700 ) _video_played_progress = 700;
            _video_move.style.left = _video_played_progress / 700 * 100 + '%';
            _video_progress_played.style.width = _video_played_progress / 700 * 100 + '%';
            _video_.currentTime = Math.round(_video_played_progress / 700 * _video_.duration)
            //防止选择内容,拖动鼠标过快时，弹起鼠标，_video_move也会移动
            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        }
    }, false)
    document.addEventListener('mouseup', () => {
        document.onmousemove = null;
    }, false)

    //_video_progress点击控制进度
    _video_progress.addEventListener('click', (e) => {  
        if(e.target.className.toLowerCase() === '_video_move'){
            return ;
        } 
        _video_.currentTime = Math.round(e.offsetX  / 700 *Math.round(_video_.duration))
        _video_time_played.innerHTML=time_formated(_video_.currentTime);
        _video_move.style.left= e.offsetX  / 700 *100 + '%';
        _video_progress_played.style.width = e.offsetX  / 700 *100 + '%';
    }, false)