使用html，css和js给视频设置一个简易进度条 |
您所在的位置：网站首页 › 军职在线看视频不加进度 › 使用html，css和js给视频设置一个简易进度条 |
|
代码依次为body内标签创建，css样式 和script 代码 这里我们先创建我们所需要的标签 视频的盒子，视频文件，进度条，和用来播放，暂停的按钮 开始播放然后我们来设置我们标签所需要的简单样式 按钮我没有设置样式，因为写出来实现效果就行了，有需要的话可以自由发挥 css的进度条样式，width宽度属性，我们可以先写上25% -50%来便于观察效果 等js部分把进度条进度获取之后，需要把width宽度属性设置为0% 样式代码 ↓ /* 设置一个视频盒子 */ .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; }布局写完了，接下来为重中之重 js的代码需要亿点逻辑，家里面养了逻辑猫的可以带着猫一起看 注释我会写的非常清楚，代码的思路我都会写在上面 js部分代码 ↓ 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 = '开始播放' //将按钮文本改为开始播放 } }) }到这就结束了家人们，大家加油 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |