asp.net-mvc - 尝试将 Azure 媒体播放器集成到 React JS 中。但 Azure 依赖的 JavaScript lib 函数未找到 "amp"

Question

这是我用于渲染媒体播放器的 React js 文件代码。 我在加载此页面时导入了 js 文件，并在渲染时使用选项参数调用“amp”函数。

 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 包!!