Flash Video (FLV files) became a popular file format for delivering video on the web. These files cannot be embedded on a web page on their own. A FLV player, created in Flash, is required to play those video files.

One solution could be to create your own FLV player in Flash. Or you can search the web for an existing FLV player, there is enough choice out there. For this article, we are going to use the player of http://flv-player.net/, an open source Flash Video player. This should not be considered as 'the way to go'. We just needed one to demonstrate the idea of playing FLV files in ADAM.  

About FLV player

Before we create our FLV preview player, we first need to understand how the player is working. Luckily, the flv-player.net website has a wizard that helps us to generate the look-and-feel of the player: FLV Player generator.

If you look at the generated HTML code, you'll see two important parameters for the OBJECT tag: the actual movie and the FlashVars. The actual movie is the SWF file that is capable of playing the actual FLV file  The FlashVars instruct the player how it should behave.

The generated HTML code can be used as-is, but we can improve the code by loading the Flash movie through JavaScript, which resolves issues related to different browsers and makes it easy to build the OBJECT tag. To do so, we can rely on a framework called SWFObject. A full explanation on why you should use such a framework can be found in this web page: Flash Embedding Cage Match.

Converting the HTML code to JavaScript using SWFObject is pretty simple and constructing the FlashVars is much easier this way, as you can see in the following code snippet (for more information about the SWFObject features, see SWFObject documentation).

1
2
3
4
5
6
7
8

var flashvars = {"flv": "myvideo.flv"};
swfobject.embedSWF(swfUrl, 
                   idOfTargetElement, 
                   width, 
                   height, 
                   requiredFlashVersion, 
                   expressionInstallationSwfUrl, 
                   flashvars);

For this article, you need to download the next two files:

• player_flv_maxi.swf
  This is the SWF file which is capable of playing the FLV file.
  
• swfobject_2_2.zip
  A JavaScript library to dynamically load SWF files.

The Visual Studio project

Playing an FLV file requires more than some C# code and an FLV file. You'll also need the SWF file (the actual player) and when using the SWFObject approach, the JavaScript file containing the SWFObject code. Since the ADAM preview players are added to a .NET Class Library, there is no actual directory available where you can place the extra SWF and JavaScript files. This is a common problem when developing web solutions and therefore the ASP.NET framework provides us with a solution: embedded resources.

In your Visual Studio class library project, add a new folder 'Files' and drag-and-drop the files player_flv_maxi.swf and swfobject.js into this folder in Visual Studio



Now, select both files in the Visual Studio Solution Explorer, right-click them and choose 'Properties'.



In the properties window, change the Build Action from 'Content' to 'Embedded Resource'. This ensures that those files are embedded in the compiled assembly.

After embedding the files in the assembly, we need to tell the ASP.NET framework that these files must be accessible from an URL request. To do so, add a new C# file to your solution and name it AssemblySetup.cs. Clear the complete contents of the file and add the following code. This code actually instructs ASP.NET to make the embedded resources available from an URL request (how to get an URL to those embedded resources is shown later on).

1
2
3
4

using System.Web.UI;

[assembly: System.Web.UI.WebResource("FLVPlayer.Files.player_flv_maxi.swf", "application/x-shockwave-flash")]
[assembly: System.Web.UI.WebResource("FLVPlayer.Files.swfobject.js", "text/js")]

Creating the preview player is pretty much the same as described in the blog article Create a preview player for Flash (SWF) files.

However, there are some differences between both articles:

• The preview player requires the inclusion of an additional JavaScript
• The SWF file is not the FileVersion, but the player embedded in the assembly
• The file that must be previewed is a parameter for the Flash movie

To include an embedded JavaScript file in the generated HTML of a Page, use the GetWebResourceUrl method of the System.Web.UI.ClientScriptManager class, as demonstrated in the following code snippet:

1
2
3
4
5
6
7
8
9
10
11

// Include the JavaScript.
ClientScriptManager manager = this.Page.ClientScript;

// Test if the script file is not already included in the HTML output.
if (manager.IsClientScriptIncludeRegistered(typeof(FLVPreviewPlayer), "FLVPlayer.Files.swfobject.js") == false)
{
  // Get the url to the embedded resource.
  String scriptUrl = manager.GetWebResourceUrl(typeof(FLVPreviewPlayer), "FLVPlayer.Files.swfobject.js");
  // Add the script to the HTML output.
  manager.RegisterClientScriptInclude(typeof(FLVPreviewPlayer), "FLVPlayer.Files.swfobject.js", scriptUrl);
}

All the rest is very similar to the previous article, except for the fact that we now need to generate some JavaScript.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

protected override void CreateChildControls()
{
    FileVersion version = this.DataItem as FileVersion;
    if (version != null && string.IsNullOrEmpty(version.Path) == false)
    {
        // Include the JavaScript.
        ClientScriptManager manager = this.Page.ClientScript;

        // Test if the script file is not already included in the HTML output.
        if (manager.IsClientScriptIncludeRegistered(typeof(FLVPreviewPlayer), "FLVPlayer.Files.swfobject.js") == false)
        {
            // Get the url to the embedded resource.
            String scriptUrl = manager.GetWebResourceUrl(typeof(FLVPreviewPlayer), "FLVPlayer.Files.swfobject.js");
            // Add the script to the HTML output.
            manager.RegisterClientScriptInclude(typeof(FLVPreviewPlayer), "FLVPlayer.Files.swfobject.js", scriptUrl);
        }

        // Get the url to the FLV player (the SWF file).
        string swfUrl = manager.GetWebResourceUrl(typeof(FLVPreviewPlayer), "FLVPlayer.Files.player_flv_maxi.swf");

        // Get the url to the FLV file being previewed.
        ServerFileUri uri = new ServerFileUri(version.Path, "application/x-unknown-content-type");
        string flvUrl = uri.ToString();

        // Create a placeholder for the FLV player on the client.
        HtmlGenericControl placeholder = new HtmlGenericControl("div");
        placeholder.ID = "container";
        placeholder.InnerText = "No Flash player installed";
        this.Controls.Add(placeholder);

        // Prepare variables for the SWFObject framework.
        int width = 470;
        int height = 320;
        String requiredFlashVersion = "9.0.0";

        // Create the script to load the FLV player...
        StringBuilder script = new StringBuilder();
        // Create the flash variables object.
        script.AppendFormat("var flashvars = {{'flv': '{0}', 'autoplay': '1', 'showtime': '1', 'showfullscreen': '1', 'buffermessage': ''}};", HttpUtility.UrlEncode(flvUrl));
        // And embed the SWF file in the HTML document.
        script.AppendFormat("swfobject.embedSWF('{0}', '{1}', '{2}', '{3}', '{4}', null, flashvars, {{'allowfullscreen': 'true'}});", new Object[] { swfUrl, placeholder.ClientID, width, height, requiredFlashVersion });

        // Register the script that loads the FLV player for the FLV file being previewed.
        manager.RegisterStartupScript(typeof(FLVPreviewPlayer), "load", script.ToString(), true);
    }
    else
    {
        this.Controls.Add(new LiteralControl("No FileVersion available or the file could not be found."));
    }
}

The steps to register the preview player in ADAM are identical to the ones described in the Create a preview player for Flash (SWF) files article.