Share via


Using the Silverlight Media Player Web Part

Version: 1.0.0

Description

A key component of Silverlight that people often use to improve their sites is the ability to play videos. While SharePoint Server includes a Media Web Part, it is only available on sites that have the Publishing Infrastructure enabled. This lab will introduce a web part that utilizes the same infrastructure as the Media Web Part, but requires only SharePoint Server - not the Publishing infrastructure. Along the way, we will look at scripting a Silverlight control using JavaScript.

Overview

A key component of Silverlight that people often use to improve their sites is the ability to play videos. While SharePoint Server includes a Media Web Part, it is only available on sites that have the Publishing Infrastructure enabled. This lab will introduce a web part that utilizes the same infrastructure as the Media Web Part, but requires only SharePoint Server – not the Publishing infrastructure. Along the way, we will look at scripting a Silverlight control using JavaScript.

Objectives

This lab will demonstrate how to implement the Silverlight Media Player that ships with SharePoint 2010 as a self-contained web part that can be added to any web page. Specifically, you will:

  • Add the JavaScript to the page to reference the Silverlight media player
  • Call into the MediaPlayer.js script file to have the player play a file
  • Review the code to add an onclick event handler to anchor tags for video files that will launch them inside the media player embedded in the page
  • Review the code in the mediaplayer.js file from Microsoft to see an example of using JavaScript to manipulate and interact with a Silverlight control.

System Requirements

You must have the following items to complete this lab:

  • 2010 Information Worker Demonstration and Evaluation Virtual Machine
  • Microsoft Visual Studio 2010
  • Silverlight 4
  • Silverlight web part extension for Visual Studio
  • Silverlight 4 Toolkit

Setup

You must perform the following steps to prepare your computer for this lab...

  1. Download the 2010 Information Worker Demonstration and Evaluation Virtual Machine from https://tinyurl.com/2avoc4b and create the Hyper-V image.
  2. Install the Visual Studio 2010 Silverlight Web Part. The Silverlight Web Part is an add-on to Visual Studio 2010 and can be downloaded from https://code.msdn.microsoft.com/vsixforsp
  3. Ensure that the latest version of Silverlight 4 is installed by visiting https://www.silverlight.net
  4. Install the Silverlight 4 Toolkit from here: https://silverlight.codeplex.com/
  5. Run the SetupLab.cmd file from the <Install>\Labs\UsingSLMediaPlayerWebPart\Source\Begin folder to establish the SharePoint environment necessary for this lab

Exercises

This Hands-On Lab comprises the following exercises:

  1. Implementing the Media Player

Estimated time to complete this lab: 15 minutes.

Starting Materials

This Hands-On Lab includes the following starting materials.

  • Visual Studio solutions. The lab provides the following Visual Studio solutions that you can use as starting point for the exercises.
    • <Install>\Labs\UsingSLMediaPlayerWebPart\Source\Begin\Media Player\MediaPlayer.sln: This solution contains a partially completed web part that interfaces with the Silverlight media player to play video files.
    Note:
    Inside each exercise folder, you will find an end folder containing a solution with the completed lab exercise.