使用html，css和js给视频设置一个简易进度条

最新推荐文章于 2024-09-03 16:39:52 发布

Nistometo

最新推荐文章于 2024-09-03 16:39:52 发布

阅读量2.4k

点赞数 3

文章标签： css html javascript

本文链接：https://blog.csdn.net/reliedema/article/details/129838926

版权

代码依次为body内标签创建，css样式和script 代码

这里我们先创建我们所需要的标签

视频的盒子，视频文件，进度条，和用来播放，暂停的按钮

<body>
<!-- 设置一个视频盒子 -->
    <div class="videoBox">
        <!-- 引入视频 -->
        <video src="../../../../杂/【素材向】骂谁罕见！ - 1.【素材向】骂谁罕见！(Av220190871,P1).mp4" autoplay="autoplay"></video>
        <!-- 给视频进度条一个css样式 -->
        <div class="jindu">
            <!-- 给视频进度条设置一个当前进度的背景颜色 -->
            <div class="jinduyanse"></div>
        </div>
    </div>
    <!-- 创建一个开始播放按钮 -->
    <button class="start">开始播放</button>
</body>

然后我们来设置我们标签所需要的简单样式

按钮我没有设置样式，因为写出来实现效果就行了，有需要的话可以自由发挥

css的进度条样式，width宽度属性，我们可以先写上25% -50%来便于观察效果

等js部分把进度条进度获取之后，需要把width宽度属性设置为0%

样式代码 ↓

 <style>
        /* 设置一个视频盒子 */
        .videoBox {
            width: 400px;
            /* 为了给进度条定位，需要给父级设置一个相对定位 */
            position: relative;
        }

        /* 引入视频，设置视频的尺寸 */
        video {
            width: 400px;
        }

        /* 给视频进度条一个css样式 */
        .jindu {
            width: 360px;
            height: 10px;
            border-radius: 15px;
            background: #959595;
            /* 给自制的进度条设置绝对定位，定位到想要的位置 */
            position: absolute;
            bottom: 5px;
            left: 20px;
        }

        /* 给视频进度条设置一个当前进度的背景颜色 */
        .jinduyanse {
            width: 0%;
            height: 10px;
            border-radius: 15px;
            background: #00ffcc;
        }
    </style>

布局写完了，接下来为重中之重

js的代码需要亿点逻辑，家里面养了逻辑猫的可以带着猫一起看

注释我会写的非常清楚，代码的思路我都会写在上面

js部分代码 ↓

<script>
        window.onload = function () {
            // 获取标签
            let video = document.querySelector('video')     // 获取video标签
            let start = document.querySelector('.start')    //获取开始播放按钮
            let jindu = document.querySelector('.jinduyanse')   //获取进度条
            let timer;           // 设置一个timer接收时钟
            let jindutiao = 0   // 设置进度条初始为0
            let flag = true      // 这里设置flag为true 备用
            // 给开始播放绑定点击事件
            start.addEventListener('click', function () {
                video.play()       // 点击按钮,视频开始播放

                // 设置时钟开始获取视频当前时间
                timer = setInterval(function () {
                    // 并实时显示当前进度
                    jindutiao = video.currentTime / video.duration * 100 + '%'
                    jindu.style.width = jindutiao   //将运算后的百分比赋值给标签的width属性
                }, 100)
                // 当视频结束时
                video.addEventListener('ended', function () {
                    clearInterval(timer)       // 清除定时器
                    flag = !flag                // 取反flag,使flag等于true
                    start.innerHTML = '开始播放'    // 将按钮文本改为开始播放
                })
                // 点击按钮时，如果flag = true
                if (flag) {
                    video.play()        // 则视频开始播放
                    flag = !flag        // 取反flag,使flag = false
                    start.innerHTML = '暂停播放'        // 将按钮文本改为暂停播放
                } else {              // 如果flag 不等于 true ，及flag = false 时
                    video.pause()       // 点击按钮将会暂停播放
                    flag = !flag        // 这时取反flag，使false 变回true
                    start.innerHTML = '开始播放'        //将按钮文本改为开始播放
                }
            })

        }
    </script>

到这就结束了家人们，大家加油