📌  相关文章
📜  如何创建渐变视频进度条？

📅  最后修改于: 2021-08-31 08:21:40             🧑  作者: Mango

视频中的动态进度条本身在视觉上非常吸引人。在这里，我们将创建一个进度条，使用简单的 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
      
      

    

    
  
         

输出：