javascript - 在 React <video> 元素上使用 `onProgress` 回调未接收预期属性

我有一个视频元素，我传递了一个 url 以及一个 onCanPlay 和 onProgress 回调。

<video
  url={url}
  onCanPlay={this.onCanPlay}
  onProgress={this.onProgress}
/>

本例中我传入的 URL 来自 window.URL.createObjectURL。我确实收到了 onProgress 事件，但它没有 lengthComputable、total 和 loaded 属性。

onProgress = ({ lengthComputable, total, loaded }) => {
  console.log(lengthComputable, total, loaded);  // these are all undefined.
}

我有点困惑。 According to MDN, these events should exist on that trigger ，所以我想知道这是React的一个怪癖还是我做错了什么。

如何获取视频的进度事件？

最佳答案

我相信这些属性在 nativeEvent 上可用:

onProgress = ({ nativeEvent: { lengthComputable, total, loaded } }) => {
  console.log(lengthComputable, total, loaded);
}

您尝试从中读取属性的对象是 React's SynteticEvent .

关于javascript - 在 React <video> 元素上使用 `onProgress` 回调未接收预期属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43356222/