js之视频播放控件、进度条拖拽、点击

html部分

 <div class="video-play">
                <div class="video-left">
                    <div class="videobox">
                        <video width="100%" height="100%" src="./image/mp4.mp4"></video>
                    </div>
                    <div class="control-wrap">
                        <div class="begin">
                            <!-- <img src="./image/offcn_icnolh04.png" alt=""> -->
                        </div>
                        <div class="time1">
                            00:00:00
                        </div>
                        <div class="progress-wrap">
                            <div class="circle">
                            </div>
                            <div class="progress"></div>
                            <div class="slide"></div>
                        </div>
                        <div class="time2">
                            00:00:00
                        </div>
                        <div class="big">
                            <img src="./image/offcn_icnolh02.png" alt="">
                        </div>
                    </div>
                    <div class="bot-nav">
                        <ul>
                            <li class="route">
                               <a href="#">
                                <img src="./image/zg_shipincz03.png" alt="">
                                <em>线路</em>
                               </a>
                                <div class="hidden">
                                    <a href="#">线路1</a>
                                    <a href="#">线路2</a>
                                    <a href="#">线路3</a>
                                </div>
                            </li>
                            <li>
                               <a href="#">
                                    <img src="./image/zg_shipincz06.png" alt="">
                                    <em>收藏</em>
                               </a>
                            </li>
                            <li class="color">
                               <a href="#">
                                    <img src="./image/zg_shipincz02.png" alt="">
                                    <em>手机看</em>
                               </a>
                            </li>
                            <li class="color">
                               <a href="#">
                                    <img src="./image/zg_shipincz01.png" alt="">
                                    <em>问题反馈</em>
                               </a>
                            </li>
                            <li class="day">
                               <a href="#">
                                    <img src="./image/zg_shipincz04.png" alt="">
                                    <em>白天模式</em>
                               </a>
                            </li>
                            <li class="beisu">
                               <a href="#">
                                    <img src="./image/5uieee.png" alt="">
                                    <em>倍速</em>
                               </a>
                               <div class="hidden">
                                    <a href="#">2.0倍</a>
                                    <a href="#">1.8倍</a>
                                    <a href="#">1.6倍</a>
                                    <a href="#">1.5倍</a>
                                    <a href="#">1.35倍</a>
                                    <a href="#">1.2倍</a>
                                    <a href="#">1.0倍</a>
                            </div>
                            </li>
                        </ul>
                    </div>
                </div>
  			</div>

js部分

获取元素

 //获取开始按钮
     var playbtn = document.querySelector('.control-wrap .begin');
     //获取视频
     var video = document.querySelector('video');
     //获取初始事件
     var playCur = document.querySelector(".time1");
     var playTime = document.querySelector('.time2');
     //进度条
     var slide = document.querySelector('.slide');
    //圆点
     var slideBtn = document.querySelector('.circle');
    //全屏
     var allScreen = document.querySelector('.big');
    var proWrap = document.querySelector('.progress-wrap');
    var tag = true;

播放按钮

    
     // 播放按钮点击
     playbtn.onclick = function () {
        if (tag) {
            video.play(); // 播放视频
            playbtn.className = "begin stop";
            tag = false;
        } else {
            video.pause(); // 暂停视频
            playbtn.className = "begin";
            tag = true;
        }
        
    }

全屏

  //全屏
    allScreen.onclick = function(){
        if(video.requestFullscreen){
            video.requestFullscreen();
        }
    }

缓冲至可播放状态

 // 缓冲至可播放状态
    video.oncanplay = function () {
        // console.log(video.duration); // 总时长
        //调用函数
        // console.log(padTime(video.duration))
        playTime.innerHTML = padTime(video.duration);
    }

    function padTime(value) {
        // console.log(value);
        //转换小时、分钟、秒
        var hours = toTwo(parseInt(value / 3600));
        var mis = toTwo(parseInt(value % 3600 / 60));
        var sec = toTwo(parseInt(value % 60));
        //00:00:00
        var str = hours + ':' + mis + ':' + sec;
        
        return str;

    }
    //前导0
    function toTwo(value) {
        return value < 10 ? '0' + value : value;
    }

播放时间发生改变事件

// 播放时间发生改变事件
    video.ontimeupdate = function () {
        playCur.innerHTML = padTime(video.currentTime);
        slide.style.width = video.currentTime / video.duration * 510 + "px";
        slideBtn.style.left = video.currentTime / video.duration * 510 + "px";
       
        if(video.currentTime == video.duration){
            playbtn.className = "begin";
            tag = true;
        }
    }

播放进度条的事件

• 拖拽

 //播放进度条的事件
        // 拖拽slidebtn
        slideBtn.onmousedown = function (event) {
            event = event || window.event;
            var deltaX = event.clientX - slideBtn.offsetLeft;
            document.onmousemove = function (event) {
                event = event || window.event;
                var nowleft = event.clientX - deltaX;
                if (nowleft < 0) nowleft = 0;
                if (nowleft > proWrap.clientWidth - slideBtn.offsetWidth) nowleft = proWrap.clientWidth - slideBtn.offsetWidth;
                // 滑块
                slideBtn.style.left = nowleft + 'px';
                slide.style.width = nowleft + 'px';
                var nowtime = (nowleft/510)*video.duration;
                console.log(padTime(nowtime));
                playCur.innerHTML = padTime(nowtime);
                video.currentTime = nowtime;
                
                // 取消默认事件，不选中文字
                return false;
            }

            document.onmouseup = function () {
                document.onmousemove = null;
            }
        }

• 点击进度条

 //点击进度条
      var videoleft = document.querySelector('.video-left');
       
        proWrap.onclick = function(ev){
               ev = window.event||ev;
            //    console.log(ev.clientX);
            //    console.log(proWrap.offsetLeft);
            var detal = ev.clientX - videoleft.offsetLeft - proWrap.offsetLeft;
            console.log(videoleft.offsetLeft);
               slideBtn.style.left = detal + 'px';
                slide.style.width = detal + 'px';
                var nowtime = (detal/510)*video.duration;
                console.log(padTime(nowtime));
                playCur.innerHTML = padTime(nowtime);
                video.currentTime = nowtime;

        }

倍速

//倍速
        var beisu = document.querySelector('.beisu em');
        var speeds = document.querySelectorAll('.beisu .hidden a');
        console.log(speeds);
        for(var i = 0; i<speeds.length; i++){
            speeds[i].index = i;
            speeds[i].onclick = function(){
                beisu.innerHTML = this.innerHTML;
                var conts = parseFloat(this.innerHTML);
                console.log(conts);
                video.playbackRate = conts;
                console.log(video.playbackRate);
            }
        }