javascript - HTML5 视频播放器进度条准确提示

Question

大多数视频播放器允许您单击进度条跳转到视频中的特定点，通过使用鼠标在进度条上的位置来粗略计算出如果进度条是用户将跳到视频中的哪个点在那个时候点击。

如果进度条最大值很小，则计算正确。

这是一个例子：

$("#range").on("click", function(event){
    var tooltip = Math.round((event.offsetX / event.target.clientWidth) * parseInt(event.target.getAttribute('max')));
    if (tooltip < 0) {
        tooltip = 0
    }else if (tooltip > 10) {
        tooltip = 10
    } 
    $(".calculated").text("Calculated Value: " + tooltip)
    $(".real").text("Real Value: " + $(this).val())
});

.main{
    position: relative;
    width: 100%;
    margin-top: 50px
}

/* Tooltip text */
.main .tooltip {
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px;
  border-radius: 6px;
}

input{
    width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
    <span class="tooltip calculated">5</span>
    <span class="tooltip real">20</span>
    <input type="range" min="0" max="10" value="20" id="range">
</div>

但如果进度条最大值很大，则计算将不准确。

这是一个例子：

$("#range").on("click", function(event){
    var tooltip = Math.round((event.offsetX / event.target.clientWidth) * parseInt(event.target.getAttribute('max')));
    if (tooltip < 0) {
        tooltip = 0
    }else if (tooltip > 1000) {
        tooltip = 1000
    } 
    $(".calculated").text("Calculated Value: " + tooltip)
    $(".real").text("Real Value: " + $(this).val())
});

.main{
    position: relative;
    width: 100%;
    margin-top: 50px
}

/* Tooltip text */
.main .tooltip {
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px;
  border-radius: 6px;
}

input{
    width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
    <span class="tooltip calculated">20</span>
    <span class="tooltip real">20</span>
    <input type="range" min="0" max="1000" value="20" id="range">
</div>

有没有其他解决方案可以得到更准确的计算？我很高兴听到任何建议。

标签： javascripthtmljqueryhtml5-video

Answer 1

因为点的宽度。

上图中，输入的实际长度为（100% - 点的宽度）

虽然可以简单地通过排除点的长度来计算，但不建议这样做，因为根据屏幕宽度或浏览器类型可能会出现错误。

我的解决方案是使用百分比。

$("#range").on("click", function(event) {
    var inputVal = parseInt(event.target.value);
    var inputMaxVal = parseInt(event.target.getAttribute("max"));
    var inputPercentage = inputVal / inputMaxVal * 100;

    var tmpVideo = document.getElementById("yourVideo");
    var videoDur = tmpVideo.duration;
    var videoCur = tmpVideo.currentTime;
    var videoPercentage = videoCur / videoDur * 100;

    $(".calculated").text("Calculated Value: " + inputPercentage);
    $(".real").text("Real Value: " + videoPercentage);
});

现在比较 inputPercentage 和 videoPercentage。

ps 我可能误解了这个问题，因为我使用的是翻译器。