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

Это мой код 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 **


azure reactjs react-redux asp.net-mvc azure-media-services
person Nayan    schedule 10.04.2018    source источник

Ответы (2)


arrow_upward
2
arrow_downward

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

person AbdelHady    schedule 18.04.2018
comment
может ли вышеуказанное решение работать в режиме реагирования ?? Я столкнулся с проблемой - person Gaurravs; 26.12.2018
comment
Я не особо пробовал работать с react-native, но, поскольку они компилируются в собственный код, я думаю, что эта библиотека не должна работать, но я не уверен - person AbdelHady; 26.12.2018
comment
@Gaurravs согласно ответу здесь social.msdn.microsoft.com/Forums/en-US/, плеер не поддерживается в react-native - person AbdelHady; 26.12.2018

arrow_upward
0
arrow_downward

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

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

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

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

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

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

person Alex Sidorenko    schedule 19.07.2018