Hands-On LabUsing the Silverlight Media Player Web Part

Lab version: 1.0.0

Last updated: 5/20/2023

CONTENTS

OVERVIEW................................................................................................................................................. 3

EXERCISE 1: USING THE SILVERLIGHT MEDIA PLAYER.....................................................................4Task 1 — Preparing..............................................................................................................................4

Task 2 — Interfacing with the Media Player........................................................................................5

Exercise 1 Verification.........................................................................................................................9

SUMMARY................................................................................................................................................ 10

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...

11. Download the 2010 Information Worker Demonstration and Evaluation Virtual Machine from http://tinyurl.com/2avoc4b and create the Hyper-V image.

12. 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 http://code.msdn.microsoft.com/vsixforsp

13. Ensure that the latest version of Silverlight 4 is installed by visiting http://www.silverlight.net

14. Install the Silverlight 4 Toolkit from here: http://silverlight.codeplex.com/

15. 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.

Exercise 1: Using the Silverlight Media Player

This exercise will finish off a partially implemented web part from the starter solution by adding the JavaScript necessary to launch the Silverlight player and play videos.

Task 1 — Preparing

In this task, you will open the starter solution in VS 2010 and explore the environment to understand what has been done to get things set up for the rest of the exercise.

11. Using Visual Studio 2010, open the starter solution named ImplementMediaPlayer from the <Install>\Labs\UsingSLMediaPlayerWebPart\source\begin folder. Solution Explorer should look like this:

Figure 1Solution Explorer

12. Double-click on the Properties node in Solution Explorer underneath the ImplementMediaPlayer project and then open the SharePoint tab. Notice that the checkbox next to Enable Silverlight debugging is selected. This is necessary if we need to step through our code later on. Close the properties pane.

13. Notice that the solution is a Farm solution. Because the Silverlight media player makes use of a JavaScript file in the _layouts folder, it is not possible to implement this as a Sandbox solution.

14. Open the MediaPlayer.cs file from the MediaPlayer SPI in Solution Explorer. Review the code that is part of the starter solution. This starter code handles all of the functionality of this webpart except actually interfacing with Silverlight. This includes:

a. A string property (VideoLibrary) that allows the user to specify the name of the document library that contains their video files

b. The CreateChildControls override that is responsible for instantiating the objects (primarily links to video files) that make up this web part’s user interface

c. The GetVideoFiles() private method that queries the specified document library to return just items for WMV and AVI files

15. Notice also the mostly empty GetMediaPlayerScriptString method at the bottom of the file. This is the method to which you will add the JavaScript code to interface with the Silverlight media player in Task 2.

Task 2 — Interfacing with the Media Player

In this task you will add the JavaScript code to the partially completed starter solution to connect to the Silverlight media player and have it play videos. You will also make calls into the media player to add an onclick event handler to anchor tags for video files that will launch them inside the media player embedded in the page

1. In the MediaPlayer.cs file, scroll all the way down to the bottom of the file to locate the GetMediaPlayerScriptString method.

2. Position your cursor on line 89 and add the following JavaScript code:

JavaScript

<script type='text/javascript' src='/_layouts/mediaplayer.js'></script><script type='text/javascript'> function initMediaPlayer() {{ mediaPlayer.createOverlayPlayer(); var container = document.getElementById('{0}'); mediaPlayer.attachToMediaLinks(container, [{1}]); }}</script>

There are a few important things to note about this code:

a. It is inside a string.Format command from the starter solution. The string is eventually going to be written into the HTML stream sent down to the browser. This is necessary to keep the web part entirely self-contained. Because of the way the string.Format command works, the opening and closing curly braces for the JavaScript function need to be duplicated: {{ and }}

b. The first line references the Silverlight media player JavaScript file from the _layouts folder. This file is only included with SharePoint Server.

c. The function initMediaPlayer is called from a control added to the page inside CreateChildControls only if there are video files to be played. This function does the following:

d. Calls into the mediaplayer.js file to create the Silverlight player as an overlay – meaning it sits on top of the hosting page

e. Calls into the mediaplayer.js file to modify the links to the video files found inside a certain element on the page. In this lab, that element is a div named VideosContainer that is added to the page inside CreateChildControls if there are any videos to be shown.

3. This completes the coding, so hit F5 to test out the solution. After Visual Studio launches the browser, click the Edit Page icon next to the Ribbon tabs:

Figure 2Edit Page icon

4. With the page in Edit mode, click the Insert tab on the Ribbon

Figure 3Insert tab

5. Now on the Insert tab, in the Web Parts section, click the Web part button:

Figure 4Web Part button

6. In the Categories section, select Custom, then select MediaPlayer from the Web Parts list. Click the Add button to add the new web part to the page:

Figure 5Adding a Web Part to the Page

7. After the page reloads, the new web part will show the three videos that were added to the Site Assets library as part setting up the environment for this lab:

Figure 6Web Part added

8. Click the Page tab and then the Save & Close button to save your changes and take the page out of editing mode:

Figure 7Save & Close button

9. Click one of the video names to launch the player and start the video playing:

Figure 8Video playing

10. Open the mediaplayer.js file from C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS in Visual Studio and examine the JavaScript code used to script the Silverlight player. Pay particular attention to the following:

a. createOverlayPlayer function on line 346. This is the method called in the lab to create the player

b. the Silverlight.createObjectEx call on line 326. This is a good example of scripting the Silverlight player using JavaScript.

Exercise 1 Verification

In order to verify that you have correctly performed all steps of exercise 1, proceed as follows:

Verification 1

In this verification, you can compare the anticipated output shown in step 12 with the actual output shown on your screen. If your screen shows a similar view, you have completed the exercise successfully.

Summary

In this lab you have seen how to 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. The functionality demonstrated in this lab could be used to build a more fully functional Silverlight media player web part that can be used on any SharePoint Server website – even without the Publishing infrastructure activated.