如何创建渐变视频进度条？

视频中的动态进度条本身在视觉上非常吸引人。在这里，我们将使用简单的 HTML、CSS 和一些 JavaScript 创建一个渐变颜色的进度条。这里的渐变指的是颜色从一种到另一种非常平滑的变化。在这里，我们将渐变颜色从绿色更改为青色。

使用的预建函数：
主要是我们只需要 setInterval() 方法。

句法：

setInterval(function_reference, time interval)

让我们从创建 HTML 代码开始：

示例： HTML 代码
```
Gradient Progress Bar


Welcome To GFG

  
  
    
    
            Progress
    
    
```
这里的主线是：
```
Progress
```
这里， max属性告诉我们这里视频中的最大值将为 100，而value属性告诉我们从 0 开始。

我们选择它是因为它很容易理解，100 已完全播放且 0 尚未开始播放的视频百分比。

接下来，我们添加我们选择的 CSS：

示例： CSS 代码

progress[value] {
  appearance: none; 
  border: none;     
  color: green;   
}
  
progress[value]::-webkit-progress-value {
  background-image: linear-gradient(
    to right,
    #00ff00, #014f01
  );
  transition: width 1s linear;
}

现在，开始为进度条编写 JavaScript 代码。我们将逐步进行此操作，以便您可以轻松理解。

从视频中获取进度值：

让我们分步骤进行：
- 获取视频的当前时间。
- 获取视频的总时长。
- 使用百分比的基本数学公式计算进度值： (currentTime/duration = progressValue)
- Math.round()函数然后将结果更新为最接近的整数。
示例：进度值的 Javascript 代码。
```
const progress = document.getElementById("progress");
function progressLoop() {
  setInterval(function () {
    progress.value = 
Math.round((video.currentTime / video.duration) * 100);
  });
}
  
progressLoop();
```

基本任务完成，您将使用上述步骤获得渐变进度条。

此外，我们将添加下面列出的一些额外功能：

显示当前时间。
添加播放按钮。

显示当前时间：

这很容易做到！我们可以计算视频播放的秒数，并在进度条旁边的计时器中显示它们。

例子：

在 HTML 文件中添加计时器标签：
```
  
  
    
    
         Progress
    
    
```

现在我们只需要为其分配一个变量并使用innerHTML打印其中的当前值：

例子：

const progress = document.getElementById("progress");
const timer = document.getElementById( "timer" );
  
function progressLoop() {
  setInterval(function () {
    progress.value = 
Math.round((video.currentTime / video.duration) * 100);
    timer.innerHTML = 
Math.round(video.currentTime) + " seconds";
  });
}
  
progressLoop();

你会得到一个计时器，显示经过的秒数。

添加播放按钮：

一个视频标签有一个控制属性，调用时带有播放、进度、音量、跳过视频功能。让我们删除这个属性并创建一个播放/暂停按钮：

例子：

在 HTML 中添加一个按钮：
```
  
  
    
    
    
         Progress
    
    
```

现在将它与一个在播放和暂停之间切换视频的 JavaScript函数连接起来：

例子：

button = document.getElementById( "play" );
  
function playPause() { 
  if ( video.paused ) {
    video.play();
    button.innerHTML = "Pause";
  }
  else  {
    video.pause(); 
    button.innerHTML = "Play";
  }
}
  
button.addEventListener( "click", playPause );
video.addEventListener("play", progressLoop);

现在，您将看到预先构建的控制面板已被移除，按钮已取代它。

最后，只需在背景、视频框和按钮上添加所需的 CSS，您就会拥有一个渐变视频进度条。

完整代码：



  
    Gradient Video Progress Bar
    
  
  
    
    Welcome To GFG
  
    
      
      
      
        
      
        
        
        Progress

输出：