JavaScript实现视频播放器

最新推荐文章于 2023-11-05 14:53:43 发布

小白小白从不日白

最新推荐文章于 2023-11-05 14:53:43 发布

阅读量1.9w

点赞数 13

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_43285360/article/details/121229052

版权

javascript 专栏收录该内容

105 篇文章

订阅专栏

本文介绍了一个自制视频播放器的实现过程，包括加载动画隐藏、视频显示、时间格式化、播放/暂停控制、进度同步、进度条点击事件处理以及全屏功能的实现。详细讲解了各个功能的JavaScript代码实现，并提供了相应的HTML和CSS样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最终效果：

思路/步骤：

拿到需要操作的元素

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

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

监听播放按钮的点击

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

监听视频播放的进度

同步文本时间
同步进度条

监听进度条的点击事件

获取鼠标当前点击的位置

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

恢复播放时间
恢复图标
恢复时间
恢复进度条
恢复标记

监听全屏按钮的点击

源码：

* {
    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%);
}

<link rel="stylesheet" href="fonts/iconfont.css">
<link rel="stylesheet" href="css/index.css">
<script src="js/index.js"></script>

    <figure>
        <figcaption>视频播放器</figcaption>
        <video src="images/cjk.mp4"></video>
        <div class="control">
            <a href="#" id="play" class="iconfont icon-bofang"></a>
            <div class="progress">
                <div class="line"></div>
            </div>
            <div class="time">
                <span class="current-time">00:00:00</span> /
                <span class="total-time">00:00:00</span>
            </div>
            <a href="#" id="full" class="iconfont icon-fangda"></a>
        </div>
    </figure>

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,
    }
}