如何在Azure上的MVC应用程序中托管和嵌入视频？

Question

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

我创建了两个文件夹在我的MVC解决方案:"/海报"包含.jpg文件作为背景为每个视频,和"/视频"包含.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应用程序:-)

谢谢

Answer 1

您可能最好将视频放入Azure Blob存储中.您将遇到的一个问题是,每当有人播放您的视频时,它都会计入您的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的一种形式.