Блог

У меня есть приложение React для воспроизведения некоторых видео, поступающих из серверной части. Для воспроизведения видео я интегрировал модуль npm react-azure-mp для модуля-оболочки для медиаплеера Azure. Согласно документации Azure media Player, существует функция, вызываемая 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 media Player — XMLHttpRequests: https://amp.azure.net/libs/amp/latest/docs/index.html#amp.xmlhttprequestwrapper.onprogress

Как я могу это интегрировать?

Можете ли вы справиться с этим progress событием? Вы можете использовать проигрыватель, который возвращается из onInstanceCreated обратного вызова, для захвата проигрывателя, который он настраивает.

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

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

Видел что-то похожее на это в одном из примеров