首页 > 网络编程 > JavaScript > javascript技巧 > JS可交互视频进度条

用JS制作可交互的视频进度条的案例分享

2024-04-19 11:34:42 作者：呆同学

这篇文章主要介绍了用JS制作可交互的视频进度条的案例,在开始制作视频进度条之前,想先给大家补充一些关于元素的一些特点和用法,为大家更好地理解接下来的分享,感兴趣的朋友可以参考下

前言

在开始制作视频进度条之前，想先给大家补充一些关于元素的一些特点和用法，为大家更好地理解接下来的分享。

块级元素

特点：

块级元素会默认占据一整行，每个元素都会从新的一行开始，并且尽可能撑满其父元素的宽度。

可以设置宽度（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 布局。 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
})

这段 JavaScript 代码监听了速度控制条容器（.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>，你的 HTML 文件将会包含外部样式表和 JavaScript 文件，分别用于设置页面样式和实现交互功能。

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