---

前言

继上次发布的js实现进度条拖拽已经有一段时间了，今天终于有时间更新一下使用js制作一个视频播放器，此视频播放器实现了视频播放的所有基本功能，这里重点介绍一下js部分所实现的功能。

---

一、拖拽和点击视频进度条控制视频播放进度

1.通过video的duration和currentTime属性来作为可变参数来实现进度条控制视频的播放进度和快进。
（1）拖拽进度条控制视频代码示例：

// 为进度条方块绑定鼠标按下事件
    video_inner.onmousedown = function (event) {
        event = event || window.event;
        // 获取鼠标偏移量
        var progressX = event.clientX - this.offsetLeft;
        var progressY = event.clientY - this.offsetTop;
        // 绑定鼠标移动事件
        document.onmousemove = function (event) {
            event = event || window.event;
            // 获取方块偏移量
            var innerX = event.clientX - progressX;
            // 获取方块移动总距离
            var progressWidth = video_inner.parentNode.clientWidth - video_inner.offsetWidth;
            // 控制范围，防止越界
            if (innerX <= 0) {
                innerX = 0;
            } else if (innerX >= progressWidth) {
                innerX = progressWidth;
            }
            // 修改方块偏移量 和 显示进度条底色
            video_inner.style.left = video_deep.style.width = innerX + "px";
            // 视频播放进度跟随拖动实时变化
            var scare = video_inner.offsetLeft / (video_progress.clientWidth - video_inner.offsetWidth);
            video.currentTime = video.duration * scare;
            // 视频时间跟随进度条变化
            timeNow.innerHTML = display(video.currentTime);
        };

        // 绑定鼠标抬起事件
        document.onmouseup = function () {
            // 取消鼠标移动事件
            document.onmousemove = null;
            // 取消鼠标抬起事件
            document.onmouseup = null;
        };
        // 取消默认行为
        return false;
    };

（2）点击进度条实现视频快进代码示例：

// 5.点击进度条实现快进
    video_progress.onclick = function (event) {
        event = event || window.event;
        icon.innerHTML = "";
        // 获取鼠标当前点击位置
        var videoX = event.clientX - this.offsetLeft;
        // 获取进度条总长度
        var length = video_progress.clientWidth - video_inner.offsetWidth;
        // 点击后视频播放所处的新位置
        video.currentTime = video.duration * (videoX / length);
        // 重新设定进度条的位置
        video_inner.style.left = video_deep.style.width = (video.currentTime / video.duration) * length + "px";
        // 在暂停状态下快进后，启动进度条走动
        if (video.paused) {
            video.play();
            icon.innerHTML = "";//按钮为播放状态
            icons.innerHTML = "";//悬浮按钮为播放状态
            // 进度条开始走动
            timer = setInterval(function () {
                // 获取进度条总长度
                var length = video_progress.clientWidth - video_inner.offsetWidth;
                // 每秒进度条所走的距离
                var videoTime = (video.currentTime / video.duration) * length;
                video_inner.style.left = video_deep.style.width = videoTime + "px";
                // 视频时间跟随进度条变化
                timeNow.innerHTML = display(video.currentTime);
                // 如果视频播放完成,切换播放按钮状态
                if (video_inner.offsetLeft == length) {
                    icon.innerHTML = "";//按钮为暂停状态
                    icons.innerHTML = "";//悬浮按钮为暂停状态
                    clearInterval(timer);//防止拖拽方块急速抖动
                }
            }, 10);
        }

    };

二.实现进度条随着视频的播放自动走动。

1.这里就要用到定时器了，设定每10ms进度条走动一次，走动的距离通过这个公式来计算： (video.currentTime / video.duration) * length，这个公式的意思就是，用当前视频播放的时间除上视频总时长算出一个比例再乘以进度条滑块可以滑动的总距离，算出的这个值就是每10ms滑块滑动的距离。
示例代码如下：

timer = setInterval(function () {
                // 获取进度条方块滑动总长度
                var length = video_progress.clientWidth - video_inner.offsetWidth;
                // 每秒进度条所走的距离
                var videoTime = (video.currentTime / video.duration) * length;
                video_inner.style.left = video_deep.style.width = videoTime + "px";
                // 视频时间跟随进度条变化
                timeNow.innerHTML = display(video.currentTime);
                // 如果视频播放完成,切换播放按钮状态
                if (video_inner.offsetLeft == length) {
                    icon.innerHTML = "";//按钮为暂停状态
                    icons.innerHTML = "";//悬浮按钮为暂停状态
                    clearInterval(timer);//防止拖拽方块急速抖动
                }
            }, 10);

