<style> *{ margin: 0; padding: 0; } body{ min-height: 100vh;/* vh相对单位，相对于浏览器的尺寸改变*/ background: #4c4c4c url('https://unsplash.it/1500/900?image=1021'); background-size: cover;/*以容器为基准,将容器覆盖满,哪怕图片失真、模糊*/ /*margin: auto;/* margin:auto和margin:0 auto 但不知道父容器宽高，不合适*/ display: flex;/*将容器设置为弹性容器*/ justify-content: center; /*在X方向居中*/ align-items: center; /*在Y方向居中*/ /*课外拓展：将盒子在垂直方向居中的所有方式*/ } #wrapper{ width: 850px; display: flex; } .speed{ flex: 1;/*等比继承,本来应该是1:1继承，但是vedio有固定宽度，所以speed拿剩下宽度*/ margin: 10px; background-color: #fff; border-radius: 50px; display: flex; overflow: hidden;/*起到：规定子容器不能超出，能保持父类圆角效果*/ align-items: flex-start;/* */ } .speed-bar{ width: 100%; height: 16.3%; background:linear-gradient(-170deg,#2376ae 0%,#c16ecf 100%); /*设置渐变色样式*/ display: flex; /*使得容器可以设置接下来两个样式*/ justify-content: center; align-items: center; color: #fff; cursor: pointer; } </style> </head> <body> <div> <div id="wrapper"> <video width="765" height="430" src="http://10.138.57.1/xbzy/v/2021/天宫课堂.mp4" controls class="flex"></video> <div class="speed"> <div class="speed-bar">1x</div> </div> </div> <script> var speed = document.querySelector('.speed')//querySelector获取类名的方法 var bar = document.querySelector('.speed-bar') var video = document.querySelector('.flex') // 监听什么什么事件(鼠标滑动) 里面的function是监听函数 speed.addEventListener('mousemove',function(e){ console.log(e); var y = e.pageY - speed.offsetTop // offsetTop是获取某个dom结构到浏览器顶部的距离 var percent = y / speed.offsetHeight // offsetHeight是获取某个dom结构自身的高度 var min = 0.4 var max = 4 var height = Math.round(percent*100) + '%' // Math.round() 取整 var palybackRate = percent * (max - min) + min bar.style.height = height; bar.textContent = palybackRate.toFixed(1) + 'X' // toFixed(2)保留1位小数 video.playbackRate = palybackRate // video.playbackRate控制video播放速度 }) </script>
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #可调速js视频播放器 #ampltstyleampgt #margin
