How to properly setup Azure Media Player in React.js?

Question

I'm currently integrating a React component with Azure Media Player. I followed the documentation and first, I added the required CDN urls to the index.html file. Then I added the sample code into the App. The problem is, it throws the error 'amp' is not defined no-undef

videoPlayer.js

class videoPlayer extends Component {
    render () {
        const myOptions = {
            "nativeControlsForTouch": false,
            controls: true,
            autoplay: true,
            width: "640",
            height: "400",
        }
        const myPlayer = amp("azuremediaplayer", myOptions);
        myPlayer.src([
            {
                "src": "https://devpflmedia-uswe.streaming.media.azure.net//d5f1a8b6-0d52-4e62-addc-aee7bafe408d/097cee43-6822-49bd-84f5-9f6efb05.ism/manifest",
                "type": "application/vnd.ms-sstr+xml"
            }
        ]);

        return (
            <video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0"></video>
        )
    }
}

How can I fix this?

You may want to look at this https://www.npmjs.com/package/react-azure-mp — Shmili Breuer, Mar 01 '21 at 14:28
@ShmiliBreuer I did. But encountered with a problem that I can't use some native functions in the npm.js module like "onprogress" — David Johns, Mar 01 '21 at 14:32

score 2 · Accepted Answer · answered Apr 04 '21 at 08:53

When I use the amp this way, the mentioned on.progress callback works for me. Good luck!

import * as React from "react"
import loader from "./loader";
import { RefObject } from "react";
import './videoPlayer.css';

const DEFAULT_SKIN = "amp-flush";
const DEFAULT_RATIO = [16, 9];
const DEFAULT_OPTIONS = {
    controls: true,
    autoplay: true,
    muted: true,
    logo: {
      enabled: false
    },
  };

declare const window: any;

export interface IVideoPlayerProps {
  readonly src: { src: string; }[];
  readonly options: any;
  readonly skin: string;
  readonly className: string;
  readonly adaptRatio: Array<number>;
}

export default class VideoPlayer extends React.PureComponent<IVideoPlayerProps, {}> {
  public static defaultProps = {
    skin: DEFAULT_SKIN,
    className: "",
    adaptRatio: DEFAULT_RATIO,
    options: DEFAULT_OPTIONS,
  }

  videoNode: RefObject<any>;
  player: any;
  initialization: any;

  constructor(props: IVideoPlayerProps) {
    super(props);
    this.videoNode = React.createRef();
  }

  componentWillUnmount() {
    this._destroyPlayer();
  }

  componentDidMount() {
    const { skin } = this.props;
    this.initialization = loader(skin).then(() => {
      this._createPlayer();
      this._setVideo();
    });
  }

  componentDidUpdate(prevProps: IVideoPlayerProps) {
    if (prevProps.src !== this.props.src) {
      this.initialization.then(() => this._setVideo());
    }
  }

  _destroyPlayer() {
    this.player && this.player.dispose();
  }

  _setVideo() {
    const { src } = this.props;
    this.player.src(src);
  }

  _createPlayer() {
    this.player = window.amp(this.videoNode.current, this.props.options);
    this.player.on("progress", () => alert('on progress called'));
  }

  render(): JSX.Element {
    return (
      <div>
        <video
          ref={this.videoNode}
        />
      </div>
    );
  }
}

Also the loader function - I use it this way since I may need to use the player in the (possible) offline environment.

export default (skin = 'amp-flush') => {
    return new Promise((resolve, _) => {
      if (document.querySelector('#amp-azure')) {
        // video player is already rendered
        return resolve()
      }

      let scriptTag = document.createElement('script')
      let linkTag = document.createElement('link')
      linkTag.rel = 'stylesheet'
      scriptTag.id = 'amp-azure'
      scriptTag.src = '//amp.azure.net/libs/amp/2.1.5/azuremediaplayer.min.js'
      linkTag.href = `//amp.azure.net/libs/amp/2.1.5/skins/${skin}/azuremediaplayer.min.css`
      document.body.appendChild(scriptTag)
      document.head.insertBefore(linkTag, document.head.firstChild)
      scriptTag.onload = () => resolve({ skin: skin })
    })
  }

How to properly setup Azure Media Player in React.js?

1 Answers1