Add Videos On MVC Web Page- Web Helper
2011-10-29 16:33
323 查看
Source:http://www.dotnetcurry.com/(X(1)S(4eqxotqwohq03aerm3zqgj55))/ShowArticle.aspx?ID=622
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:
![](http://www.dotnetcurry.com/images/MVC/EmptyTemplateRazor.jpg)
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.
![](http://www.dotnetcurry.com/images/MVC/MvcAddPackageReference2411.png)
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-helpersoption. Select that option and click Install.
![](http://www.dotnetcurry.com/images/MVC/MicrosoftWebHelpers2411.png)
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.
![](http://www.dotnetcurry.com/images/mvc/microsoft.web.helpers1712.png)
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.
![](http://www.dotnetcurry.com/images/mvc/MvcVideoFlashWebHelper1712.png)
The list below outlines the optional parameters:
[align=justify]path – the path to the video file [/align]
[align=justify]width – the width of the video rendered in the web page [/align]
[align=justify]height - the height of the video rendered in the web page [/align]
[align=justify]play – value that determines if the video will play automatically [/align]
[align=justify]loop – value that determines if the video automatically starts upon ending [/align]
[align=justify]menu – value that determines if the context menu is visible [/align]
[align=justify]bgColor – the background colour of the helper [/align]
[align=justify]quality – the output video quality. Values include low, autolow, autohigh, medium, high, and best [/align]
[align=justify]scale – sets the size of the video. Values include exactfit, showall and noorder [/align]
[align=justify]windowMode – sets the placement of the video. Values include transparent, window and opaque[/align]
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.
![](http://www.dotnetcurry.com/images/mvc/MvcVideoMediaPlayer1712.png)
The list below outlines the optional parameters:
[align=justify]path – the path to the video file [/align]
[align=justify]width – the width of the video rendered in the web page [/align]
[align=justify]height - the height of the video rendered in the web page [/align]
[align=justify]autoStart – value that determines how many times the video will play automatically [/align]
[align=justify]uiMode – value that determines which controls show up in the user interface. Values include invisible, none, mini, or full [/align]
[align=justify]stretchToFit – value that determines if video will stretch to fit the width and height settings [/align]
[align=justify]enableContextMenu – value that determines if a context menu appears when right-clicking on the video [/align]
[align=justify]mute – self explanatory [/align]
[align=justify]volume – self explanatory[/align]
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.
![](http://www.dotnetcurry.com/images/mvc/MvcVideoSilverlightPlayer1712.png)
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
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:
![](http://www.dotnetcurry.com/images/MVC/EmptyTemplateRazor.jpg)
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.
![](http://www.dotnetcurry.com/images/MVC/MvcAddPackageReference2411.png)
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-helpersoption. Select that option and click Install.
![](http://www.dotnetcurry.com/images/MVC/MicrosoftWebHelpers2411.png)
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.
![](http://www.dotnetcurry.com/images/mvc/microsoft.web.helpers1712.png)
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.
![](http://www.dotnetcurry.com/images/mvc/MvcVideoFlashWebHelper1712.png)
The list below outlines the optional parameters:
[align=justify]path – the path to the video file [/align]
[align=justify]width – the width of the video rendered in the web page [/align]
[align=justify]height - the height of the video rendered in the web page [/align]
[align=justify]play – value that determines if the video will play automatically [/align]
[align=justify]loop – value that determines if the video automatically starts upon ending [/align]
[align=justify]menu – value that determines if the context menu is visible [/align]
[align=justify]bgColor – the background colour of the helper [/align]
[align=justify]quality – the output video quality. Values include low, autolow, autohigh, medium, high, and best [/align]
[align=justify]scale – sets the size of the video. Values include exactfit, showall and noorder [/align]
[align=justify]windowMode – sets the placement of the video. Values include transparent, window and opaque[/align]
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.
![](http://www.dotnetcurry.com/images/mvc/MvcVideoMediaPlayer1712.png)
The list below outlines the optional parameters:
[align=justify]path – the path to the video file [/align]
[align=justify]width – the width of the video rendered in the web page [/align]
[align=justify]height - the height of the video rendered in the web page [/align]
[align=justify]autoStart – value that determines how many times the video will play automatically [/align]
[align=justify]uiMode – value that determines which controls show up in the user interface. Values include invisible, none, mini, or full [/align]
[align=justify]stretchToFit – value that determines if video will stretch to fit the width and height settings [/align]
[align=justify]enableContextMenu – value that determines if a context menu appears when right-clicking on the video [/align]
[align=justify]mute – self explanatory [/align]
[align=justify]volume – self explanatory[/align]
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.
![](http://www.dotnetcurry.com/images/mvc/MvcVideoSilverlightPlayer1712.png)
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
相关文章推荐
- HTML codes: How do I add a "click here to refresh this page" button on my webpage
- 创建网页Video上的悬浮工具条(Create toolbar overflow video on webpage)
- WEB 页中OnInit 和 Page_Init 事件有什么不同
- Custom Error Page on Asp.net MVC
- How to use HttpWebRequest to post data to another page which is on another server
- viewpager.addOnPageChangeListener三个重写方法参数分析
- ASP.NET MVC2未能加载类型“System.Web.Mvc.ViewPage的解決方法
- Sys.WebForms.PageRequestManagerServerErrorException: An unknown error occurred while processing the request on the server. The s
- MVC区域 视图必须派生自 WebViewPage 或 WebViewPage<TModel>
- Asp.net Mvc 未能加载类型“System.Web.Mvc.ViewPage 的解決方法
- Sys.WebForms.PageRequestManagerServerErrorException: An unknown error occurred while processing the request on the serve
- Sys.WebForms.PageRequestManagerServerErrorException: An unknown error occurred while processing the request on the server. The status code returned from the server was: 500 解决办法
- About Create the Chart on web page.
- recommend a wait button on web page
- Asp.net Mvc 未能加载类型“System.Web.Mvc.ViewPage 的解決方法
- <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
- ViewPager的addOnPageChangeListener方法详解
- webview.addJavascriptInterface() doen not work on API 16+
- ASP.NET MVC:WebPageBase.cs
- IIS Error:404.2 The page you are requesting cannot be served because of the ISAPI and CGI Restriction list settings on the Web server