Bean Software Logo
ASP.NET Database Search Control
 Home
    Shop
    Advertise
    Write For Us
    Affiliate
    Newsletter
    Contact

How to build ASP.NET Media Player Control

Just before few years video was rarity on web sites, mostly because Internet connection for many people was slow. Today almost everyone have high speed connection and video on web site is used where is needed, depending only of webmaster's needs.

 

Yet, ASP.NET don't have some specific method for showing video files. There are many options, more or less complex that you need to consider and select the most appropriate one. Also, there are many video formats used, problems with web browser compatibility, different client operating systems etc.

The fast and easy ways to play video on web page

Internet Explorer has interesting dynsrc parameter for the <img> tag. The code can look like this:

<img dynsrc="MyVideo.avi" />

This will show video only by using simple image HTML tag. But, it is not compatible with every web browser. In fact, it works only with Internet Explorer, but it can be satisfactory solution in some scenarios.

More compatible solution is to use <embed> tag. This solution is better since it is supported by different web browsers (notice that it is not recommended by W3C as standard HTML). Code can look like this:

<embed src="MyVideo.avi" />

Instead of using of <embed> tag, W3C recommends <object> tag. Here is the code to display WMV video file with <object> HTML tag:

<object height="320px" width="240px" type ="video/x-ms-wmv">
    <param name="src" value="http://localhost/MyMovie.wmv" />
</object>

Display video with Media Player active X control in Internet Explorer

More flexible way to show video on your ASP.NET web site is to use Windows Media Player active X control. Media player is probalbly already used by most of your site visitors. So they feel familiar with it. Also, Media Player supports many different file types. This control in Internet Explorer web browser is presented with <object> HTML tag with code like this:

<OBJECT width="312px" height="248px" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" VIEWASTEXT>
<PARAM name="autoStart" value="False">
<PARAM name="URL" value="./Movie/Pljacka.wmv">
<PARAM name="enabled" value="True">
<PARAM name="balance" value="0">
<PARAM name="currentPosition" value="0">
<PARAM name="enableContextMenu" value="True">
<PARAM name="fullScreen" value="False">
<PARAM name="mute" value="False">
<PARAM name="playCount" value="1">
<PARAM name="rate" value="1">
<PARAM name="stretchToFit" value="False">
<PARAM name="uiMode" value="full">
</OBJECT>

To show video file in Media Player control, you need to place proper HTML code into the web form. As you can see, this code contains one <object> tag with some <param> tags inside which represents Media Player properties. By using these properties you can adopt Media Player look an feel to your web site design. The <object> tag contains width and height properties to set Media Player control size, and also CLASSID property. This property value is CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6. Somewhere on the Internet you can find other value clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95. Second value is for older versions of Media Player, up to version 6.4. For Media Player version 7 or later, you should use first id.

Display Media Player control in Firefox web browser

Firefox web browser uses <object> or <embed> tags to show Media Player control. Before you try this, Firefox needs the Windows Media Player browser plugin installed. You can download the plugin here. After you install a plugin, you can check is it installed correctly on Windows Media Player Plugin Test Player (XP/Vista). Then, if test video file is played correctly, you can try to play your video file with HTML code like this:

<EMBED type="video/x-ms-wmv" width="416px" height="320px" autostart="False" URL="./Movie/Pljacka.wmv" enabled="True" balance="0" currentPosition="0" enableContextMenu="True" fullScreen="False" mute="False" playCount="1" rate="1" stretchTofit="False" uiMode="3">

Media Player Control properties

Available Media Player control properties are shown in table bellow.

Property Default value Description
AudioStream true
AutoSize true
AutoStart true Would movie start when page is loaded
AnimationAtStart true Would animation will play until video file is loaded
AllowScan true
AllowChangeDisplaySize true
AutoRewind false
Balance false
BaseURL 
BufferingTime 5
CaptioningID  
ClickToPlay true Would Media Player start when user clicks.
CursorType false
CurrentPosition true
CurrentMarker false
DefaultFrame  
DisplayBackColor false
DisplayForeColor 16777215
DisplayMode false
DisplaySize false
Enabled true
EnableContextMenu true
EnablePositionControls true
EnableFullScreenControls false
EnableTracker true
Filename URL Set the absolute or relative URL of file to play.
InvokeURLs true
Language true
Mute false
PlayCount 1
PreviewMode false
Rate 1
SAMILang  
SAMIStyle  
SAMIFileName  
SelectionStart true
SelectionEnd true
SendOpenStateChangeEvents true
SendWarningEvents true
SendErrorEvents true
SendKeyboardEvents false
SendMouseClickEvents false
SendMouseMoveEvents false
SendPlayStateChangeEvents true
ShowCaptioning false
ShowControls true Show Media Player controls or not.
ShowAudioControls true Are audio controls visible or not.
ShowDisplay false Is display visible or not.
ShowGotoBar false Is GotoBar visible or not.
ShowPositionControls true
ShowStatusBar false
ShowTracker true
TransparantAtStart false
VideoBorderWidth false
VideoBorderColor false
VideoBorder3D false
Volume -200
WindowlessVideo false

As you can see, Windows Media Player control has many properties. You are not required to set it all. If some property is not used, then control uses its default value. Of course, some property like FileName we must use if we want to play anything.

Custom ASP.NET Media Player Control

Placing static HTML code for Media Player control will not be very efficient method. It is much better to make custom ASP.NET server control which will render correct HTML code depending of property values. This custom control can be used easily by ASP.NET web application, to show play lists, to remember user preferences etc.Control will automatically detect web browser type and render appropriate HTML code.

You can download ASP.NET Media Player Control assembly, compiled with ASP.NET 1.1, ASP.NET 2.0 or ASP.NET 3.5. Complete source code is available in both Visual Basic .Net and C# programming languages.

How to use ASP.NET Media Control on web page

To use ASP.NET Media Control in your web project, you need to follow these simple steps:

1. Download the package and unzip it somewhere.

2. Add ASP.NET Media Control to Visual Studio toolbox

ASP.NET Media Player Control added to toolbox

ASP.NET Media Player Control added to toolbox

3. Place control to web page.

ASP.NET Media Player Control on web form
ASP.NET Media Player Control on web form

4. Set control's properties. You are required to set MovieURL property, to set absolute or relative URL to file. All other properties you need to set only if you don't want its default value. All properties related to playing media are located inside of Settings category.

Media Player Control properties
Control's properties

5. Start the web application and enjoy the movie.

Media Player at run time
ASP.NET Media Player Control at run time

Conclusion

I tested this ASP.NET control in Internet Explorer and Firefox web browsers and it worked fine. In both cases it render correct HTML and Media Player plays .wmv file. Of course, this software is still not tested enough. If you find some bug or you have an idea which new feature to add to control please let us know.

Going professional with ASPNetVideo

To get access to all Media Player options and to embed QuickTime or RealPlayer into ASP.NET web site, try ASPNetVideo. ASPNetVideo control provides search engine optimization, protected video files, custom user interface and more. For $49 you can use it on single site or just $99 for use on unlimited number of web sites. Things like no ongoing subscription costs, free future updates or 30 days money back guarantee justify decision to give it a try.


Tutorial toolbar:  Tell A Friend  |  Add to favorites  |  Feedback  |   Google


comments powered by Disqus

Related articles:

1. XML Automatic Documentation Tags
2. Data Visualization Using ASP.NET 2.0
3. How To Search And Show YouTube Videos in ASP.NET