Question

我被要求将视频播放器添加到我公司的网络应用程序中，该应用程序播放来自Azure媒体服务的流媒体视频。

使用Azure门户和Azure API，我已经能够加载和发布我们想要呈现的视频文件。

我发现示例here和here显示了在HTML页面中设置Azure Media Player的简单程度。

我将相关位添加到我们的网络应用程序中并且播放器显示，但没有播放。在Chrome中，播放器为空白。在IE11中，播放器显示＆＃34; Invalid Source＆＃34;。在Edge中，播放器显示＆＃34;此类视频文件不受支持。＆＃34;。

我在Azure Media Player Demo中插入了我们视频的网址，但效果很好。

我使用Azure的样本和他们自己的宣传视频创建了简单的HTML文件，其中包含视频播放器的基础知识。

<!DOCTYPE html>
<html>
    <head>
        <title>Azure Media Player Test</title>
        <link href="//amp.azure.net/libs/amp/1.3.0/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
        <script src= "//amp.azure.net/libs/amp/1.3.0/azuremediaplayer.min.js"></script>
    </head>
    <body>
        This sample came from <a href="https://azure.microsoft.com/en-us/blog/announcing-azure-media-player/">https://azure.microsoft.com/en-us/blog/announcing-azure-media-player/</a>
        <br />
        <br />
        <video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" controls autoplay width="640" height="400" poster="" data-setup='{"nativeControlsForTouch": false}' tabindex="0">
            <source src="http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest" type="application/vnd.ms-sstr+xml" />
            <p class="amp-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
        </video>
    </body>
</html>

和

<!DOCTYPE html>
<html>
    <head>
        <title>Azure Media Player Test</title>
        <link href="//amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
        <script src="//amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>
    </head>
    <body>
        This sample came from <a href="http://amp.azure.net/libs/amp/latest/docs/">http://amp.azure.net/libs/amp/latest/docs/</a>
        <br />
        <br />
        <video id="vid1" class="azuremediaplayer amp-default-skin" autoplay controls width="640" height="400" poster="poster.jpg" data-setup='{"nativeControlsForTouch": false}'>
            <source src="http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest" type="application/vnd.ms-sstr+xml" />
            <p class="amp-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
        </video>
    </body>
</html>

我得到的结果与我在网络应用中的结果相同，即空白或＆＃34;无效来源＆＃34;或＆＃34;不支持此类视频文件。＆＃34;

我认为我错过了一些基本的东西，但是什么？

Answer 1

您是使用Web服务器来托管您编写的代码还是仅在本地运行它？如果您在本地运行它，则无需使用某种形式的网络服务器，播放就无法在Chrome或边缘工作。有关详细信息，请参阅此答案： Azure media player(AMP) not working on chrome if script file is saved locally

我的Azure媒体服务视频无法在Azure Media Player中播放

1 个答案: