原生js实现手机播放器包括进度条

最新推荐文章于 2024-08-04 16:33:59 发布

烧脑的小白

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量403

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/tangtanglinli/article/details/129460259

版权

实现效果
在这里插入图片描述
html文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <main>
        <!-- 视频标签 -->
        <video src="./imgs/1.mp4"></video>
        <!-- 底部盒子 -->
        <div id="bottom">
            <!-- 进度条 -->
            <div class="progress-bar">
                <div class="progress" id="progressBox"></div>
            </div>
            <!-- 按钮 -->
            <div class="btn">
                <img src="./imgs/play.png" alt="" title="播放" id="playerBtn">
            </div>
        </div>
    </main>

    <script src="./js/index.js"></script>
</body>

</html>

js代码

//文档加载事件
window.addEventListener('load', function () {
    //功能一: 播放和暂停功能

    //1.获取相关元素对象
    let video = document.querySelector('video');
    let playerBtn = document.querySelector('#playerBtn');
    let progressBox = document.querySelector('#progressBox');

    //标杆思路:
    let flag = true;//设置默认可以播放的状态
    let timerId;


    //2.注册点击事件
    playerBtn.addEventListener('click', function () {
        // console.log(111);
        //3.点击按钮让video进行播放
        // video.play();
        //判定标杆
        if (flag) {// 播放
            video.play();
            //切换图像
            this.src = './imgs/puse.png'
            //切文本
            this.title = '暂停';
            //进度条
            box()
        } else {//暂停
            video.pause();
            //切换图像
            this.src = './imgs/play.png';
            //切文本
            this.title = '播放';
            //清除定时器
            clearInterval(timerId)
        }

        //切换
        flag = !flag;

    })


    //进度条功能:  
    //实现公式:  进度条距离=当前时长/总时长*进度条盒子的宽度
    function box() {
        timerId = setInterval(function () {
            // console.log(111);
            //获取当前时长
            let curTime = video.currentTime;
            //获取总时长
            let totalTime = video.duration;

            //获取盒子宽度
            let w = document.body.offsetWidth;

            //计算距离
            let distance = (curTime / totalTime) * w;

            //把当前计算出来的距离设置到进度条上即可
            progressBox.style.width = distance + 'px';

        }, 100)
    }





})