可调速js视频播放器

最新推荐文章于 2024-08-08 08:29:14 发布

陪你在童年

最新推荐文章于 2024-08-08 08:29:14 发布

阅读量1.7k

点赞数

分类专栏： js 文章标签： javascript 音视频 css

本文链接：https://blog.csdn.net/onereal/article/details/121862206

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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