Reactjs Azure Media Player事件现在可用于React组件

我尝试创建一个React组件来播放Azure Media Services内容，它可以播放，但不能捕获事件。这是我的组件的代码：

import React, { useEffect, useRef } from 'react';
import { Helmet } from 'react-helmet';

export interface AzureMediaPlayerProps {
  videoUrl: string;
}

const AzureMediaPlayer = (props: AzureMediaPlayerProps): JSX.Element => {
  const { videoUrl } = props;

  const videoRef = useRef<HTMLVideoElement>(null);

  const clearListener = (): void => {
    videoRef.current?.removeEventListener('load', (): void => { });
    videoRef.current?.removeEventListener('progress', (): void => { });
  };

  const addListener = (): void => {
    videoRef.current?.addEventListener('load', (ev): void => { console.log(ev); });
    videoRef.current?.addEventListener('progress', (ev): void => { console.log(ev); });
  };

  useEffect((): void => {
    addListener();
    return clearListener();
  }, [videoRef]);

  return (
    <>
      <Helmet>
        <link href="//amp.azure.net/libs/amp/2.3.7/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet" />
        <script src="//amp.azure.net/libs/amp/2.3.7/azuremediaplayer.min.js" />
      </Helmet>
      <video
        id="vid1"
        className="azuremediaplayer amp-default-skin"
        autoPlay
        controls
        width="100%"
        data-setup='{"nativeControlsForTouch": false}'
        ref={videoRef}
      >
        <source src={videoUrl} type="application/vnd.ms-sstr+xml" />
        <p className="amp-no-js">
          To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
        </p>
      </video>
    </>
  );
};

AzureMediaPlayer.displayName = 'AzureMediaPlayer';

export default AzureMediaPlayer;

import React，{useffect，useRef}来自“React”；
从“react Helmet”导入{Helmet}；
导出接口AzureMediaPlayerProps{
videoUrl:string；
}
constAzureMediaPlayer=（道具：AzureMediaPlayerProps）：JSX.Element=>{
const{videoUrl}=props；
const videoRef=useRef（空）；
常量clearListener=（）：void=>{
videoRef.current？.removeEventListener（'load'，（）：void=>{}）；
videoRef.current？.removeEventListener（'progress'，（）：void=>{}）；
};
const addListener=（）：void=>{
videoRef.current？.addEventListener（'load'，（ev）：void=>{console.log（ev）；}）；
videoRef.current？.addEventListener（'progress'，（ev）：void=>{console.log（ev）；}）；
};
useffect（（）：void=>{
addListener（）；
返回clearListener（）；
}，[videoRef]）；
返回(

若要查看此视频，请启用JavaScript，并考虑升级到支持HTML5视频的Web浏览器。

);
};
AzureMediaPlayer.displayName='AzureMediaPlayer'；
导出默认AzureMediaPlayer；

我还尝试：

<video
    id="vid1"
    className="azuremediaplayer amp-default-skin"
    autoPlay
    controls
    width="100%"
    data-setup='{"nativeControlsForTouch": false}'
    ref={videoRef}
    onProgress={(ev): void => { console.log(ev); }}
    >
    <source src={videoUrl} type="application/vnd.ms-sstr+xml" />
    <p className="amp-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
    </p>
    </video>

{console.log（ev）；}
>

若要查看此视频，请启用JavaScript，并考虑升级到支持HTML5视频的Web浏览器。

但我无法了解球员的事件。谁能帮帮我吗？我怎样才能让玩家的事件反应

---

非常感谢。

建议您不要直接在React组件中使用放大器播放器。它不是为了组件化而编写的

试着看看像Shaka或HLS.js这样更现代的玩家，他们可能已经有了React包装器

比如说-

或者是一个更商业化的玩家，支持React，比如Theo player或Bitmovin

---

使用AMP播放器，我可以设置多个源以将转录添加到视频中。