Попытка интегрировать медиаплеер Azure в React JS. но зависимая от Azure функция lib lib не нашла "amp"

Question

Это мой код файла JS для рендеринга медиаплеера. componentDidMount() Я импортировал js-файл при загрузке этой страницы и во время рендеринга вызывал функцию 'amp' с параметром options.

 componentDidMount () {
        const script = document.createElement("script");

        script.src = "//amp.azure.net/libs/amp/2.1.5/azuremediaplayer.min.js";
        script.async = true;

        document.body.appendChild(script);
    }
    render() { 
            var myOptions = {
                "nativeControlsForTouch": false,
                controls: true,
                autoplay: true,
                width: "640",
                height: "400",
            }
            var myPlayer = amp("azuremediaplayer", myOptions);
            myPlayer.src([
                    {
                            "src": "//amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest",
                            "type": "application/vnd.ms-sstr+xml"
                    }
            ]);       
            return (

                <div className="form-horizontal">
                    <div className="form-group">
                        <div className="col-sm-4">Azure Media Player</div>
                        <div className="col-sm-6">
                        <video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0"></video>
                        </div>
                    </div>
                </div>
            );
        }
    }

export default AddItemForm;

И консоль выдает эту ошибку ** Строка 26: "amp" не определен no-undef**

Answer 1

Я думаю, что если вы загрузите скрипт игрока в синхронизации, как script.async = false;, это будет работать правильно.. Я знаю, что это повредит производительности, но, к сожалению, это способ загрузки этого странно упакованного плеера! .. Я ненавижу тот факт, что они не сделали пакет npm для этого!!

Answer 2

Вы можете предоставить обратный вызов onload для вашего скрипта следующим образом:

script.onload = () => this.setState({libraryLoaded: true})

И тогда вы можете реагировать на состояние внутри метода рендеринга

render() {
  if (!this.state.libraryLoaded) {
    return <span>Loading...</span>
  } else {
    return ... // your component
  }
}

Не забудьте инициировать состояние с libraryLoaded: false

Вы также можете проверить мой пакет, который в основном выполняет эту загрузку под капотом.