引入

在当今数字化时代，视频播放器已经成为我们日常生活中不可或缺的一部分。然而，有时候我们可能希望以不同的速度观看视频，以便更快地浏览内容或更仔细地学习细节。本文将带您走进制作HTML视频倍速播放器的全过程，从头开始探索如何使用HTML构建一个简单而强大的视频播放器，并添加倍速播放功能。让我们一起来学习如何用HTML编写一个具有创新功能的视频播放器，提升我们的视频观看体验吧！

代码实现

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>video</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="wrapper">
        <video src="./mv.mp4" class="video" controls width="765" height="430"></video>

        <div class="speed">
            <div class="speed-bar">1x</div>
        </div>
    </div>
    <script src="./index.js"></script>
</body>
</html>

css部分

*{
    margin: 0;
    padding: 0;
}
body{
    background:#aaa;
}
.wrapper{
    position: fixed;
    left: 50%;/* 父容器宽度的50% */
    top: 50%;
    transform: translate(-50%,-50%);/*自身的50% */
    display: flex;/*子容器默认同一行*/
}
.speed{
    width: 50px;
    height: 430px;
    background-color: #fff;
    border-radius: 50px;/*bdrs*/
    overflow: hidden;
}
.speed-bar{
    width: 100%;
    height: 16%;
    background:linear-gradient(to bottom,#c6ffdd,#fbd786,#f7797d);
    display: flex;/*设置为弹性容器*/
    justify-content: center;/*在主轴方向上居中*/
    align-items: center;/*在副轴方向上居中*/
    cursor: pointer;/*鼠标放上去为一个小手*/

}

js部分

var speed=document.querySelector('.speed');
var speedBar=document.querySelector('.speed-bar');
var video=document.querySelector('.video');

speed.addEventListener('mousemove',function(e){
   var y=e.pageY-speed.getBoundingClientRect().top;
   var percent=y/speed.offsetHeight;
   var height=Math.round(percent*100)+'%';
   //用js修改speed-bar容器的高度
   speedBar.style.height=height;
   var min=0.4;
   var max=4;
   var playSpeed=percent*(max-min)+min;
   speedBar.textContent=playSpeed.toFixed(2)+'x';
   video.playbackRate=playSpeed;
})

代码解析

var speed = document.querySelector('.speed');: 选取了具有 speed 类名的元素，即速度条容器。
var speedBar = document.querySelector('.speed-bar');: 选取了具有 speed-bar 类名的元素，即速度条。
var video = document.querySelector('.video');: 选取了具有 video 类名的元素，即视频元素。
speed.addEventListener('mousemove', function(e) {...});: 添加了鼠标移动事件监听器，当鼠标在速度条容器上移动时触发回调函数。
var y = e.pageY - speed.getBoundingClientRect().top;: 计算鼠标相对于速度条容器顶部的垂直距离。
var percent = y / speed.offsetHeight;: 计算鼠标位置在速度条容器中的百分比。
var height = Math.round(percent * 100) + '%';: 计算当前播放速度的高度百分比，并转换为字符串格式。
speedBar.style.height = height;: 通过修改速度条容器的高度，实现拖动时速度条的动态效果。
var min = 0.4; var max = 4;: 设置视频播放速度的范围。
var playSpeed = percent * (max - min) + min;: 计算当前播放速度，根据鼠标位置百分比和速度范围计算。
speedBar.textContent = playSpeed.toFixed(2) + 'x';: 设置速度条的文本内容为当前播放速度，保留两位小数。
video.playbackRate = playSpeed;: 将当前播放速度应用到视频的 playbackRate 属性上，实现视频播放速度的调节。

从零开始：HTML视频倍速播放器制作全过程

引入

代码实现

html部分

css部分

js部分

代码解析

效果展示