2.进度条后边的时间跟随视频播放进度而改变。
这里主要用到了一个参数，那就是video.currentTime,这个参数决定了我们的视频时间能够实时变化。
首先我们要定义一个时间工具函数，专门用来处理视频时间，示例代码如下：

 function display(timeAll) {
        var hour = cover(parseInt(timeAll / 3600), 2);
        var min = cover(parseInt(timeAll % 3600 / 60), 2);
        var sec = cover(parseInt(timeAll % 3600), 2);
        return hour + ":" + min + ":" + sec;
    }

由于播放器的时间一般设置为两位数（比如00:00:00/10:10:10这种格式），所以我们还需要一个控制位数的函数。
示例代码如下：

function cover(num, n) {
        return (Array(n).join(0) + num).slice(-n);
    }

到这里基本上视频进度条的功能就实现的差不多了，当然目前只考虑了视频和进度条的关联，接着我们还要考虑视频进度变化时，播放器的图标的改变，在这里就不细说了，大家可以到时候可以参考我的源码。

三、拖拽和点击声音进度条调节声音

1.声音进度条这一块的话原理和视频进度条差不多，不同的是，声音进度条不需要实时变动。
部分代码示例：

 sound_inner.onmousedown = function (event) {
        event = event || window.event;

        // 获取鼠标偏移量
        var progressX = event.clientX - this.offsetLeft;
        var progressY = event.clientY - this.offsetTop;
        // 绑定鼠标移动事件
        document.onmousemove = function (event) {
            event = event || window.event;
            // 获取方块偏移量
            var innerX = event.clientX - progressX;
            var innerY = event.clientY - progressY;
            // 获取方块移动总距离
            var progressWidth = sound_inner.parentNode.clientWidth - sound_inner.offsetWidth;
            // 控制范围，防止越界
            if (innerX <= 0) {
                innerX = 0;
            } else if (innerX >= progressWidth) {
                innerX = progressWidth;
            }
            // 修改方块偏移量 和 显示进度条底色
            sound_inner.style.left = sound_deep.style.width = innerX + "px";
            // 修改音量
            sound = (sound_inner.offsetLeft / progressWidth);
            video.volume = sound;
            console.log(video.volume);
            if (video.volume == 0) {
                video.muted = true;
                sound_btn.innerHTML = "&#xe605;";//显示静音状态按钮
            } else {
                video.muted = false;
                sound_btn.innerHTML = "&#xe607;";//显示非静音按钮
            }
        };
        // 绑定鼠标抬起事件
        document.onmouseup = function () {
            // 取消鼠标移动事件
            document.onmousemove = null;
            // 取消鼠标抬起事件
            document.onmouseup = null;
        };
        // 取消默认行为
        return false;
    };

2.在声音控制这一块有一个需要注意的地方就是sound.muted(静音)和sound.volume(音量)这两个参数是要同步进行修改的，什么意思呐？就是说当你的video.volume设置为0时，你的video.muted必须设置为true，反之当video.volume大于0时，将其设置为false。

四、倍速设置

这里主要用到了video.playbackRate这个属性，相对于进度条的设置，这个比较简单。
部分示例代码：

 var index = 0;//存储倍速索引
 speedNodes[3].style.backgroundColor = "green";// 默认一倍速背景为绿色
    for(var i=0;i<speedNodes.length;i++){
        speedNodes[i].num = i;//为不同倍速设置标识
        speedNodes[i].addEventListener("click",function(){
            index = this.num;
            for(var j = 0;j<speedNodes.length;j++){
                speedNodes[j].style.backgroundColor = "";//防止伪类设置的背景颜色被覆盖
            }
            speedNodes[index].style.backgroundColor = "green";
            video.playbackRate = 2 - this.num*0.25;
        });
    }

五、效果展示

视频在线展示（B站）

六、项目源码

源码我已经放在了github上，有需要的小伙伴可以自行前往下载。

videoPlay项目源码（github）