3

我创建了一个基本应用程序并上传到 Azure。我想嵌入视频,以便用户可以从列表中进行选择并查看每个视频;例如,选择一部电影并观看它的预告片。

我在 MVC 解决方案中创建了两个文件夹:“/Posters”包含 .jpg 文件作为每个视频的背景,“/Videos”包含 .mp4 文件作为每个视频的源。

.cshtml 片段在这里:

 <video controls="controls" poster="@Model.PosterPath" width="640" height="360">
    <source src="@Model.VideoPath" type="video/mp4" />

        <object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
            <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
            <param name="allowFullScreen" value="true" />
            <param name="wmode" value="transparent" />
            <param name="flashVars" value="config={'playlist':['@Model.PosterUrl',{'url':'@Model.VideoUrl','autoPlay':false}]}" />
            <img alt="@Model.AltText" src="@Model.PosterPath" width="640" height="360" title="No video playback capabilities" />
        </object>
</video>

发布后,视频元素在那里,并且海报正确显示,但是当我单击播放按钮时,出现“找不到流”错误。

我使用 VideoPath 和 PosterPath 值的相对路径,如下所示:

../../Videos/myvideo.mp4 

VideoUrl 和 PosterUrl 值需要是绝对路径,并替换了 ':' 和 '/' 值,所以 'http://mywebsite.azurewebsites.net/Videos/myvideo.mp4' 显示如下:

http%3A%2F%2Fmywebsite.azurewebsites.net%2FVideos%2Fmyvideo.mp4

显然路径(相对和绝对)有可能不正确;但由于海报显示正确,我想知道是否还有其他原因。

我有什么方法可以测试视频是否已正确发布?抱歉,如果这是一个非常基本的问题,这是我的第一个 Azure 应用程序 :-)

谢谢

4

2 回答 2

11

最好将视频放在Azure Blob Storage中。您将遇到的问题之一是每次有人流式传输您的视频时,它都会计入您的 Azure 网站的传出流量,每天限制为 165MB

如果您将视频存储在 Azure Blob 存储中,它会更快并且可以更好地扩展,因为您可以利用Azure CDN,而不会导致所有流量都流向您的站点。请注意,您仍然需要支付Azure Blob 存储费用,但这可能是更便宜的途径。

这也意味着您不必在项目中保留大量媒体文件,我无法想象这对于源代码控制或部署非常有用。

有关于如何使用 Silverlight 进行流畅的流式传输以及如何让HTML5 视频正常工作的教程。一个重要的注意事项,确保在存储文件时设置内容类型,否则它们只会下载而不是流式传输。

使用HTML5 VideoJS的示例(也应该与上面的 Flash 播放器一起使用):

  1. 在 Azure 门户中创建 Blob 存储帐户
  2. 上传您的视频。通过代码或使用Azure 存储资源管理器。确保设置文件“video/mp4”的内容类型
  3. 添加 VideoJS css 和脚本文件,并创建一个<video>指向 Blob 存储文件的元素

代码:

<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
<video class="video-js vjs-default-skin" controls
       preload="auto" width="640" height="480"
       data-setup="{}">
    <source src="http://storageaccount.blob.core.windows.net/yourvideo.mp4" type='video/mp4'>
</video>

使用 Blob 存储的其他优势之一是使用共享访问签名。这些使您可以将 blob 保密,然后生成仅在指定时间段内有效的签名 URL。这样,您的应用程序的用户可以观看视频,如果他们复制 URL 以尝试重新分发,它将过期且无用。这不会阻止他们下载和分发,但也不是 DRM 的一种形式。

于 2013-01-05T02:04:38.097 回答
-1

让您的模型返回路径,例如“~/Videos/myvideo.mp4”,然后在视图中使用@Url.Content(Model.VideoUrl).

至于视频是否已部署,首先检查您的解决方案并检查每个视频的编译属性是否设置为“内容”。这将确保它们与包一起部署。要进行验证,您应该能够浏览到http://mywebsite.azurewebsites.net/Videos/myvideo.mp4。此外,如果这是一个云服务,您可以在实例中启用远程访问和 RDP 以验证文件是否已部署。它们将位于 \sitesroot\0\videos 下的 E: 或 F: 上。

于 2013-01-05T01:35:16.013 回答