定位元素以匹配视频播放器

Question

我正在研究危险性检查页面。在页面上将显示计分区，从5开始到1。

然后我需要将计分区域映射到视频中的秒数。

我目前正在使用CSS绝对位置（从左侧开始）和某些数学确定的宽度来创建评分区域。

我遇到的问题是，当视频开始与得分区域匹配时，它似乎在5上完美匹配。然后开始不同步。

关于如何获取这些元素以完美地映射到视频播放器，是否有任何建议。

我的代码是：

var vid = document.getElementById("hazzard_video_player");
var scoring_start = $('.scoring_start').val();
var video_length = '';

vid.ontimeupdate = function() {
  //var video_length = $('.video_length').val();
  video_length = Math.round(vid.duration);

  //console.log(vid.currentTime);

  //console.log(scoring_start+ '|' + video_length + '|' + vid.currentTime);

  var percentage = (Math.round(vid.currentTime)) / video_length * 100;
  //var fixed = percentage.toFixed(2);
  //var percentage_total = fixed;
  $("#custom-seekbar span").css("width", (Math.round(percentage)) + "%");
};

//console.log(vid.innerHTML);

vid.onplay = function() {
  video_length = Math.round(vid.duration);

  if (scoring_start.length != 1) {
    var times = scoring_start.split(",");

    setTimeout(function() {
      $('#custom-seekbar').fadeIn();
      $('.hazard-review-area').fadeIn();

      $.each(times, function(k, v) {
        var percentage = (times[k] / video_length) * 100;

        $('.scoring-zone.-zone-' + k).css('left', (Math.round(percentage)) + "%");
      })
    }, 1)
  } else {
    setTimeout(function() {
      $('#custom-seekbar').fadeIn();
      $('.hazard-review-area').fadeIn();

      var percentage = (scoring_start / video_length) * 100;

      $('.scoring-zone').css('left', (Math.round(percentage)) + "%");
    }, 1)
  }


};

<section>
  <div class="container -video">
    <div class="row u-mt2">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="hazard-area">
          <div id="hazzard_video_holder">
            <video controls="controls" controlslist="nodownload nofullscreen" id="hazzard_video_player" webkit-playsinline="" src="https://player.vimeo.com/external/111860212.hd.mp4?s=a5fee3ce1d14745d6ede23ad9a2a247d" type="video/mp4"></video>
          </div>
          <!-- #hazzard_video_holder -->
          <div id="custom-seekbar" style="">
            <span style="width: 24%;"></span>
          </div>
          <div class="hazard-review-area" style="">
            <div class="scoring-zone -zone-0 u-absolute" style="width: 11.1111%; left: 44%;">
              <div class="u-relative">
                <div class="hazard-score-number t-bold u-absolute" style="left: 0%; width: 20%">
                  <div class="text-center">
                    5
                  </div>
                </div>
                <div class="hazard-score-number t-bold u-absolute" style="left: 20%; width: 20%">
                  <div class="text-center">
                    4
                  </div>
                </div>
                <div class="hazard-score-number t-bold u-absolute" style="left: 40%; width: 20%">
                  <div class="text-center">
                    3
                  </div>
                </div>
                <div class="hazard-score-number t-bold u-absolute" style="left: 60%; width: 20%">
                  <div class="text-center">
                    2
                  </div>
                </div>
                <div class="hazard-score-number t-bold u-absolute" style="left: 80%; width: 20%">
                  <div class="text-center">
                    1
                  </div>
                </div>
              </div>
              <!-- /.u-relative -->
            </div>
            <!-- /.scoring-zone -->
            <div class="u-absolute t-red chance-block click-flag" style="left: 46%"><i class="fa fa-mouse-pointer"></i></div>
            <div class="u-absolute t-red chance-block click-flag" style="left: 49%"><i class="fa fa-mouse-pointer"></i></div>
            <div class="u-absolute t-red chance-block click-flag" style="left: 51%"><i class="fa fa-mouse-pointer"></i></div>
            <div class="u-absolute t-red chance-block click-flag" style="left: 54%"><i class="fa fa-mouse-pointer"></i></div>
            <div class="u-absolute t-red chance-block click-flag" style="left: 64%"><i class="fa fa-mouse-pointer"></i></div>
            <div class="u-absolute t-red chance-block click-flag" style="left: 69%"><i class="fa fa-mouse-pointer"></i></div>
          </div>
          <!-- /.hazard-review-area -->
        </div>
        <!-- /.hazard-area -->
      </div>
      <!-- /.col-lg-12 -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->
  <input type="hidden" class="video_length" value="45">
  <input type="hidden" class="scoring_start" value="20">
  <input type="hidden" class="scoring_end" value="25">
</section>

我怀疑，这取决于数字的宽度，每个数字的宽度自然会稍有不同。

在这方面的任何帮助，我都会碰到砖墙。