We have been looking at ways to increase the discoverability of internally produced video content and rich user experiences developed on Silverlight currently stored in various document libraries throughout our SharePoint intranet/extranet.
One area of particular interest is finding a way to easily incorporate rich user experiences and streaming video directly into individual blog posts taking advantage of the the built-in commenting form provided in the SharePoint blog template.
One challenge has been finding a "start small" approach that provides the performance benefits of streaming the video content vs. downloading from document libraries while being able to get started without the need to provision large media servers and associated infrastructure in the short-term.
Another challenge has been finding an approach to surface our rich user experiences developed on Silverlight onto our internet-facing website as well as our intranet.
To address these efforts we recently provisioned a Silverlight Streaming account and customized a standard SharePoint blog template using SharePoint Designer to display both our streaming video content and Silverlight 2 applications we currently have stored on the Silverlight Streaming Service.
Blog Home Page:
Features: Modified layout, video and/or Silverlight application plays inline, blog title linked to full post page, caption linked to full screen play.
Blog Full Post Page
Features: Video or Silverlight application plays inline, full screen link.
Benefits:
- Continued ability to publish regular blog posts.
- Ability to embed videos stored on Silverlight Streaming Service directly into blog posts.
- Ability to embed your own custom Silverlight applications directly into blog posts.
- Ability to categorize video posts.
- Ability to comment on video posts.
- Makes use of XSLT and CSS for customizations-no custom javascript to deploy or maintain.
- Ability to add functionality to existing blogs.
- Ability to further customize via centralized custom XSLT files and custom CSS.
Technical requirements:
You have access to edit the blog in SharePoint Designer, a free Silverlight Streaming account set-up with your Windows Live Id, and upload at least one video or Silverlight application to the service for use in your blog post.
What is the Silverlight Streaming Service?
Microsoft® Silverlight™ Streaming by Windows Live™ is a companion service for Silverlight that makes it easier for developers and designers to deliver and scale rich media as part of their Silverlight applications. The service offers web designers and developers a free (*) and convenient solution for hosting and streaming cross-platform, cross-browser media experiences and rich interactive applications that run on Windows™ and Mac. Combined with the ability to create content with Microsoft® Expression and other 3rd party tools, web designers and content publishers wishing to integrate Silverlight applications into their online properties can enjoy complete control of the end user experience.
Example video uploaded using the Upload Video feature:
Can I use my existing .wmv video files?
Yes, there are some exceptions and size restrictions but providing you have a valid Windows Live ID account you can upload your .wmv video files directly to the Silverlight Streaming Service using the Manage Videos, Upload Videos feature. For added features check out Expression Encoder 2 for encoding your videos to specific needs.
Can I use my existing Silverlight 2 .xap files?
Yes, there are some exceptions and size restrictions but providing you have a valid Windows Live ID account you can upload your Silverlight .xap files directly to the Silverlight Streaming Service using the Manage Applications, Upload Applications feature. For added features check out Expression Blend 2 for designing Silverlight applications without code.
What SharePoint Designer customizations do I need to make to add this functionality to my existing SharePoint blogs?
We added three new site columns on our blog's post list to allow users to add their own Silverlight Streaming videos and applications and a caption when creating a new post.
New columns added to Post list:
- SilverlightStreamingServiceApplicationUrl (Text Field: Multiple Lines of Text, Plain Text)
- PostImageCaption (Text Field: Muliple Lines of Text, Rich Text)
- PostImageUrl (Text Field: Single Line of Text, Plain Text)
Modifications to blog pages:
We modified the default.aspx and post.aspx pages to use a customized version of each XSLT that both reformats the layout and incorporates an iframe to display the user-provided SilverlightStreamingApplicationUrl since the default SharePoint editing controls strip out any iframe, embed, or script references. To accomplish this we first saved back-up versions of our default.aspx and post.aspx pages and then opened each in SharePoint Designer in design mode and converted the appropriate dataview Web Parts to XSLT (right click, convert to XSLT option).
Source XSLT and CSS files:
Modifications to Default.aspx
- Upload the provided default.xsl to the blog's root folder.
- Convert the post dataview web-part to XSLT (right-click-convert to XSLT).
- Apply the custom XSLT file provided: from the dataview web-part's Common Data View Properties pane choose DataView Properties, then select the XSLT Source tab and browse to the default.xsl file.
Modifications to Post.aspx
- Upload the provided post.xsl to the blog's root folder.
- Convert the post dataview web-part to XSLT (ignore @Author error message).
- Apply the custom XSLT: from the dataview web-part's Common Data View Properties pane choose DataView Properties, then select the XSLT Source tab and browse to the post.xsl file.
- Create a filter and parameter to filter the post DVWP by id : from the dataview web-part's Common Data View Properties pane choose Filter, if not displayed create a new URL parameter for ID and set the value to [id].
CSS Modifications:
We also created a custom version of the blog templates core.css and referenced the following from the default.aspx and post.aspx pages as a link:
Added custom style sheet reference in default.aspx:
<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
<SharePoint:RssLink runat="server"/>
<link rel="stylesheet" type="text/css" href="customblog.css">
</asp:Content>
Added custom style sheet reference in post.aspx:
<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
<SharePoint:RssLink runat="server"/>
<link rel="stylesheet" type="text/css" href="../../customblog.css">
</asp:Content>
Once my blog is configured, how do I create new blog posts that include this new functionaility?
Simply create your blog post as usual including your post title and post body.
Fill in the SilverlightStreamingApplicationUrl and PostImageCaption fields and save your post as usual (see Obtaining the SilverlightStreamingApplicationUrl below for details on the URL to use).
Obtaining the SilverlightStreamingApplicationUrl:
From Silverlight Administration Home upload your .wmv video or Silverlight 2 application to the Silverlight Streaming Service.
From Silverlight Administration Home select the link to the video or application.
From Method 1: Embed the video into a web page and obtain the embed link for the video or application.
Important: Copy only the URL inside the iframe (example in red) .
What's next?
- Investigate how to add YouTube and MSN videos into the posts.
- Simplify deployment for new blogs via site template (.stp file).
- Create custom site definition with custom columns included.
- Create SharePoint application page to allow users to upload videos/display in blog post in one step.
- Investigate using Silverlight Streaming Services API and existing solutions to provide reporting on #downloads, video streaming data, etc.