video播放器

来源：互联网发布：超级优化基因液txt网盘编辑：程序博客网时间：2024/06/05 00:07

这里写图片描述

* {        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)

阅读全文

0 0