DotNetNuke Silvelight Video Module

DotNetNuke® Silverlight Video Module

This module is a modification of the Video Player code provided in the Silverlight 1.0 SDK. It covers Silverlight integration with DotNetNuke including:

Injecting the Silverlight JavaScript files
Passing a parameter from DotNetNuke to the Silverlight application

The Silverlight Module

Install the Silverlight DotNetNuke Module using the directions at this link and place an instance of it on a page in your DotNetNuke website. From the configuration menu, select Configure

Use the Browse button to select a video file and click the Upload button.

Click the [Back] button and the video will then display.

The Module Flow

The first "page" of the module is SilverLightVideo.ascx. The code behind file (SilverLightVideo.ascx.cs) contains code that injects the required JavaScript files:

                Page.ClientScript.RegisterClientScriptInclude(this.GetType(), "Silverlight", this.TemplateSourceDirectory +

                  @"/js/Silverlight.js");

                Page.ClientScript.RegisterClientScriptInclude(this.GetType(), "main", this.TemplateSourceDirectory + @"/js/main.js");

                Page.ClientScript.RegisterClientScriptBlock(this.GetType(), String.Format("createSilverlight{0}",

                  Convert.ToString(ModuleId)), CreateSilverlight());

The SilverLightVideo.ascx contains this code:

    <script type="text/javascript">

            <asp:Literal ID="Literal1" runat="server"></asp:Literal>

    </script>

The Literal control simply displays the contents of this code:

            Literal1.Text = String.Format("createSilverlight{0}() ", Convert.ToString(ModuleId));

This creates a function call to the createSilverlight method with the current ModuleId appended to it:

<script type="text/javascript">
createSilverlight382()
</script>

That calls the dynamically generated JavaScript function in the SilverLightVideo.ascx.cs file that creates the Silverlight object:

            sb.Append("<script type='text/javascript'> ");

            sb.Append(String.Format("function createSilverlight{0}() ", Convert.ToString(ModuleId)));

            sb.Append("{ ");

            sb.Append("Silverlight.createObject( ");

            sb.Append(String.Format("'{0}', ", this.TemplateSourceDirectory + @"/xaml/Scene.xaml"));

            sb.Append(String.Format("document.getElementById('dnn_ctr{0}_SilverLightVideo_SilverlightControlHost'), ",

             Convert.ToString(ModuleId)));

            sb.Append(String.Format("'{0}', ", strVideoSource));

            sb.Append(" { ");

            sb.Append("width:'100%', ");

            sb.Append("height:'100%', ");

            sb.Append("inplaceInstallPrompt:false, ");

            sb.Append("background:'black', ");

            sb.Append("isWindowless:'false', ");

            sb.Append("framerate:'24', ");

            sb.Append("version: '1.0' ");

            sb.Append("}, ");

            sb.Append("{ ");

            sb.Append("onError:null,");

            sb.Append("onLoad:null ");

            sb.Append("}, ");

            sb.Append("null) ");

            sb.Append("} ");

            sb.Append("</script> ");

This is the format (from Silverlight 1.0 SDK):

function createMySilverlightPlugin()
{
    Silverlight.createObject(
        "myxaml.xaml",                  // Source property value.
        parentElement,                  // DOM reference to hosting DIV tag.
        "mySilverlightPlugin",         // Unique plugin ID value.
        {                               // Per-instance properties.
            width:'300',                // Width of rectangular region of
                                        // plugin area in pixels.
            height:'300',               // Height of rectangular region of
                                        // plugin area in pixels.
            inplaceInstallPrompt:false, // Determines whether to display
                                        // in-place install prompt if
                                        // invalid version detected.
            background:'#D6D6D6',       // Background color of plugin.
            isWindowless:'false',       // Determines whether to display plugin
                                        // in Windowless mode.
            framerate:'24',             // MaxFrameRate property value.
            version:'1.0'               // Silverlight version to use.
        },
        {
            onError:null,               // OnError property value --
                                        // event handler function name.
            onLoad:null                 // OnLoad property value --
                                        // event handler function name.
        },
        null);                          // Context value -- event handler function name.
}

createSilverlight contains a reference to the .xaml file that contains the layout and design of the media player. This is indicated with this line:

            sb.Append(String.Format("'{0}', ", this.TemplateSourceDirectory + @"/xaml/Scene.xaml"));

The object must reference the <DIV> section that it resides in. The <DIV> is created by the panel control (in the SilverLightVideo.ascx file):

<asp:Panel ID="SilverlightControlHost" runat="server" Height="400px" Width="600px">

   ....

</asp:Panel>

At run time the panel creates a <DIV> such as:

<div id="dnn_ctr382_SilverLightVideo_SilverlightControlHost" style="height:400px;width:600px;">

The name of this dynamically created panel is retrieved and passed as a parameter with this code:

            sb.Append(String.Format("document.getElementById('dnn_ctr{0}_SilverLightVideo_SilverlightControlHost'), ",

createSilverlight also passes the name of the video file to load to the main.js file by setting the plugin ID with this line:

            sb.Append(String.Format("'{0}', ", strVideoSource));

The main.js file uses the plugin.id to set the source of the video. Note: if you remove "sender.findName("media").stop();" the video will start playing automatically.

function canvas_loaded(sender, args)

    var plugin = sender.getHost();

    plugin.content.onfullScreenChange = onFullScreenChanged;

    sender.findName("media").source = plugin.id;

    sender.findName("media").stop();

Summary:

With DotNetNuke you can place multiple instances of the same module on a page. Without creating the code dynamically you will encounter undesired behavior.
Each instance of the Silverlight object on a page must be placed in a <DIV> that has a unique name. Using a Panel control allows you to dynamically create a <DIV> whose ID can be obtained to pass as a parameter to the Silverlight object.
Frequently you will need to pass a parameter (such as the name of the video to play) to your JavaScript. Using the Unique plugin ID value is one technique.

Complete Source Code

SilverLightVideo
- js
  - main.js
  - silverlight.js
- xaml
  - scene.xaml
- SilverLightEdit.ascx
  - SilverLightEdit.ascx.cs
- SilverLightVideo.ascx
  - SilverLightVideo.ascx.cs

Download the example module here: SilverLightVideo_03.00.00_Install.zip

See the live sample at this link.

About the Author:

Michael Washington is a Website developer and an ASP.NET, C#, and Visual Basic programmer. He has extensive knowledge in process improvement, billing systems, and credit card transaction processing. He is a DotNetNuke Core member and has been involved with DotNetNuke for nearly 3 years. He is the author of numerous DotNetNuke modules and tutorials. He is one of the founding members of the Southern California DotNetNuke Users group (http://socaldug.org). He has a son, Zachary and resides in Los Angeles with his wife Valerie.

[Back to: The ADefWebserver DotNetNuke HELP WebSite]