MVC Tips : Play or display video in ASP.NET MVC using HTML5

Click Here to Download PlayVideoInMVC.zip

It is very easy to play or display video in ASP.NET MVC using HTML5. We can do this using custom action filter in MVC. We can play various files like MP4, Ogg, WebM, etc. format.

Here are step by step tutorial to play video in ASP.NET MVC using HTML5.

Here is example for this.


In this example we are taking .MP4 file to play in browser.

STEP : 1
Create an ASP.NET MVC Empty application in visual studio. Give project name like 'PlayVideoInMVC'.

STEP : 2
After creating empty application create new folder 'VideoDataFile' after that add video files in this folder.

STEP : 3
Now we are going to add custom action filter. Add new folder 'CustomDataResult' and add new class file 'VideoDataResult.cs'. In this class we need to inherit 'ActionResult' class and override 'ExecuteResult' method.

In method we write code like read video file and send response back to controller using "context.HttpContext.Response.BinaryWrite" method.

Below is code for 'VideoDataResult.cs' file :

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Hosting;
using System.Web.Mvc;

namespace PlayVideoInMVC.CustomDataResult
{
    public class VideoDataResult : ActionResult
    {
        /// <summary>
        /// The below method will respond with the Video file
        /// </summary>
        /// <param name="context"></param>
        public override void ExecuteResult(ControllerContext context)
        {
            
            var strVideoFilePath = HostingEnvironment.MapPath("~/VideoFiles/Test2.mp4");
            
            context.HttpContext.Response.AddHeader("Content-Disposition", "attachment; filename=Test2.mp4");

            var objFile = new FileInfo(strVideoFilePath);

            var stream = objFile.OpenRead();
            var objBytes = new byte[stream.Length];
            stream.Read(objBytes, 0, (int)objFile.Length);
            context.HttpContext.Response.BinaryWrite(objBytes);

        } 
    }
}

STEP 4 :
Now we are going to add our controller that can take care of Video data result. Now add one MVC controller and name it 'VideoDataController' in 'Controller' folder.

Below is code for 'VideoDataController' file : 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using PlayVideoInMVC.CustomDataResult;
using System.Web.Mvc;

namespace PlayVideoInMVC.Controllers
{
    public class VideoDataController : Controller
    {
        //
        // GET: /VideoData/

        public ActionResult Index()
        {
            return new VideoDataResult();
        }

    }
}

STEP : 5
Now add new controller to view or display video name it 'ViewVideoController', after that add 'view' and in this 'view' add HTML5 video tag to play video in video player.

In this view we also add one download video link. This link allows to download video. On clicking of this link you will see the download file dialog box.

Below is the HTML markup of 'View' :

@{
    ViewBag.Title = "Index";
}

<h2>Play Video</h2>
<h3><a href="@Url.Action("Index", "VideoData")">Download Video</a> </h3>
<video width="320" height="240" controls autoplay="autoplay">
    <source src="@Url.Action("Index", "VideoData")" type="video/mp4">
</video>

We need to set 'src' property of video tag to get video data and play that. Now run the application with this URL 'http://localhost:[your port]/ViewVideo'. I ran this in chrome. You can run on any other HTML5 enabled browser.

Here is a very useful link to check that does your browser support HTML5 video and also which video format support.

Important : One important thing to note here is that we can use our custom action filter for two purposes, first to display video on browser and Second allow to download video file.

So the same controller serves two purposes. We can centralize our code by doing this.

Output :

Below are the books that you would like :