如何在 react-azure-mp 中集成“onprogress”功能？

Question

我有一个 React 应用来播放来自后端的一些视频。为了播放视频，我将 npm 模块 react-azure-mp 集成为 Azure 媒体播放器的包装模块。根据 Azure 媒体播放器文档，有一个名为 onprogress 的函数来调用 Xmlhttprequest。我需要在 npm 模块中调用此函数，但到目前为止我尝试的操作失败了。 视频可以正常播放基本功能，但 onprogress 功能不起作用。 这是 react-azure-mp 和我尝试过的

import { AzureMP } from 'react-azure-mp';

onProgress = () => {
    console.log("working...");
}

<AzureMP
    options={{ controls: true, autoplay: false }}
    onprogress={this.onProgress} // this is not working
    adaptRatio={[4, 3]}
    src={[{ src: video.resourceUrl }]}
/>

Azure 媒体播放器文档 - XMLHTTPRequests：https://amp.azure.net/libs/amp/latest/docs/index.html#amp.xmlhttprequestwrapper.onprogress

我该如何整合它？

Answer 1

你能凑合一下progress 事件吗？您可以使用从onInstanceCreated 回调返回的播放器抓取它设置的播放器。

  onProgress = () => {
    //
  }
  const onInstanceCreated = (player) => {
    if (player) {
       player.on("progress", onProgress);
    }
  };

  return (
      <AzureMP onInstanceCreated={onInstanceCreated} />
   );

在samples 之一中看到了与此类似的事情