CODEWITHSUNDEEP
azureasp.net-mvc-4html5-videoazure-web-app-service
Quark Soup
Quark Soup

Reputation: 4736

How do you embed a video in an MVC application?

I want to embed a demo video of my product on my MVC web site. I've read through other posts on this forum and appears the best approach is this:

            <video controls="controls" autoplay="autoplay">
                <source src="~/Files/Demo Video.mp4" type="video/mp4" />
                Your browser does not support the video tag.
            </video>

Oddly, this works when I run it locally, but when I publish it to my Azure web site, I get the video player to show, but it gives me message:

             Invalid Source

Is there some trick to publishing video content in a 'Files' directory that I'm missing? In Visual Studio, the 'Demo Video.mp4' has the 'Build Action' as 'Content' and the 'Copy to Output Directory' set to 'Copy if Newer'. What am I missing?

Upvotes: 0

Views: 2248

Answers (1)

Fei Han
Fei Han

Reputation: 27793

Please try to add MIME type for .MP4 file in your Web.config via App Service Editor.

<system.webServer>
  <staticContent>
    <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
  </staticContent>
</system.webServer>

Besides, please make sure if the Demo Video.mp4 is in Files folder on your Azure website. And I recommend that you could store your videos (or other static files) in Azure storage.

Edit:

The following are my Project Folder Structure and main code that I used to display video in web page. If possible, you could try to create a new MVC project and do same thing as I did, and then publish the project to a new Azure website to check if it will works fine.

Project Folder Structure

enter image description here

Put the below code in your About page

@{
    ViewBag.Title = "About";
}
<h2>@ViewBag.Title.</h2>
<h3>@ViewBag.Message</h3>

@*<p>Use this area to provide additional information.</p>*@

<video controls="controls" autoplay="autoplay">
    <source src="~/Files/Demo Video.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>

Browse the website

enter image description here

Upvotes: 2

Related Questions