Question

我创建了一个基本应用程序并上传到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应用程序： - ）

由于

Answer 1

将视频放在Azure Blob Storage中可能会更好。您将遇到的问题之一是，每当有人流式传输您的视频时，它都会计入您的Azure网站的传出流量，即limited to 165MB a day。

如果您将视频存储在Azure Blob存储中，它会更快，更好地扩展，因为您可以利用Azure CDN，而不会产生您网站的所有流量。请注意，您仍然需要支付Azure Blob Storage costs，但这可能是更便宜的路线。

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

有关于如何smooth streaming with Silverlight以及如何获取HTML5 video to work的教程。一个重要的注意事项，请确保在存储文件时设置内容类型，否则它们只会下载而不会流式传输。

使用HTML5 VideoJS的示例（也适用于上面的Flash播放器）：

在Azure门户中创建blob存储帐户
上传您的视频。通过代码或使用Azure Storage Explorer。确保设置文件“video / mp4”
添加VideoJS css和脚本文件，并创建指向Blob存储文件的<video>元素

代码：

<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存储的另一个好处是使用Shared Access Signatures。这些允许您保持blob私有，然后生成仅在指定时间段内有效的签名URL。这样，您的应用程序的用户可以查看视频，如果他们复制URL以尝试和重新分发，它将过期并且无用。这并不能阻止他们下载和分发，但它不是DRM的一种形式。

Answer 2

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

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

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

2 个答案: