【发布时间】:2017-05-18 19:47:28
【问题描述】:
我被要求向我公司的 Web 应用程序添加一个视频播放器,以播放来自 Azure 媒体服务的流式视频。
使用 Azure 门户和 Azure API,我已经能够加载和发布我们想要展示的视频文件。
我发现示例 here 和 here 显示了在 HTML 页面中设置 Azure 媒体播放器是多么简单。
我将相关位添加到我们的网络应用程序中,播放器出现了,但没有播放。在 Chrome 中,播放器是空白的。在 IE11 中,播放器显示“Invalid Source”。在 Edge 中,播放器显示“不支持这种类型的视频文件。”。
我在Azure Media Player Demo 中插入了我们视频的 URL,它们运行良好。
我使用 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>
我得到的结果与我在我们的网络应用程序中所做的相同,即空白或“无效源”或“不支持这种类型的视频文件。”
我假设我缺少一些基本的东西,但是什么?
【问题讨论】:
标签: html azure video-streaming media-player azure-media-services