HTML+CSS+JavaScript视频倍速播放小案例

效果展示

案例文件打包获取地址

[](video · illumintor/LM_class - 码云 - 开源中国)

案例开发思想

弹性布局

HTML

1、使用div创建一个大盒子，让其在画面正中间。

2、div里面包含两个小盒子，一左一右，左边是播放视频的窗口，右边是倍速播放的滑块。

CSS

使用渐变滑块显示倍数，倍数效果可视化、多样化，可玩性更高

JavaScript

通过监听鼠标在滑块上的移动达到控制倍数的效果

具体操作

HTML

<div class="wrapper">
        <video id="video" width="765" height="430" controls src="https://www.bilibili.com/617ef9ad-2dec-4ad5-be1a-fb75540a3076"></video>
        <div class="speed">
            <div class="speed-bar">
                1x
            </div>
        </div>
    </div>

解释

1、插入视频需要用到专门的video标签，src后写视频链接，可以来源于网络，也可以包含在本文件夹当中，区别就在于来源于网络的可能会因为网速不好视频播放卡顿，或因为后续视频发布者删除视频导致无法播放等等。

2、一定要写'controls',否则视频无法播放

3、这里“1x”是内容用于后面js计算。

CSS

消除所有盒子的内外边距

*{
    margin: 0;
    padding: 0;
}

弹性布局并使盒子上下左右居中

    display: flex;
    justify-content: center;
    align-items: center;

自动填充

flex: 1;

设置圆角

border-radius: 50px;

渐变效果

background: linear-gradient(to bottom, pink 0%, green 100%);

当然可以自定义渐变的颜色

隐藏超出部分

overflow: hidden;

在.speed中我们设置了圆角，但并没有在.speeder-bar中设置圆角，由于这两个盒子大小初始大小设置的一致，所以我们需要在.speed中隐藏超出部分。否则会出现如下情况：

背景图

[](通过网盘分享的文件：【哲风壁纸】2024-11-08 09_51_06.png 链接: pan.baidu.com/s/1VuLixWT7… 提取码: 1111)

css完整代码

*{
    margin: 0;
    padding: 0;
}
body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('2.png');
    background-repeat: no-repeat;
    background-size: cover;
}
.wrapper{
    width: 850px;
    height: 430px;
    /* border: 1px solid black; */
    display: flex;
}
.speed{
    flex: 1;
    margin: 10px;
    background: linear-gradient(to bottom, pink 0%, green 100%);
    border-radius: 50px;
    overflow: hidden;
}
.speed-bar{
    width: 100%;
    height: 16.3%;
    background:linear-gradient(to bottom, #3EA8E2 0%, #F65C36 100%) ;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    cursor: pointer;
}

JavaScript

定义3个变量，从html和css中抓取

const speed = document.querySelector('.speed')
const speedBar = document.querySelector('.speed-bar')
const video = document.getElementById('video')

监听鼠标移动

speed.addEventListener('mousemove',(e) => {
            const y = e.pageY - speed.offsetTop
            
            const percent = y/speed.offsetHeight
            const height = Math.round(percent * 100)+'%'
            speedBar.style.height = height

            const min = 0.4
            const max = 4
            const playbackRate = percent*(max - min)+min

            speedBar.textContent = playbackRate.toFixed(2)+'x'

            video.playbackRate = playbackRate
        })

解释如何监听鼠标移动

1、.addEventListener是专门用来监听事件的函数

2、'mousemove'是指鼠标移动事件

3、'e'是设定了一个初始变量代表鼠标这一对象，e.pageY指获取鼠标在屏幕Y轴上的距离

4、.offsetTop是计算某盒子顶部到屏幕顶部的距离的函数

5、.offsetHeight获取高度

6、Math.round取近似值函数

7、设置最小和最大播放速率

const min = 0.4
const max = 4
const playbackRate = percent*(max - min)+min

8、修改html中speedBar中的内容，初始为'1x'

speedBar.textContent = playbackRate.toFixed(2)+'x'

9、修改播放速率

video.playbackRate = playbackRate

.playbackRate是js内置的视频播放速率设定函数，我们只需要把我们计算的速率赋值即可

10、JavaScript部分完整代码

<script>
        const speed = document.querySelector('.speed')
        const speedBar = document.querySelector('.speed-bar')
        const video = document.getElementById('video')


        speed.addEventListener('mousemove',(e) => {
            const y = e.pageY - speed.offsetTop
            
            const percent = y/speed.offsetHeight
            const height = Math.round(percent * 100)+'%'
            speedBar.style.height = height

            const min = 0.4
            const max = 4
            const playbackRate = percent*(max - min)+min

            speedBar.textContent = playbackRate.toFixed(2)+'x'

            video.playbackRate = playbackRate
        })
    </script>