Silverlight

4/23/2010

Video: How to Build a Silverlight Media Player That You Can Use in Any Website

This post is the first video post on the site, and covers how to build a Silverlight Media Player that you can use in any web page whether it be static HTML, ASP, ASP.NET, SharePoint, PHP, whatever. More specifically, it shows how I built the media player you will use if you choose to watch this video tutorial!

My particular implementation uses SharePoint (MOSS 2007), where I am hosting the script file, master page, CSS stylesheet, and the player .xap file file as well as all of my WMV media files. After all, is this not what SharePoint was designed for? I do however use a third-party Silverlight media player control, provided by ComponentOne, but in a subsequent post I will describe how this can be easily modified to use the Smooth Streaming Media Player from the Silverlight Media Framework. This way, this can be an entirely free solution to create for your own websites.

We are really just creating a wrapper for an existing media player control. We are NOT writing any kind of playback functionality, full-screen capabilities, volume control, or even providing any kind of UI, short of our one single third-party control that occupies our entire default grid. After watching the video or downloading the code, it should be pretty easy to modify this shell to fit your particular player needs.

So, how does it work? Basically, we are going to use jQuery and some very simple markup to easily add media to blog posts, articles, whatever, wherever, whenever. Our script takes 2 attributes of a div tag we add to our page as a placeholder, and dynamically generates the correct object and param tags for displaying a single Silverlight player file, initialized with whatever Title and WMV file URL we pass it. It then uses jQuery to insert some templated markup right into the DOM as the content of the placeholder div we added.

One of the limitations I encountered with my personal solution, was that SharePoint strips out object and param tags from content fields that use the HTML Editor... so no matter what I did, I could not add my player to a page as markup in a content field. From a Content Editor Web Part, I could add the correct tags, but not as content in an HTML field.

With this solution, I can easily add a div tag with valid attributes that wont be stripped out, and when the page loads it takes that info in $(document).ready() and inserts instances of the player pointing to the correct Video URL wherever a div with a certain class is found! Minimal markup, powerful reuse!

In my implementation, the script is embedded in my master page and works on all pages in the SharePoint Site that use that master page. Because its only javascript, jQuery, Silverlight and CSS, it will work anywhere where we have the ability to execute the javascript calls!

Now, I vaguely remember someone mentioning a video in here somewhere?

Posted at 8:59 PM by Philly XAML | Category: Best Practices; Demo Applications; Media; Tips & Tricks; Silverlight | Permalink | Email this Post | Comments (0)

4/15/2010

Silverlight 4 is Here!

The Silverlight 4 RTW is here and available at http://www.silverlight.net. Make sure to grab the Silverlight 4 Tools for Visual Studio 2010, The Silverlight 4 Toolkit and Expression Blend 4 RC while youre there to experience the entire development experience. The RTM version of Blend will be released in the upcoming months, but for now the RC works quite well and is pretty stable. More to come as it is available. Just got all the bits installed and am ready to play.

Posted at 11:07 PM by Philly XAML | Category: Best Practices; Expression Blend; Tips & Tricks; Silverlight | Permalink | Email this Post | Comments (0)

3/4/2010

Silverlight Conceals HTML Elements on a Page

So I've read about it (and was therefore lucky enough to quickly identify the issue) and knew how to fix it when it happened, but hadn't actually seen it applicable to an application yet.

So here it is. I have a Silverlight application that makes up a component in a web page. Probably saying "Wow"... So far no surprise. The main web application however, which is SharePoint (SL is hosted in a web part), uses jQuery and jQuery UI to display custom help in a modal dialog. When that modal dialog is displayed, the Silverlight plugin instance conceals some of the HTML output on the screen, ie the modal dialog, regardless of Z-Order, and furthermore is not dimmed/disabled as part of the modal dialog being shown.

The image below demonstrates the issue. In this image, and the one that follows, the area designated by the green boundary is the Silverlight application. The area designated in purple is the jQuery modal dialog that is being concealed.

Modal dialog is concealed by Silverlight

Its also worth noting that the Silverlight application itself remains fully interactive while the "modal" dialog is being shown. This is because the Silverlight application is always set to take highest Z-Order by default, rendering after the HTML has already been rendered to the page, in a sense floating the plugin instance above the page.

I have read and verified that this issue will apply to all HTML-based controls on a page. The majority of issues reported seem to be around dropdowns disappearing behind Silverlight controls, which have their own designated real estate on the page, normally hiding the issue. Not ideally what we want in these situations.

Luckily, the fix is very simple. When we initialize our Silverlight control, we need to set the Windowless attribute equal to true. This will cause the Silverlight application to be rendered in the correct Z-Order with a slight, but virtually unnoticeable performance hit. This will allow our dialog to be rendered after, and therefore on top of our Silverlight control. Additionally, since the control is already rendered to the page, and not floating above the page, so to speak, the browser can handle disabling access to the application by disabling the page, greying it out, etc.

Since the recommended method for adding Silverlight to a page is to use an <object> tag with nested <param> tags, that is what we will cover here. To add our Silverlight instance, we probably have something like this markup generated by Visual Studio by default (with the exception of the initParams parameter shown for example):

        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">

          <param name="source" value="ClientBin/someXapFile.xap"/>

          <param name="onError" value="onSilverlightError" />

          <param name="background" value="white" />

          <param name="minRuntimeVersion" value="3.0.40624.0" />

          <param name="autoUpgrade" value="true" />

          <param name="initparams" value="AccessMode=Local,User=John Angelini" />

          <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration:none">

               <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>

          </a>

        </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>

All we have to do is pass in another param like so and we should be golden:

<param name="windowless" value="true"/>

The result, Voila! We have a Silverlight application that is baked into the page, displays behind the modal dialog, and most importantly, is no longer interactive, allowing our modal dialog to actually be a modal dialog.

Correctly displaying the modal dialog in front of the Silverlight application

Posted at 2:22 PM by Philly XAML | Category: Best Practices; Tips & Tricks; Silverlight | Permalink | Email this Post | Comments (0)