Azure Media Player events now working for React Component

Question

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.

Answer 1

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

Answer 2

This is the final version of VideoJsPlayer.tsx:

import { Box } from 'grommet';
import React, { useEffect, useRef, useState } from 'react';
import videojs, { VideoJsPlayerOptions } from 'video.js';
import 'video.js/dist/video-js.css';

export interface VideoJsPlayerProps {
  videoUrl?: string;
  transcriptionUrl?: string;
  type?: string;
  saveProgress: (minute: number) => Promise<void>;
  completeProgress: (progress: string) => Promise<void>;
  startingTime?: number;
}

const VideoJsPlayer = (props: VideoJsPlayerProps): JSX.Element => {
  const {
    videoUrl, transcriptionUrl, type, saveProgress, completeProgress, startingTime = 0,
  } = props;
  let player;

  const videoRef = useRef<HTMLVideoElement>(null);
  const [minutes, setMinutes] = useState<number>(0);

  const getMin = (sec: number): number => Math.floor(sec / 60);

  const updateMinutes = (time: string): void => {
    const secs = parseInt(time, 10);
    const min = getMin(secs);

    if (min > minutes) {
      setMinutes(min);
    }
  };

  const videoJsOptions = {
    autoplay: true,
    controls: true,
    responsive: true,
    fill: true,
    nativeControlsForTouch: false,
    playbackRates: [0.5, 1, 1.5, 2],
    sources: [
      {
        src: videoUrl as string,
        type: type as string,
      },
    ],
  } as VideoJsPlayerOptions;

  useEffect((): any => {
    const videoElement = videoRef.current;

    // mount
    if (videoElement) {
      // @ts-ignore
      player = videojs(
        videoElement,
        videoJsOptions,
        () => {
          player.addRemoteTextTrack({
            kind: 'captions',
            src: transcriptionUrl || '',
            label: 'English',
            language: 'en',
            srcLang: 'en',
            default: true,
          }, false);

          player.on('progress', (): void => {
            updateMinutes(player.currentTime());
          });

          player.on('ended', (): void => {
            completeProgress(player.currentTime());
          });
        },
      );

      // set starting time
      player.currentTime(startingTime);
    }

    // unmount
    return (): void => {
      if (player) {
        player.dispose();
      }
    };
  }, []);

  useEffect((): void => {
    if (minutes > 0) {
      saveProgress(minutes);
    }
  }, [minutes]);

  return (
    <Box
      fill="horizontal"
      align="center"
      background="yellow"
      style={{
        height: 700,
      }}
    >
      <video
        className="video-js vjs-big-play-centered"
        ref={videoRef}
      />
    </Box>
  );
};

VideoJsPlayer.displayName = 'VideoJsPlayer';

export default VideoJsPlayer;

The only details is the url to play: it must be /manifest(format=mpd-time-csf)