Re-Publishing Silverlight Player for including videos in Sharepoint Blog posts

silverlightplayer

NEW! Silverlight 1.0 Player embedded into Sharepoint blog template via Sharepoint Designer, customized DVWP, and added javascript in canvas_loaded…assuming you already know how to use Silverlight 1.0. 

First, since Sharepoint blogs posts don’t support embed tags, javascript, or even iframes you need a way to render the silverlight player from within the blog post-answer: added two text-only fields to hold the paths to both the video file and placeholderimage that the Silverlight player will use when playing videos.  Add the Silverlight 1.0 files to your server (Sharepoint Designer makes this easy if you do not have server access but are at least a site collection owner.  Also, the MIME type for XAML files must be enabled by your sys admin for Silverlight to work.

Second, since this is a solution that needed to be deployed without the use of server-side code I developed a separate HTML page to render the player similiar to any default.htm page used for Silverlight 1.0 except referencing a modified script for loading the player (more on that in a minute)

source in right column >>>>

Third, modify the silverlightplayer.js to include an event handler for when the canvas loads:

source in right column >>>>

The function to obtain the parameters is courtesy of the Microsoft SharepointDesigner team blog also included as part of the Fab 40 templates to pre-fill newitem forms via querystring params-dawned on me while trying to figure this all out that this script could be used in the canvas_loaded event to set the Silverlight mediaelement’s source attribute among other things.

source in right column >>>>

Fourth, from post.aspx add another DVWP for the posts list and convert to XSLT so we can insert an iframe and set it’s source url to the video url field our users so kindly provide when adding new posts etc.  The row item template is a convenient place to add our iframe and set the source URL and placeholderimage url if you want as well.  Also a nice place to pass height, width, whatever the need.

<xsl:if test="string(@Video) != ”"><TR><TD style="padding-top:10px">
                    <div><iframe src="[yoursitepath]/silverlightplayer.htm?Source={@Video}&amp;Placeholder={@videoimage}" frameborder="0" height="410" width="424"></iframe>
                    </div>
There you go, all from client-side code a way to add Silverlight player allowing your users to easily add video to thier posts-of course you need to drop the Silverlight javascript and xaml files on your server.  Also, the XAML for your player can be whatever you like just make sure to remove the source attribute from the mediaelement.  Same with the placeholderimage.

Cheers!

Rod.

source for .htm file

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>RodsPlayer</title>

    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript" src="silverlightplayercreate.js"></script>
    <script type="text/javascript" src="silverlightplayer.js"></script>
    <style type="text/css">
        .silverlightHost {
            height: 400px;
            width: 414px;
            position:absolute;left:0; top:0;
        }
    </style>
</head>

<body>
    <div id="SilverlightControlHost" class="silverlightHost">
        <script type="text/javascript">
            createSilverlight();

        </script>
    </div>
</body>
</html>

function canvas_loaded(sender, args)
{
    var plugin = sender.getHost();
    plugin.content.onfullScreenChange = onFullScreenChanged;
    var qs = location.search.substring(1, location.search.length);

      var args = qs.split("&");

      var vals = new Object();

      for (var i=0; i < args.length; i++) {

        var nameVal = args[i].split("=");

        var temp = unescape(nameVal[1]).split(‘+’);

        nameVal[1] = temp.join(‘ ‘);

        vals[nameVal[0]] = nameVal[1];

    }
    var mediaPlayer = sender.findName("media");
    mediaPlayer.Source = vals["Source"]; 
    var placeholder = sender.findName("PlaceholderImage");
    placeholder.Source = vals["Placeholder"]; 
}

 

Advertisements

2 thoughts on “Re-Publishing Silverlight Player for including videos in Sharepoint Blog posts

  1.  Very cool Rod !! It\’s too bad live spaces doesn\’t support this… then you wouldn\’t see the nasty flash viewer download for your vids on the right side of your blog.
     

  2. My SP training video is actually running from a Silverlight player I uploaded to the Silverlight Streaming service from Microsoft.  The others are from YouTube etc.  I can embed into blog posts as well since you mention it I will embed a vid using Silverlight in an upcoming post. 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s