利用JavaScript实现视频播放速度控制条的交互开发

前言

在正式编写视频进度条代码之前，我们需要先回顾一些HTML元素的基础特性，这有助于后续更好地理解布局逻辑和交互实现。

块级元素

• 特性概述：

  块级元素默认独占一行，从新行开始渲染，并尽可能填满父容器的宽度。

  支持设置宽度（width）、高度（height）、内边距（padding）及外边距（margin）等样式属性。

  常见的块级元素包括 <div>、<p>、<h1> 至 <h6>、<ul>、<li> 等。

行内块级元素

• 特性概述：

  行内块级元素不独占一行，可并排显示，但允许设置宽度和高度。

  支持设置宽度、高度、内边距和外边距等属性。

  常见的行内块级元素有 <span>、<img>、<input> 等。

  值得注意的是，常见的块级元素如 <a> 和 <button>，若应用了 display: inline-block; 样式，也会转换为行内块级元素。

行内元素

• 特性概述：

  行内元素不独占一行，在同一行内显示，且尽量不破坏文档流。

  无法设置宽度和高度，即使设置也不会生效。

  常见的行内元素有 <span>、<a>、<strong>、<em>、<img> 等。

  行内元素通常用于包裹文本或其他行内内容，保持文本流的连续性。

在设计视频进度条布局时，可根据上述元素特性选择合适的标签，并结合CSS实现视觉效果。接下来进入具体编码环节。

第一部分：HTML结构

<body>
    <div class="wrapper">
        <video src="./mv.mp4" width="765" height="430" controls class="video"></video>

        <div class="speed">
            <div class="speed-bar">1x</div>
        </div>
    </div>

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

• 使用 <video> 标签嵌入视频。src="./mv.mp4" 属性指定视频文件路径，请自行准备视频文件。controls 属性启用原生控制条，允许用户播放、暂停及调节音量。
• <script src="./index.js"></script>：引入外部JavaScript文件，后续JS逻辑必须依赖此引用。

第二部分：CSS样式设计

* {
    /* 外边距 */
    margin: 0;
    /* 内边距 */
    padding: 0;
}

• 通用选择器将所有元素的外边距和内边距重置为0，消除默认样式差异。

.wrapper {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
}

• position: fixed; 属性将 .wrapper 元素设置为固定定位，使其相对于浏览器视口定位，而非文档流中的其他元素。
• left: 50%; top: 50%; 将 .wrapper 元素的左边缘和顶部边缘分别定位在视口的水平和垂直中心。50% 表示距离视口左边缘和顶部边缘各一半的距离。
• transform: translate(-50%, -50%); translate(-50%, -50%) 函数将 .wrapper 元素沿X轴和Y轴分别向左和向上移动自身宽高的一半。此技巧常用于不确定宽高时的元素居中。
• display: flex; 将 .wrapper 元素设置为Flex布局，提供灵活的排列方式，轻松实现居中及等分布局。

.speed {
    width: 50px;
    height: 430px;
    background-color: #fff;
    display: inline;
    border-radius: 50px;
    overflow: hidden;
}

.speed-bar {
    width: 100%;
    height: 16%;
    background: linear-gradient(to bottom, #2376ae, #c16ecf);
    display: flex;
    justify-content: center; 
    align-items: center;
    cursor: pointer;
}

• display: inline;：将速度控制条容器设置为内联显示，前文已提及此特性。
• border-radius: 50px;：设置速度控制条容器的边框半径为50px，呈现圆形外观。
• overflow: hidden;：当内容溢出容器时隐藏溢出部分，保持界面整洁。

第三部分：JavaScript交互逻辑

//获取白底容器
//在白色容器上监听鼠标的移动事件
//获取鼠标移动的距离
//根据鼠标移动的距离来设计彩色容器的高度

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

speed.addEventListener('mousemove', function(e) {
    console.log(e.pageY);
    //offsetTop容器到浏览器顶部的距离
    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
})

该段代码监听速度控制条容器（.speed）上的鼠标移动事件，根据鼠标在容器内的垂直位置动态调整彩色容器（.speed-bar）的高度，并据此改变视频播放速度。具体步骤如下：

• 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 将计算出的播放速度应用到视频元素上。

该代码实现了根据鼠标在速度控制条容器内的垂直位置动态调整彩色容器高度，并据此计算并应用相应的视频播放速度。

效果展示

鼠标上下移动可控制视频播放速度，从上往下移动会加快播放速度。

补充说明

由于HTML、CSS和JS代码分开编写，必须在HTML文件头部添加 <link rel="stylesheet" href="./style.css"> 引入外部样式表，并在body中添加 <script src="./index.js"></script> 引入JavaScript文件，以确保页面样式和交互功能正常加载。

以上就是用JS制作可交互的视频进度条的案例分享的详细内容，更多关于JS可交互视频进度条的资料请关注本站其它相关文章！