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。