将视频当前播放时间 video.currentTime 保留两位小数后，显示在页面的 displayStatus 元素中

2026-02-04 16:44:28 网络作者：本站点击：

将视频当前播放时间 video.currentTime 保留两位小数后，显示在页面的 displayStatus 元素中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>媒体播放时的方法</title>
  <style>
    h1 {
      font-size: x-large;
      margin: 6px 0px 6px 0px;
    }
 
    video {
     max-width: 445px;
     height:auto;
      border: double 8px lightgray;
    }
 
    .videoContainer {
      max-width: 445px;
      margin:0 auto;
    }
 
    #positionBar {
      height: 28px;
      color:#333;
      font-weight: bolder;
      background: #33FFFF;
      text-align: center;
    }
 
    #positionBar span {
      display: inline-block;
      margin-top: 7px;
    }
 
    #durationBar {
     margin:0 auto;
      border: solid 1px #333;
      width: 60%;
      margin-bottom: 5px;
      box-shadow:15px 10px 30px #333;
    }
 
    #bufferBar {
      background: lightsteelblue;
      position: absolute;
    }
.btn {
  width:50%;
  margin:0 auto;
 margin-top:28px;
}
   .btn button{
 
     
   }
  </style>
 
  
</head>
 
<body>
<div class="videoContainer">
<!-- timeupdate事件：当前播放位置（currentTime属性）改变   -->
  <video id="videoPlayer"  ontimeupdate="progressUpdate()" >
    <source src="butterfly.mp4" type="video/mp4">
    <source src="butterfly.webm" type="video/webm">
  </video>
</div>
 
<div class="barContainer">
  <div id="durationBar">
    <div id="positionBar"><span id="displayStatus">进度条.</span></div>
  </div>
</div>
 
<div class="btn">
  <button onclick="play()">播放</button>
  <button onclick="pause()">暂停</button>
  <button onclick="stop()">停止</button>
  <button onclick="speedUp()">加速播放</button>
  <button onclick="slowDown()">减速播放</button>
  <button onclick="normalSpeed()">正常速度</button>
</div>
 
</body>
<script>
    var video;
    var display;
 
    window.onload = function() {
      video = document.getElementById("videoPlayer");//获取videoPlayer元素
 
      display = document.getElementById("displayStatus");
 
      video.onplaying = function() {
       //alert(1);
      }
      video.onpause = function() {
        display.innerHTML = "暂停";
      }
    }
    //进程更新函数
  //currentTime属性自然改变，触发ontimeupdate事件
 
//  1. 获取视频的当前时间点，将它保存在currentTime属性中
//  2.（当前时间点/视频的总的播放时间）保存到durantion属性中
//  3. 转换为#positionBar 百分比长度。
//  时间变化显示于进度条中：
    function progressUpdate() {
      var positionBar = document.getElementById("positionBar");
    //currentTime--当前的播放位置
    //duration--媒介时长
    //(video.currentTime / video.duration * 100)得到一个浮点数
    //即： positionBar.style.width=百分数，它 长度是相对于#durationBar而言的
      positionBar.style.width = (video.currentTime / video.duration * 100)  + "%";//播放时进度条的宽
      displayStatus.innerHTML = (Math.round(video.currentTime*100)/100) ;//播放时进度条的文字
    }
 
    function play() {//播放函数
      video.play();
    }
 
    function pause() {
      video.pause();
    }
//currentTime人为地改变当前播放位置改变，触发timeUpdate事件
    function stop() {
      video.pause();
      video.currentTime = 0;
    }
 
    function speedUp() {
      video.play();
      video.playbackRate = 2;
    }
 
    function slowDown() {
      video.play();
      video.playbackRate = 0.5;
    }
 
    function normalSpeed() {
      video.play();
      video.playbackRate = 1;
    }
 
  </script>
</html>

displayStatus.innerHTML = (Math.round(video.currentTime*100)/100) ;
//播放时进度条的文字

这句代码是啥意思？Math.round是啥？

这句代码的作用是：将视频当前播放时间 video.currentTime 保留两位小数后，显示在页面的 displayStatus 元素中。

具体解释如下：

‌video.currentTime‌：
表示当前视频播放的位置（单位为秒），是一个浮点数。例如，如果视频播放到 123.456 秒，这个值就是 123.456。
‌video.currentTime * 100‌：
将当前播放时间乘以 100，目的是为了将小数点向右移动两位，方便后续进行四舍五入操作。
‌Math.round(...)‌：
这个函数用于对数字进行四舍五入处理。根据 Math.round() 的规则：

如果小数部分大于 0.5，则舍入到更大的整数；
如果小于 0.5，则舍入到更小的整数；
如果等于 0.5，则向正无穷方向舍入（即向上取整）。

‌除以 100‌：
在四舍五入之后再除以 100，把小数点还原回原来的位置，从而得到保留两位小数的结果。
‌displayStatus.innerHTML = ...‌：
把计算出的值赋给页面上某个元素（如一个 <span> 或 <div>）的 innerHTML 属性，用于展示当前播放进度。

示例

假设 video.currentTime 是 123.456：

123.456 * 100 = 12345.6
Math.round(12345.6) = 12346
12346 / 100 = 123.46

最终结果为 123.46，并显示在页面上。

总结

该代码通过 Math.round() 对视频播放时间进行四舍五入处理，保留两位小数，使进度条文字显示更清晰、易读。

标签：