Video Web Helper in ASP.NET MVC 3 RC 2 - Add Videos to your Web Pages

Posted by: Malcolm Sheridan , on 12/17/2010, in Category ASP.NET MVC
Views: 83141
Abstract: The following article demonstrates how to use the Video Web Helper ASP.NET MVC 3 RC 2, to add videos to our web pages.

ASP.NET MVC 3 RC 2 contains a full suite of web helpers that Microsoft have made available through the Microsoft Web Helpers library. One web helper that makes the process of creating rich user interfaces easier is the Video web helper. As the name suggests, this helper renders either a Windows Media, Flash or Silverlight video to the user, which is today’s world makes sense. This code also works in WebMatrix Beta 3 if you're using it.

Before moving on, you need to download ASP.NET MVC 3 RC. Click here to download and install them using the Microsoft Web Platform Installer.

Note: If you are doing ASP.NET MVC development, check out some ASP.NET MVC 3 RC articles over here too.

Open studio 2010 and create a new ASP.NET MVC 3 Web Application (Razor) project. The new MVC 3 dialog can be seen below:

Empty Template Razor 

Choose Razor as the view engine and click OK.

The next step is to download the Microsoft Web Helpers library through NuGet. Follow these steps to do this:

Step 1: Right click the website and choose Add Package Reference.

Mvc Add Package Reference 

Step 2: The Add Package Reference dialog will open. Search for Microsoft in the search box in the top right corner. Upon completion you'll see microsoft-web-helpers option. Select that option and click Install.

Microsoft Web Helpers

Step 3: Click 'Close' to return to the project

Check the references and you'll see that the library has been added to the project. 

microsoft web helpers 

Now it's time to start coding! The web helper I’m focusing on today is the Video web helper. This web helper renders video to the end user. The videos that can be rendered are Windows Media, Flash and Silverlight.

Flash Videos

To play flash videos, you use the Video.Flash web helper. The only parameter that is mandatory is path. This can be a local file, or as in this example, a link to a Youtube video. All other parameters are optional. 

Mvc Video Flash WebHelper

The list below outlines the optional parameters:

  • path – the path to the video file 
  • width – the width of the video rendered in the web page 
  • height - the height of the video rendered in the web page 
  • play – value that determines if the video will play automatically 
  • loop – value that determines if the video automatically starts upon ending 
  • menu – value that determines if the context menu is visible 
  • bgColor – the background colour of the helper 
  • quality – the output video quality. Values include low, autolow, autohigh, medium, high, and best 
  • scale – sets the size of the video. Values include exactfit, showall and noorder 
  • windowMode – sets the placement of the video. Values include transparent, window and opaque

When using windowMode, the outcome of setting the value to window will be the video file will open in a new window. Opaque will hide everything behind the video on the page. Transparent lets the background of the page show through the video, assuming any part of the video is transparent.

When using scale, showall makes the entire video visible while maintaining the original aspect ratio. Noorder scales the video while maintaining the original aspect ratio. Exactfit makes the entire video visible without preserving the original aspect ratio.

Windows Media Videos

To play WMV videos, you use the Video.MediaPlayer web helper. The only parameter that is mandatory is path. This can be a local file or a remote file. 

Mvc Video Media Player 

The list below outlines the optional parameters:

  • path – the path to the video file 
  • width – the width of the video rendered in the web page 
  • height - the height of the video rendered in the web page 
  • autoStart – value that determines how many times the video will play automatically 
  • uiMode – value that determines which controls show up in the user interface. Values include invisible, none, mini, or full 
  • stretchToFit – value that determines if video will stretch to fit the width and height settings 
  • enableContextMenu – value that determines if a context menu appears when right-clicking on the video 
  • mute – self explanatory 
  • volume – self explanatory

When using uiMode, if you don't specify a parameter, the video will be displayed with the status window, seek bar, control buttons, and volume controls in addition to the video window.

Silverlight Videos

To play Silverlight videos, you use the Video.Silverlight web helper. The only parameter that is mandatory is path.

Mvc Video Silverlight Player

The list below outlines the optional parameters:

  • path – the path to the video file 
  • width – the width of the video rendered in the web page 
  • height - the height of the video rendered in the web page 
  • bgColor – the background colour of the video 
  • autoUpgrade – value that determines whether or not the control will upgrade to a newer version of Silverlight if available

So with the Video web helper, adding video to your web pages just got easier.

The entire source code of this article can be downloaded over here

Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles
Malcolm Sheridan is a Microsoft awarded MVP in ASP.NET, a Telerik Insider and a regular presenter at conferences and user groups throughout Australia and New Zealand. Being an ASP.NET guy, his focus is on web technologies and has been for the past 10 years. He loves working with ASP.NET MVC these days and also loves getting his hands dirty with jQuery and JavaScript. He also writes technical articles on ASP.NET for SitePoint and other various websites. Follow him on twitter @malcolmsheridan


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by Francesco on Sunday, December 19, 2010 10:57 PM
good article malcolm. Can webhelpers be used in asp.net forms also?
Comment posted by Malcolm Sheridan on Monday, December 20, 2010 4:30 AM
@Francesco
Thanks.  Yes you'll be able to use cshtml or vbhtml files in Web Forms.  Stay tuned.
Comment posted by Alvaro Romero on Monday, June 20, 2011 11:41 AM
Thanks for the tuto, I have a question, exists some way to autodetect the video type, because on my project i will put a textbox where the user can paste the url from a video, so, how I detect the video type. Thanks
Comment posted by altan do─čan on Friday, May 25, 2012 11:18 AM
Hi,
i want to  use  video  helper  to play local file.But i execute  this code  this is not work for  flash.
@Video.Flash(path: "../Videos/template.swf",
                 width: "400",
                 height: "600",
                 play: true,
                 loop: true,
                 menu:  false,
                 bgColor: "red",
                 quality: "medium",
                 scale: "exactfit",
                 windowMode: "transparent")
when i execute this code  i see a empty  page and flash video not loaded
Comment posted by atul on Monday, June 25, 2012 12:22 AM
This is an excellent article which helped me get going on my local machine with video within minutes. Unfortunately, when I upload the razor page to the web server where I am hosting my page, it give me an error  "HTTP Error 404.3 - Not Found
The page you are requesting cannot be served because of the extension configuration. If the page is a script, add a handler. If the file should be downloaded, add a MIME map."

What is the solution for this?
Comment posted by vivek Kumar on Friday, November 9, 2012 12:14 AM
Silverlight player is not working, video not get played.
Comment posted by Nha Nguyen on Saturday, February 16, 2013 11:39 PM
I have a link video of page youtobe in database sql server of me
I can not know do how for reading link video youtobe from database down techology MVC 3 or MVC 4
I must help from you.Thanhks all you
Comment posted by abas on Thursday, April 18, 2013 1:52 PM
thank u very very very very very very very very very very very very very very very very very very very very very much.u hepled me.
Comment posted by Juan Ramirez on Friday, November 15, 2013 1:24 PM
I play the video in a partial view (ASP.NET MVC 4.0). The partial view is shower in jquery.dialog() but when I close the dialog in IE the video not stop

Do you any idea ?
Comment posted by Juan Ramirez on Friday, November 15, 2013 1:55 PM
I play the video in a partial view (ASP.NET MVC 4.0). The partial view is shower in jquery.dialog() but when I close the dialog in IE the video not stop

Do you any idea ?

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel