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

【问题标题】：How to properly setup Azure Media Player in React.js?如何在 React.js 中正确设置 Azure Media Player？
【发布时间】：2021-03-01 14:21:52
【问题描述】：

我目前正在将 React 组件与 Azure Media Player 集成。我按照文档进行操作，首先，我将所需的 CDN 网址添加到 index.html 文件中。然后我将示例代码添加到 App 中。 问题是，它会抛出错误 '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>
        )
    }
}

我该如何解决这个问题？

【问题讨论】：

你可能想看看这个npmjs.com/package/react-azure-mp
@ShmiliBreuer 我做到了。但是遇到了一个问题，我不能在 npm.js 模块中使用一些原生函数，比如“onprogress”

标签： reactjs azure azure-media-player

【解决方案1】：

当我以这种方式使用放大器时，提到的on.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>
    );
  }
}

还有加载器功能 - 我这样使用它是因为我可能需要在（可能的）离线环境中使用播放器。

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

【讨论】：