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.
<OBJECT >
and , or by using a JavaScript. With static HTML your code could look something like this:
Expand|Select|Wrap|Line Numbers
- <object width=”640″ height=”480″>
- <param name=”movie” value=”player.swf” />
- </object>
<object >
and tags to get browser compatibility. Internet Explorer uses <object
> tag, but Firefox and Netscape can’t see it and recognize just . We set parameters by using <param >
tags, and inside 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.
http://cdn5.tribalfusion.com/media/2...300x250_v8.swf
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:
Expand|Select|Wrap|Line Numbers
- <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>
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# andVB.NET. Example web project is included in download to 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# ]
Expand|Select|Wrap|Line Numbers
- #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
Expand|Select|Wrap|Line Numbers
- #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
[ C# ]
Expand|Select|Wrap|Line Numbers
- [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;
- }
- }
Expand|Select|Wrap|Line Numbers
- <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
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 namedASPNetFlashVideo 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, ASPNetFlashVideosupports 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.