Reactjs 如何在React.js中正确设置Azure Media Player？

我目前正在将React组件与Azure Media Player集成。我遵循文档，首先，我将所需的CDN URL添加到index.html文件中。然后我将示例代码添加到应用程序中问题是，它抛出错误

'amp'未定义无未定义

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>
        )
    }
}

class视频播放器扩展组件{
渲染（）{
常数myOptions={
“nativeControlsForTouch”：错误，
控制：对，
自动播放：对，
宽度：“640”，
高度：“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",
“类型”：“application/vnd.ms sstr+xml”
}
]);
返回(
)
}
}

---

如何修复此问题？

当我以这种方式使用amp时，在.progress回调中提到的

，对我来说很有效。祝你好运

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>
    );
  }
}

你可能想看看我做的这个@ShmiliBreuer。但是遇到了一个问题，我不能在npm.js模块中使用一些本机函数，比如“onprogress”
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 })
    })
  }