reactjs - 如何在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之一中看到类似的事情。