How To Play Flash Video Files In ASP.NET

Videos are becoming common part of web sites today. Before just a few years, web designers avoided even larger picture on site, because Internet connection of many visitors was slow, and movies usually have much more bytes than pictures. Visitors did not like to wait more than a few seconds to see page loaded. Rare videos was very short, had low resolution and bad quality. But now, circumstances are changed. Now almost everyone have fast connection and time of dial-up connection is past. Now you can display video whenever you want to better describe your product or service.

There is a few different ways to show video on web page. Most popular are Windows Media Player, Quick Time, Adobe Flash or Silverlight. If you want to find out how to show video with Windows Media Player you can read How to build ASP.NET Media Player Control tutorial. This tutorial will focus on using of Flash to show flash video files on ASP.NET web site.

Flash becomes widely used and today it is most used technology for showing movies on Internet. Flash is used by most popular video sharing web sites like YouTube or Google Video. It is compatible with almost every operating system and web browser and very prevalent on Internet users computers. To see Flash movies, users need to have Flash player installed. On my experiences, at least 95% visitors have Flash player installed which is more than other available technologies. Flash is client side technology, although it can be used with static HTML page, but it is usually manipulated by server side web application.

You can't show flash video files directly. Flash is just a programming framework, which uses Action Script programming language. You need a program made in Flash (video player) to show .flv video on page. You can of course learn Action Script and develop your own player, but that is out of scope of this tutorial. I will leave that task to Flash developers. Fortunately, there are already some free and very good Flash video players available. Using of them will short your development cycle and provide you a quality solution. I selected JW FLV Player as the best solution.

Using of JW FLV Player on web page

There are a two basic steps when placing Flash application to web page:

- First, declare and initiate a Flash object

- Second, set properties of object according to your needs.

You can do this on two different ways, with static HTML tags <OBJECT > and <EMBED>, or by using a JavaScript. With static HTML your code could look something like this:

We need both <object > and <embed > tags to get browser compatibility. Internet Explorer uses <object> tag, but Firefox and Netscape can't see it and recognize just <embed>. We set parameters by using <param > tags, and inside <embed > tag. Code example above have added parameter name "movie" and value "player.swf". You can add any other parameter on the same way. Complete list of supported parameters for JW FLV Player you can see at their Flash vars page.

There is a problem with static HTML if visitors access with Internet Explorer. Flash application would not start until visitor clicks on it. If you just place a cursor over a movie you'll see an ugly border. Common way to avoid need to click every time when page load is to initiate Flash player with JavaScript. JavaScript code for starting Flash movie could look like this:

<p id='preview'>The player will show in this paragraph</p>

<script type='text/javascript' src='swfobject.js'></script>
<script type='text/javascript'>
var s1 = new SWFObject('player.swf','player','400','300','9');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('flashvars','file=video.flv');
s1.write('preview');
</script>

As you can see, nothing complicated here. Code creates SWFObject dynamically and then set its parameters. In this case visitor is not required to click to start a movie. Of course, JavaScript must be enabled in visitor's web browser.

Manipulating Flash Player with ASP.NET

Basically, playing video files with JW FLV Player is simple, you just create an object and set needed parameters as in two code examples above. But, if you work with large number of video files or you need to enable to your users to add their movies you need to automate things. Writing static HTML code for every video certainly not sounds professional. Fortunately, with a little ASP.NET code we can make this task much easier :).

Creating a custom ASP.NET Flash Player Control

Basic idea is this: Custom ASP.NET control will have properties related to JW FLV Player parameters. In run time, control will render appropriate content on client side so JW FLV player will show video correctly, and you can manipulate flash videos with ASP.NET web application. Now, we can create admin ASP.NET pages, load videos from database, enable database search etc., without hard coding.

I created ASP.NET JW FLV Flash Video Player Control that do this task. Control is free and you can use it to show Flash video files on your web site. Source code of control is also available in C# and VB.NET. Example web project is included in download to see how it works.

Image 1: ASP.NET Flash player control at run time

You can download this control compiled for ASP.NET 1.1, ASP.NET 2.0 and ASP.NET 3.5. Every download contains example web application with sample video files, so you can immediately see how it works.

Flash Player Control Code Analysis

As you can see from C# and VB.NET code listings, control code consists from three parts:

1. Declaring of properties default values on the beginning. For server control, I used same default values like JW FLV Flash player already uses. I added two additional properties to describe location of JW FLV .swf and .js file, like in code bellow.

[ C# ]

#region Properties defaults
const string DefaultSwfobject_jsLocation = ""; // in the same directory
const string DefaultFlashPlayerLocation = ""; // in the same directory
const bool DefaultAllowFullScreen = true;
const string DefaultFile = "";
const bool DefaultAutoStart = false;
const int DefaultBufferLength = 1;
...

#endregion

[ VB.NET ]

#Region "Properties defaults"
    Const DefaultSwfobject_jsLocation As String = "" ' in the same directory
    Const DefaultFlashPlayerLocation As String = "" ' in the same directory
    Const DefaultAllowFullScreen As Boolean = True
    Const DefaultFile As String = ""
    Const DefaultAutoStart As Boolean = False
    Const DefaultBufferLength As Integer = 1
...

#End Region

2. Value of every property is saved to ViewState if value is different from default value. For example, code for AllowFullScreen property looks like this:

[ C# ]

      [Bindable(true), Category("Settings")]
      bool AllowFullScreen
      {
            get
            {
                  if(ViewState["AllowFullScreen"] == null)
                        return DefaultAllowFullScreen;
                  else
                        return (bool)ViewState["AllowFullScreen"];
            }
            set
            {
                  if(value != DefaultAllowFullScreen)
                        ViewState["AllowFullScreen"] = value;
                  else
                        ViewState["AllowFullScreen"] = null;
            }
      }

[ VB.NET ]

    <Bindable(True), Category("Settings")> _
    Property AllowFullScreen() As Boolean
        Get
            If ViewState("AllowFullScreen") Is Nothing Then
                Return DefaultAllowFullScreen
            Else
                Return ViewState("AllowFullScreen")
            End If
        End Get
        Set(ByVal value As Boolean)
            If value <> DefaultAllowFullScreen Then
                ViewState("AllowFullScreen") = value
            Else
                ViewState("AllowFullScreen") = Nothing
            End If
        End Set
    End Property

3. RenderContents function produces output to, depended of values of every property, correctly initialize Flash player on client side by using a JavaScript, like mentioned before.

Conclusion

With custom ASP.NET Flash Player control that manipulate client side flash player you can save a lot of time. I tested control in Firefox and Internet Explorer and worked fine. Please let me know if you find some bug or you have a suggestion for improvement.

Going professional with ASPNetFlashVideo

Control introduced in this tutorial is useful in some simpler scenarios, but keep in mind that JW FLV Player is free only for noncommercial projects. Fortunately, there is pure ASP.NET control named ASPNetFlashVideo that allows you to effortlessly incorporate beautiful Adobe Flash Video (FLV) media into ASP.NET website. For $49 you can use it on single site or just $99 for use on unlimited number of web sites. Except common interface commands for playing flash video files, ASPNetFlashVideo supports skins, custom user interface, play lists, integration with Visual Studio, search engine optimization and more. 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