Javascript HTML视频缓冲冻结

我正在制作自定义视频控件，我有一个

@progress

事件，用于跟踪视频缓冲了多少，并更新进度条的宽度

div

：

<video @progress="videoBuffer($event)">

起初，我认为这是Vue的反应性问题，因为我通过道具传递缓冲区数据，但是，当我

console.log（e.target.buffered.end（0））

时，我可以看到数据本身在单击时冻结在任何位置

---

有人知道这是为什么，或者我如何解决它吗？

问题是您使用的是

end（0）

，它将首先返回的结尾

由于跳过了视频的一部分，因此有多个时间范围，但将继续显示第一个（索引0）部分

---

要向前跳转，您可以使用

e.target.buffered.end（e.target.buffered.length-1）

，但是由于时间范围是有序的，这并不总是适用于向后跳转。您可能需要遍历时间范围，并找到包含您在媒体中当前位置的时间范围。

刚刚尝试了此操作，但不幸没有修复。如果I

console.log（e.target.buffered.end（e.target.length-1））

并单击pass，数字仍然冻结。但是，如果I

console.log（e.target.buffered），索引会发生变化，这是对的，我可以看到
长度增加到2，然后增加到3，只是不确定如何处理这些信息我打错了！只需将其更改为
e.target.buffered.end（e.target.buffered.length-1）
就可以了！谢谢@DBSIt值得一提的是，Firefox仍然喜怒无常。所有其他浏览器都工作正常。
videoBuffer(e) {
  if (e.target.buffered.length === 1)
    // videoBuffered passed as props to the controls
    this.videoBuffered = (e.target.buffered.end(0) / e.target.duration) * 100;
},

<div
  class="dk__video-buffered"
  :style="{ maxWidth: videoBuffered + '%' }"
></div>

<div
  class="dk__video-track-container"
  @click="trackTime($event)"
>
  <div class="dk__video-track">
    <div
      class="dk__video-played"
      :style="{ width: playedWidth + '%' }"
    ></div>
    <div
      class="dk__video-buffered"
      :style="{ maxWidth: videoBuffered + '%' }"
    ></div>
  </div>
</div>

trackTime(e) {
  // Set the videos time on click
  this.video.currentTime =
    (e.offsetX / e.target.offsetParent.offsetWidth) * this.videoDuration;
},