JavaScript制作视频拼接时钟的启动提速与实时走时问题求助

算力阿峰

2026-9-24

自制真人视频时钟开发问题求助

我此前曾提到过正在寻找的时钟，现在我已经学会了JavaScript基础，开始自行编码开发。
我的目标是和参加科技设计课程的孩子们一起制作「Maarten Baas」时钟，由孩子们模仿时钟里的人物拍摄视频，将所有视频拼接后实现时钟显示效果。
由于每个数字对应一组独立视频，我搭建了表格结构，每列放置一个单独的视频。目前功能已初步可运行，但遇到了两个问题：

时钟启动耗时很长，请问是什么原因？是否所有MP4视频都被预加载了？只有页面加载几分钟后刷新，时钟才能正常显示。
时钟无法实时同步时间，仅显示页面加载时的时间，刷新页面才会更新为当前时间。我尝试使用setInterval实现更新，但会导致所有MP4每秒都重启一次。我希望实现每秒校验时间，仅在对应数字需要变化时才重载对应的MP4视频。

到目前为止我很享受编码的过程，但现在已经遇到了能力瓶颈，希望大家能帮忙解决。

<!DOCTYPE html>
<html>
  <head> </head>

  <body>
    <table>
      <tbody>
        <tr>
          <td>
            <video width="150" autoplay="true" id="decHour">
              <source src="" type="video/mp4" />
            </video>
          </td>

          <td>
            <video width="150" autoplay="true" id="hour">
              <source src="" type="video/mp4" />
            </video>
          </td>

          <td>:</td>

          <td>
            <video width="150" autoplay="true" id="decMin">
              <source src="" type="video/mp4" />
            </video>
          </td>

          <td>
            <video width="150" autoplay="true" id="min">
              <source src="" type="video/mp4" />
            </video>
          </td>
        </tr>
      </tbody>
    </table>
  </body>

  <script>
    const hour = new Array();
    hour[0] = "https://klok.martijndewinter.nl/vid/hour0.mp4";
    hour[1] = "https://klok.martijndewinter.nl/vid/hour1.mp4";
    hour[2] = "https://klok.martijndewinter.nl/vid/hour2.mp4";
    hour[3] = "https://klok.martijndewinter.nl/vid/hour3.mp4";
    hour[4] = "https://klok.martijndewinter.nl/vid/hour4.mp4";
    hour[5] = "https://klok.martijndewinter.nl/vid/hour5.mp4";
    hour[6] = "https://klok.martijndewinter.nl/vid/hour6.mp4";
    hour[7] = "https://klok.martijndewinter.nl/vid/hour7.mp4";
    hour[8] = "https://klok.martijndewinter.nl/vid/hour8.mp4";
    hour[9] = "https://klok.martijndewinter.nl/vid/hour9.mp4";
    hour[10] = "https://klok.martijndewinter.nl/vid/hour0.mp4";
    hour[11] = "https://klok.martijndewinter.nl/vid/hour1.mp4";
    hour[12] = "https://klok.martijndewinter.nl/vid/hour2.mp4";
    hour[13] = "https://klok.martijndewinter.nl/vid/hour3.mp4";
    hour[14] = "https://klok.martijndewinter.nl/vid/hour4.mp4";
    hour[15] = "https://klok.martijndewinter.nl/vid/hour5.mp4";
    hour[16] = "https://klok.martijndewinter.nl/vid/hour6.mp4";
    hour[17] = "https://klok.martijndewinter.nl/vid/hour7.mp4";
    hour[18] = "https://klok.martijndewinter.nl/vid/hour8.mp4";
    hour[19] = "https://klok.martijndewinter.nl/vid/hour9.mp4";
    hour[20] = "https://klok.martijndewinter.nl/vid/hour0.mp4";
    hour[21] = "https://klok.martijndewinter.nl/vid/hour1.mp4";
    hour[22] = "https://klok.martijndewinter.nl/vid/hour2.mp4";
    hour[23] = "https://klok.martijndewinter.nl/vid/hour3.mp4";

    const min = new Array();
    min[0] = "https://klok.martijndewinter.nl/vid/min0.mp4";
    min[1] = "https://klok.martijndewinter.nl/vid/min1.mp4";
    min[2] = "https://klok.martijndewinter.nl/vid/min2.mp4";
    min[3] = "https://klok.martijndewinter.nl/vid/min3.mp4";
    min[4] = "https://klok.martijndewinter.nl/vid/min4.mp4";
    min[5] = "https://klok.martijndewinter.nl/vid/min5.mp4";
    min[6] = "https://klok.martijndewinter.nl/vid/min6.mp4";
    min[7] = "https://klok.martijndewinter.nl/vid/min7.mp4";
    min[8] = "https://klok.martijndewinter.nl/vid/min8.mp4";
    min[9] = "https://klok.martijndewinter.nl/vid/min9.mp4";
    min[10] = "https://klok.martijndewinter.nl/vid/min0.mp4";
    min[11] = "https://klok.martijndewinter.nl/vid/min1.mp4";
    min[12] = "https://klok.martijndewinter.nl/vid/min2.mp4";
    min[13] = "https://klok.martijndewinter.nl/vid/min3.mp4";
    min[14] = "https://klok.martijndewinter.nl/vid/min4.mp4";
    min[15] = "https://klok.martijndewinter.nl/vid/min5.mp4";
    min[16] = "https://klok.martijndewinter.nl/vid/min6.mp4";
    min[17] = "https://klok.martijndewinter.nl/vid/min7.mp4";
    min[18] = "https://klok.martijndewinter.nl/vid/min8.mp4";
    min[19] = "https://klok.martijndewinter.nl/vid/min9.mp4";
    min[20] = "https://klok.martijndewinter.nl/vid/min0.mp4";
    min[21] = "https://klok.martijndewinter.nl/vid/min1.mp4";
    min[22] = "https://klok.martijndewinter.nl/vid/min2.mp4";
    min[23] = "https://klok.martijndewinter.nl/vid/min3.mp4";
    min[24] = "https://klok.martijndewinter.nl/vid/min4.mp4";
    min[25] = "https://klok.martijndewinter.nl/vid/min5.mp4";
    min[26] = "https://klok.martijndewinter.nl/vid/min6.mp4";
    min[27] = "https://klok.martijndewinter.nl/vid/min7.mp4";
    min[28] = "https://klok.martijndewinter.nl/vid/min8.mp4";
    min[29] = "https://klok.martijndewinter.nl/vid/min9.mp4";
    min[30] = "https://klok.martijndewinter.nl/vid/min0.mp4";
    min[31] = "https://klok.martijndewinter.nl/vid/min1.mp4";
    min[32] = "https://klok.martijndewinter.nl/vid/min2.mp4";
    min[33] = "https://klok.martijndewinter.nl/vid/min3.mp4";
    min[34] = "https://klok.martijndewinter.nl/vid/min4.mp4";
    min[35] = "https://klok.martijndewinter.nl/vid/min5.mp4";
    min[36] = "https://klok.martijndewinter.nl/vid/min6.mp4";
    min[37] = "https://klok.martijndewinter.nl/vid/min7.mp4";
    min[38] = "https://klok.martijndewinter.nl/vid/min8.mp4";
    min[39] = "https://klok.martijndewinter.nl/vid/min9.mp4";
    min[40] = "https://klok.martijndewinter.nl/vid/min0.mp4";
    min[41] = "https://klok.martijndewinter.nl/vid/min1.mp4";
    min[42] = "https://klok.martijndewinter.nl/vid/min2.mp4";
    min[43] = "https://klok.martijndewinter.nl/vid/min3.mp4";
    min[44] = "https://klok.martijndewinter.nl/vid/min4.mp4";
    min[45] = "https://klok.martijndewinter.nl/vid/min5.mp4";
    min[46] = "https://klok.martijndewinter.nl/vid/min6.mp4";
    min[47] = "https://klok.martijndewinter.nl/vid/min7.mp4";
    min[48] = "https://klok.martijndewinter.nl/vid/min8.mp4";
    min[49] = "https://klok.martijndewinter.nl/vid/min9.mp4";
    min[50] = "https://klok.martijndewinter.nl/vid/min0.mp4";
    min[51] = "https://klok.martijndewinter.nl/vid/min1.mp4";
    min[52] = "https://klok.martijndewinter.nl/vid/min2.mp4";
    min[53] = "https://klok.martijndewinter.nl/vid/min3.mp4";
    min[54] = "https://klok.martijndewinter.nl/vid/min4.mp4";
    min[55] = "https://klok.martijndewinter.nl/vid/min5.mp4";
    min[56] = "https://klok.martijndewinter.nl/vid/min6.mp4";
    min[57] = "https://klok.martijndewinter.nl/vid/min7.mp4";
    min[58] = "https://klok.martijndewinter.nl/vid/min8.mp4";
    min[59] = "https://klok.martijndewinter.nl/vid/min9.mp4";

    const huidigeTijd = new Date();
    const h = huidigeTijd.getHours();
    const m = huidigeTijd.getMinutes();
    const dHour = document.getElementById("decHour");
    const dMin = document.getElementById("decMin");

    //show decimal hours.

    (function () {
      if (h >= 0 && h < 10) {
        dHour.src = "https://klok.martijndewinter.nl/vid/decHour0.mp4";
      } else if (h >= 10 && h < 20) {
        dHour.src = "https://klok.martijndewinter.nl/vid/decHour1.mp4";
      } else {
        dHour.src = "https://klok.martijndewinter.nl/vid/decHour2.mp4";
      }
    })();

    // show decimal minutes.
    (function () {
      if (m >= 0 && m < 10) {
        dMin.src = "https://klok.martijndewinter.nl/vid/decMin0.mp4";
      } else if (m >= 10 && m < 20) {
        dMin.src = "https://klok.martijndewinter.nl/vid/decMin1.mp4";
      } else if (m >= 20 && m < 30) {
        dMin.src = "https://klok.martijndewinter.nl/vid/decMin2.mp4";
      } else if (m >= 30 && m < 40) {
        dMin.src = "https://klok.martijndewinter.nl/vid/decMin3.mp4";
      } else if (m >= 40 && m < 50) {
        dMin.src = "https://klok.martijndewinter.nl/vid/decMin4.mp4";
      } else {
        dMin.src = "https://klok.martijndewinter.nl/vid/decMin5.mp4";
      }
    })();
    // show hours and minutes
    document.getElementById("hour").src = hour[h];
    document.getElementById("min").src = min[m];
  </script>
</html>

内容的提问来源于stack exchange，提问作者Martijn de Winter