MVC helper method for video

Introduction

There are no builtin html helpers in mvc for video tag, to play video in MVC 5 normally we are using the video HTML tag. This blog will guide to create mvc helper methods to play video using C# extension methods technology.

MVC helper method for video

Getting Started

In some cases, we required custom HTML helpers methods in MVC to play video instead of using HTML Video tag.

For example, you’re working on a client project where your client gives you API link for videos which returns video file in bytes. More your client asked you to provide an authentication token with API to validate your request.

The inbuilt HTML video element does not support providing an authentication token with the src attribute. In this case, the custom HTML helpers in MVC play a vital role to achieve this.

Three are various ways to create MVC helper methods, At the end of this blog, I have shared links that give the idea to create MVC helper methods. but the best practice is to create HTML methods using c# extension methods

The below code example is a static custom HTML helper method to play video and binds the base64 string to HTML Video tag rather than the binding link of the video file.

Code Example (MVC helper method for video)

 public static CustomVideo(this HtmlHelper helper,string id, string src, int height,int width)  
 {  
      //vdoBase64Data=string variable to store base64 string data of video  
      StringBuilder tagbuilder = new StringBuilder();  
      tagbuilder.Append("<video controls height='"+height+"'width='"+width"'>");  
      tagbuilder.Append(" <source type='video/webm'");  
      tagbuilder.Append("src='" + string.Format("data:video/webm;base64,{0}", vdoBase64Data) + "'/>");  
      tagbuilder.Append(" <source type='video/mp4'");  
      tagbuilder.Append("src='" + string.Format("data:video/mp4;base64,{0}", vdoBase64Data) + "'/>");  
      tagbuilder.Append("</video>");  
      return MvcHtmlString.Create(tagbuilder.ToString());  
 }  

C# code for (MVC helper method for video)

The above code shows an example of the helper method that is declared for the HTML video tag. The helper method is a static HTML helper method, you can create an MVC custom HTML helper for model.

The 'StringBuilder' class in the helper method is used to declare HTML video elements, their attributes, and child elements. At the end of the helper method, the method return html string using Create method of ‘MvcHtmlString’ class that actually renders the HTML video tag on the web page.

How to use the above MVC helper method for video

Create a static class in your project, give the name whatever you want. For example let's say the class name is 'MyCustomHelper'. Copy the above MVC helper method for video and paste it inside the class. Change code and put your own logic to bind to the src attribute.

To call this custom helper method on page, the syntax is same as like you are calling other inbuilt MVC helper methods

 @Html.CustomVideo("1","video link or base64 data",400,,800)  

Calling MVC helper method for video

Related Articles

1. Display image using MVC helper method
2. Custom Model Bound HTML Helper using Static Method
3. Custom Model Bound HTML Helper using Extension Method in MVC
4. Custom Strongly Type or Model Bound Helper Method in MVC
5. Custom HTML Helper Method in MVC

Summary

Here we learned how to creat custm HTML mvc helper function to play video in MVC. I hope you have enjoyed a lot.

Thanks