什么?b站最高只有两倍速播放?那我自己写一个(大佬绕路😅)

1,189 阅读3分钟

写在前面

我身边总有一些朋友看视频或电影时喜欢1.5倍速或者2倍速的看,因为这样可以节约很多时间。大部分的视频播放软件最高只支持2倍速播放,那我想要更高倍速观看呢?有需求就去实现需求,提升用户体验是我们前端工程师的宗旨。像b站,腾讯视频等视频播放软件都可以人为地去控制视频播放速率;这篇文章就带大家用Js去实现一个简单的控制视频播放速率的功能。

实现的效果如下所示:

1.gif

准备工作

  1. Vscode中新建一个Html文件:
 <div class="wrapper">
        <!--video标签要加上 controls 属性 ,随意找一个.mp4后缀的视频格式 -->
        <video controls class='video' src=" http://vfx.mtime.cn/Video/2021/07/10/mp4/210710171112971120.mp4"></video>
        <div class="speed">
            <!-- 打开页面默认为1倍速 -->
            <div class="speed-bar">1x
            </div>
        </div>
    </div>
  1. 在同目录下新建一个Css文件,并且通过link标签引入到Html文件中:

<link rel="stylesheet" href="./style.css">

  1. 在同目录下新建一个Js文件,并且通过script标签引入到Html文件中:

<script src="./index.js"></script>

  1. 此时页面上没有样式,是不美观的,我们在第二步创建的Css文件下写样式:
* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 找一张图片当做背景,整体看起来更美观 */
    background-image: url(https://unsplash.it/1500/900?image=1021);
    background-repeat: no-repeat;
    background-size: 100% auto;
}

video {
    width: 500px;
    height: 210px;
    box-shadow: 0 0 10px #fff;
}

.wrapper {
    width: 550px;
    display: flex;

}

.speed {
    flex: 1;
    background: #efefef;
    margin: 10px;
    border-radius: 50px;
    overflow: hidden;
}

.speed-bar {
    width: 100%;
    height: 16.3%;
    background: linear-gradient(-170deg, #2376ae 0%, #c16ecf 100%);
    /* border-radius: 50px; */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    font-size: 12px;
}

此时页面如下图所示:

2.png

  1. 最后只需要完成Js部分就可以了。

Js操作Dom/Css

我们需要分别拿到显示速率播放容器,视频的Dom结构,然后在显示速率播放容器上监听鼠标的移动事件,在回调中执行函数,事件e中有一个属性pageY可以拿到鼠标此时的y坐标,利用巧妙的数学方法我们可以计算出相应速率播放对应的长度,通过操作Css设置相应的属性值就完成了。

这里我们需要用到平时不常用到的Video中的playbackRate属性:playbackRate 属性可以设置或返回视频的当前播放速度。

//分别拿到各个部分的Dom结构
const speed = document.querySelector('.speed')
const bar = document.querySelector('.speed-bar')
const video = document.querySelector('.video')
//监听鼠标的移动事件
speed.addEventListener('mousemove', handleMove)
function handleMove(e) {
    // console.log(e.pageY - speed.offsetTop)
    //y为鼠标点的Y坐标减去速率播放器的上顶点的长度
    const y = e.pageY - speed.offsetTop
    //计算所占百分比
    const percent = y / speed.offsetHeight
    const height = Math.round(percent * 100) + '%'
    //设置播放速率的值
    const playbackRate = percent * (4 - 0.4) + 0.4

    console.log(playbackRate);
    //设置bar的高度
    bar.style.height = height
    //设置bar中显示的值,保留两位小数
    bar.textContent = playbackRate.toFixed(2) + 'x'
    //控制视频的播放速率
    video.playbackRate = playbackRate

}

小结

总的来说,实现一个简单的人为改变速率的功能主要是前端三件套的基础应用,看完后希望对你以后的学习有帮助。本篇文章到这基本就ok了,小伙伴们赶紧去试一试吧😁!