JavaScript实现视频播放器

最终效果：

 

思路/步骤：

拿到需要操作的元素

通过事件监听视频是否加载完毕

1. 隐藏加载的动画
2. 显示视频
3. 获取视频的总时长
4. 格式化获取到的时间

监听播放按钮的点击

1. 判断当前是否处于播放/暂停状态
2. 切换对应的图标

监听视频播放的进度

1. 同步文本时间
2. 同步进度条

监听进度条的点击事件

1. 获取鼠标当前点击的位置

监听视频是否已经播放完毕

1. 恢复播放时间
2. 恢复图标
3. 恢复时间
4. 恢复进度条
5. 恢复标记

监听全屏按钮的点击

源码：

* {
    margin: 0;
    padding: 0;
}

a {
    color: #000;
    text-decoration: none;
    font-size: 25px !important;
}

figure {
    width: 800px;
    height: 500px;
    border: 1px solid #000;
    margin: 100px auto;
    position: relative;
    background: #24bbfe url("./../images/loading.gif") no-repeat center center;
}

figcaption {
    font-size: 30px;
    text-align: center;
}

video {
    display: none;
    width: 800px;
}

.control {
    width: 100%;
    height: 50px;
    background: rgba(0, 255, 0, .5);
    position: absolute;
    left: 0;
    bottom: 10px;
}

.control>#play {
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
}

.control>.progress {
    width: 60%;
    height: 30px;
    background: #ccc;
    position: absolute;
    left: 80px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 15px;
    overflow: hidden;
}

.control>.progress>.line {
    width: 0px;
    height: 100%;
    background: #fff;
}

.control>.time {
    position: absolute;
    left: 580px;
    top: 50%;
    transform: translateY(-50%);
}

.control>#full {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
}

 

    

        
视频播放器
        
        

            
            

                

            
            

                00:00:00 /
                00:00:00
            
            
        
    

window.onload = function() {
    //1.拿到需要操作的元素
    let oVideo = document.querySelector("video");
    let oFigure = document.querySelector("figure");
    let oTotalTime = document.querySelector(".total-time");
    let oCurrentTime = document.querySelector(".current-time");
    let oPlay = document.querySelector("#play");
    let oProgress = document.querySelector(".progress");
    let oLine = document.querySelector(".line");
    let oFull = document.querySelector("#full");

    //2.通过事件监听视频是否加载完毕
    oVideo.oncanplay = function() {
        //2.1隐藏加载的动画
        oFigure.style.backgroundImage = "none";

        //2.2显示视频
        oVideo.style.display = "block";

        //2.3获取视频的总时长
        // console.log(oVideo.duration);

        //2.4格式化获取到的时间
        let obj = formartTime(oVideo.duration);
        oTotalTime.innerHTML = `${obj.hour}:${obj.minute}:${obj.second}`;
        // console.log(obj);
    };

    //3.监听播放按钮的点击
    let flag = false;
    oPlay.onclick = function() {
        //切换图标
        if (flag) {
            flag = false;
            //正在播放
            oPlay.className = "iconfont icon-bofang";
            //切换图标
            // 暂停播放
            oVideo.pause();
        } else {
            flag = true;
            // 没有播放
            oPlay.className = "iconfont icon-zanting";
            //切换图标
            // 播放播放
            oVideo.play();
        }
    };

    //4.监听视频播放的进度
    oVideo.ontimeupdate = function() {
        //4.1同步文本时间
        let obj = formartTime(oVideo.currentTime);
        oCurrentTime.innerHTML = `${obj.hour}:${obj.minute}:${obj.second}`;

        //4.2同步进度条
        let res = oVideo.currentTime / oVideo.duration * 100;
        oLine.style.width = res + '%';
    };

    //5.监听进度条的点击事件
    oProgress.onclick = function(e) {
        e = e || window.e;
        //鼠标点击的位置/进度条的宽度=当前播放的时间/总时长
        //5.1获取鼠标当前点击的位置
        let currentTime = e.offsetX / oProgress.offsetWidth * oVideo.duration;
        // console.log(current);
        oVideo.currentTime = currentTime;
    };

    //6.监听视频是否已经播放完毕
    oVideo.onended = function() {
        //6.0恢复播放时间
        oVideo.currentTime = 0;

        //6.1恢复图标
        oPlay.className = "iconfont icon-bofang";

        //6.2恢复时间
        oCurrentTime.innerHTML = "00:00:00";

        //6.3恢复进度条
        oLine.style.width = "0%";

        //6.4恢复标记
        flag = false;
    };

    //7.监听全屏按钮的点击
    oFull.onclick = function() {
        // oVideo.requestFullscreen();
        toFullVideo(oVideo);
    };
};

//视频全屏兼容性解决
function toFullVideo(videoDom) {

    if (videoDom.requestFullscreen) {

        return videoDom.requestFullscreen();

    } else if (videoDom.webkitRequestFullScreen) {

        return videoDom.webkitRequestFullScreen();

    } else if (videoDom.mozRequestFullScreen) {

        return videoDom.mozRequestFullScreen();

    } else {

        return videoDom.msRequestFullscreen();

    }

}

//格式化时间
function formartTime(time) {
    // 1.利用相差的总秒数 / 小时 % 24;
    let hour = Math.floor(time / (60 * 60) % 24);
    hour = hour >= 10 ? hour : "0" + hour;
    // 2.利用相差的总秒数 / 分钟 % 60;
    let minute = Math.floor(time / 60 % 60);
    minute = minute >= 10 ? minute : "0" + minute;
    // 3.利用相差的总秒数 % 秒数
    let second = Math.floor(time % 60);
    second = second >= 10 ? second : "0" + second;
    return {
        hour: hour,
        minute: minute,
        second: second,
    }
}