Azure Media Services流无法在Blazor应用中通过Azure Media Player播放

架构老林

2026-7-21

Azure Media Services流无法在Blazor应用中播放问题

我有一个已确认可用的Azure Media Services流，这个流能在Azure Media Player测试站点正常播放，但在我开发的Blazor应用里就是显示不出来。肯定是我哪里理解错了，下面是Blazor应用的相关代码：

Razor页面

@page "/FastMarketScreen"
@inject IJSRuntime JavaScript

<h3>FastMarketScreenStream</h3>

<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0"> </video>

@code {

}

razor.js脚本

我最近尝试用JavaScript实现，但之前用HTML标签方式也没成功。razor.js里的console.log信息从来没在控制台输出过，我不局限于用JavaScript，这个页面设计很简洁。

console.log("Dingus");

var myOptions = {
    autoplay: true,
    controls: true,
    width: "1920",
    height: "1080",
    poster: ""
};
var myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([{ src: "<url here>", type: "application/vnd.ms-sstr+xml" },]);

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>FastMarketScreen</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="css/azuremediaplayer.min.css" rel="stylesheet" />
</head>

<body>
    <script src="JS/azuremediaplayer.min.js"></script>

    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_content/Microsoft.Authentication.WebAssembly.Msal/AuthenticationService.js"></script>
    <script src="_framework/blazor.webassembly.js"></script>


</body>

</html>

我已经参考过以下资源：