我如何可以承载在Azure上MVC应用程序中嵌入视频？ [英] How can I host and embed a video in an MVC application on Azure?

问题描述

我创建了一个基本的应用程序，并上传到Azure上。我要嵌入视频，从而用户可以从列表中选择和查看每个之一的视频;像选择一部电影，看它的预告片，例如。

I have created a basic application and uploaded to Azure. I want to embed videos, so that a user can make a selection from a list and see a video for each one; like choosing a film and watching it's trailer, for example.

我创建了两个文件夹在我的MVC解决方案：/海报'包含.jpg文件作为背景为每个视频，和'/视频包含.mp4文件作为来源为每个视频。

I've created two folders in my MVC solution: '/Posters' contains .jpg files to act as background for each video, and '/Videos' contains .mp4 files as the source for each video.

该.cshtml片段是在这里：

The .cshtml snippet is here:

 <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>

发布后，视频元素是存在的，而海报显示正确，但是当我点击播放按钮，我得到一个流未找到错误。

After publishing, the video element is there, and the poster displays correctly, but when I click the play button, I get a "stream not found" error.

我使用的将videoPath和PosterPath值的相对路径，如下所示：

I'm using a relative path for the VideoPath and PosterPath values, as follows:

../../Videos/myvideo.mp4 

该VideoUrl和PosterUrl值需要是绝对路径，用'：'换成'/'的价值观，所以'http://mywebsite.azurewebsites.net/Videos/myvideo.mp4如下图所示：

The VideoUrl and PosterUrl values need to be an absolute path, with the ':' and '/' values replaced, so 'http://mywebsite.azurewebsites.net/Videos/myvideo.mp4' is shown as follows:

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

有明显的机会的路径（相对和绝对）是不正确的;但由于海报正确显示，我在想，如果还有另外一个原因。

There is obviously the chance that the paths (relative AND absolute) are incorrect; but since the Posters display correctly, I am left wondering if there is another reason.

有没有办法对我来说，测试该影片已正确地发布？道歉，如果这是一个非常基本的问题，这是我的第一个Azure应用程序： - ）

Is there any way for me to test that the videos have been published correctly? Apologies if this is a very basic question, it's my first Azure application :-)

感谢

推荐答案

您可能会更好把视频中的的Azure Blob存储。一个你将面临的问题是，每一次有人流视频，它会占用您的Azure网站的传出流量，这是的限于165MB每天。

You might be better off putting the video in Azure Blob Storage. One of the problems you're going to have is that every time someone streams your video, it'll count against your Azure Website's outgoing traffic, which is limited to 165MB a day.

如果您存储在Azure的Blob存储视频，这将是更快，更好的扩展，因为你可以利用的天青CDN ，而不会导致所有的网站的点击量。请注意，您还是要的Azure Blob存储成本，但它的可能是便宜得多的路线。

If you store the video in Azure Blob Storage, it'll be faster and scale better because you can take advantage of the Azure CDN, without incurring all the traffic to your site. Note that you still have to pay Azure Blob Storage costs, but it's probably the much cheaper route.

这也意味着你不必保持庞大的媒体文件在您的项目，这是我无法想象的是伟大的源代码控制或部署。

It also means you don't have to keep huge media files in your project, which I can't imagine is great for source control or deployments.

有一个关于如何做平滑流与Silverlight 以及如何获得教程 HTML5视频工作 。一个重要的提示，请确保您设置内容类型，当你存储的文件，否则他们将只需要下载和流没有。

There's tutorials on how to do smooth streaming with Silverlight and how to get HTML5 video to work. One important note, make sure you set the Content Type when you store the files, otherwise they will just download and not stream.

例使用 HTML5 VideoJS （也应该与你的flash播放器上面的工作）：

Example using HTML5 VideoJS (which should also work with your flash player above):

1. 在Azure的门户网站创建一个Blob存储帐户


2. 将视频上传。无论是通过code，或使用 Azure存储资源管理器。请确保您设置的文件的内容类型视频/ MP4


3. 添加VideoJS CSS和脚本文件，并创建一个＆lt;视频＆GT; 元素指向您的Blob存储文件

1. Create a blob storage account in the Azure Portal
2. Upload your video. Either through code, or using Azure Storage Explorer. Make sure you set the Content Type of the file "video/mp4"
3. Add the VideoJS css and script files, and create a <video> element pointing to your Blob storage file

code：

<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存储是利用共享的访问签名的。这些让你保持私人斑点，然后生成标识的URL的是只适用于指定的时间段。这样一来，你的应用程序的用户可以查看视频，如果他们复制网址，试图重新分配，它会过期，并且是无用的。这并不下载和分发停止它们，而不是受DRM的形式虽然。

One of the other advantages to using Blob Storage is the use of Shared Access Signatures. These let you keep blobs private, and then generate signed URL's that are only valid for a specified time period. This way, users of your application can view the videos, and if they copy the URL to try and redistribute, it'll expire and be useless. This does not stop them from downloading and distributing, and isn't a form of DRM though.

这篇关于我如何可以承载在Azure上MVC应用程序中嵌入视频？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！