时间戳

首页 > 解决方案 > 如何在 react-azure-mp 中集成“onprogress”功能？

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

问题描述

我有一个 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

我该如何整合它？

标签： reactjsazure

解决方案

你能凑合这个progress活动吗？您可以使用从onInstanceCreated回调返回的播放器获取它设置的播放器。

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

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

在其中一个样本中看到了与此类似的东西

推荐阅读