Question

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

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

我在这种情况下传递的网址来自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的怪癖，还是我做错了什么。

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

Answer 1

我相信nativeEvent上可以使用这些属性：

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

您尝试阅读属性的对象是React's SynteticEvent。

Answer 2

我找到了这个解决方案，但它并不完全相同。我们正在处理已缓冲的内容，并且可以有多个缓冲范围（当用户寻找新位置时，将有一个新的缓冲范围等）。

虽然这对于可视化文件的哪些部分已经加载/缓冲很有用，但在绝对加载进度方面它并不是很有用。

在https://github.com/souporserious/react-media-player/blob/master/src/vendors/HTML5.jsx#L121上找到：

_handleProgress = ({ target: { buffered, duration } }) => {
    let progress = 0

    if (duration > 0) {
      progress = (buffered.end(buffered.length - 1) / duration)
    }

    this.props.onProgress(progress)
}

但是，在加载src="myfile.mp3#t=20,30"等范围时，很快会遇到错误的进度值。你不会从0％开始。

请参阅https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/buffering_seeking_time_ranges

在react <video>元素上使用`onProgress`回调未接收到预期的属性

2 个答案: