I tried to create a React component to play Azure Media Services content and it works to play, but not to capture events. This is the code of my component:
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;
I also tried:
<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>
But I was not able to get the events of the player. Can anybody please help me? How can I get the player events in React?
Thanks a lot.
Recommend that you don't try to use the AMP player in React component directly. It was not written to be componentized.
Try looking at a more modern player like Shaka or HLS.js that may already have a React wrapper for it.
For example - https://www.npmjs.com/package/shaka-player-react https://github.com/matvp91/shaka-player-react
Or a more commercial player that supports React like Theo Player or Bitmovin https://docs.theoplayer.com/getting-started/02-frameworks/02-react/00-getting-started.md https://github.com/bitmovin/bitmovin-player-web-samples