September 20, 2011

Video publishing in SharePoint

It's been a while since I've posted. It hasn't been for lack of things to write about, but rather a lack of time. Hopefully I'll be able to address that over the next while.

I've been working on a better way to publish video content in SharePoint for some time now. Sure there is a Silverlight video player web part, but it doesn't address all the platforms that may be consuming that content. Silverlight is a great video streaming client, but it only works on PC and Mac browsers. With tablets and mobile exploding, we need to support them as well.

I started thinking about how best to support video, and naturally that needed to work in HTML5 support. The latest browsers for the most part all support video in HTML5, both on PC/Mac platforms and mobile/tablet. The question was how to tailor the page to the device, and also support older browsers and devices.

I decided to support the following hierarchy of players in the page that I was designing.

  • Silverlight
  • HTML5
  • Flash

The idea was first try Silverlight if it is available (it is still the best choice, with support for smooth streaming), then try HTML5, and as a last resort try Flash. It turns out this can be supported with a single HTML block.

When writing a Silverlight control out, the HTML has a section that is rendered if Silverlight is not installed or available. This is normally used to display an installer message for Silverlight. Instead of doing this, I actually embedded the HTML5 video tags in this section. That way if Silverlight is not installed, the HTML5 video is presented. The same option exists with HTML5 video tags. If they are not supported, there is a section that is rendered which I then use to present a Flash video player. This way in a single block of HTML all three player types can be supported.

You can see an example of this with our Boys and Girls Clubs of Canada Web Site Video Case Study. If you do a View Source on the page and search for silverlightControlHost, you'll see the block of HTML that does this. This is embedded on the page using a content editor web part. Rather than embedding the HTML directly into the content editor web part, I use a Content Link in the web part to point to a text file with the HTML. I find that SharePoint tends to malform the HTML if you paste it directly into the web part.

The next part of the puzzle is to decide what video formats to use. Silverlight can play either MP4 or WMV format video. HTML5 has different video formats that are supported depending on the browser that you are using. Flash can also support a number of different formats. There is a great article at http://diveintohtml5.info/video.html which explains the intricacies of this. It boils down to recommending H.264 MP4 for IE, Safari, and iOS, WebM for Chrome and Opera, and Ogg Theora for Firefox.

How you create the video files and where you host them is a topic for future posts.