• Article

Section 2: SharePoint 2010 Video Library.

Overview

In this lab, you will create a video library and media player for SharePoint 2010. The videos will be stored as blobs in Azure and played through a custom Silverlight application.

Objectives

In this lab, you will:

  • Learn to manage and utilize blob storage in Azure
  • Learn to access blobs storage through Silverlight

System Requirements

You must have the following items to complete this lab:

Setup

Download and install the Visual Studio 2010 SharePont Power Tools extension. This is an extension for Visual Studio 2010 that supports creating Sandboxed Visual Web Parts.

Download and install the Silverlight SharePoint Web parts.This is an extension for Visual Studio 2010 that supports creating Silverlight wbe parts.

The Windows Azure SDK (included in Windows Azure Tools for Visual Studio) installs a simulation environment on your development machine for testing Azure applications locally before deploying them to the cloud. The simulation environment consists of the development fabric to host web and worker roles, and the development storage which simulates cloud blob, table and queue storage locally.

Development storage uses SQL Server as its underlying storage mechanism, and by default the SDK will attempt to configure it to use SQL Server Express. If you do not have SQL Server Express installed before installing the SDK, or you wish to simply use an existing SQL Server instance to host the development storage database, you must run the dsinit command to select the SQL Server instance where the database will be created.

Please see instructions below for how to run dsinit.

Using dsinit to Configure Development Storage

  1. Open a command prompt.
  2. Edit the following command line as appropriate for your environment, where [AzureSDKInstallDrive] is the drive where you installed the Azure SDK (or Windows Azure Tools for Visual Studio), and [YourSqlInstance] is the SqlServer where you want to create the development storage database.[AzureSDKInstallDrive]\ Program Files\Windows Azure SDK\v1.3\bin\devstore\dsinit.exe /sqlinstance:[YourSqlInstance]Example Command Line:“C:\Program Files\Windows Azure SDK\v1.3\bin\devstore\dsinit.exe” /sqlinstance:.
  3. Note that the sample command line above uses the value “.” for the sqlinstance argument, which specifies that the local default SQL instance will be used for development storage.

Exercises

This Hands-On Lab is comprised of the following exercises:

  1. Populating Blob Storage
  2. Creating a Media Player

Estimated Time to complete this lab: 60 minutes

Exercise 1: Populating Blob Storage

In this exercise, you will create a web role project to populate blob storage with videos.

Task 1 – Creating the Web Role Project

In this task, you will create a new web role project.

  1. Start Visual Studio 2010.
  2. Select File>New Project from the main menu.
  3. In the New Project dialog, select Visual C#>Cloud>Windows Azure Project.
  4. Name the new project AzureVideoManager and click OK.
  5. In the New Windows Azure Project dialog, select ASP.NET Web Role.
  6. Use the arrows to add the new web role to the solution.
  7. Hover over the web role project and click the pencil icon.

  8. Rename the web role VideoBlobManager and click OK.

Task 2 – Creating the User Interface

In this task, you will create the user interface for the web role.

  1. In the Solution Explorer, open Default.aspx for editing in Source view.

  2. Replace the markup in the page with the following code.

    ASPX

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="VideoBlobManager._Default" %> <html xmlns="https://www.w3.org/1999/xhtml"> <head runat="server"> <title>Video Blob Manager</title> </head> <body> <form id="form1" runat="server"> <table> <tr> <td><strong>My Videos</strong></td> <td>&nbsp;</td> </tr> <tr> <td><strong>Submit</strong></td> <td>Click Browse, provide a name and select a category</td> </tr> <tr> <td> <asp:Label ID="filePathLabel" Text="Video Path:" AssociatedControlID="videoUploadControl" runat="server" Style="font-family: Calibri; color: #000066;" /> </td> <td> <asp:FileUpload ID="videoUploadControl" runat="server" Style="font-family: Calibri" /> </td> </tr> <tr> <td> <asp:Label ID="videoNameLabel" Text="Video Name:" AssociatedControlID="videoNameBox" runat="server" Style="font-family: Calibri; color: #000066;" /> </td> <td> <asp:TextBox ID="videoNameBox" runat="server" Width="220px" /> </td> </tr> <tr> <td> <asp:Label ID="categoryLabel" Text="Category:" AssociatedControlID="dropdwnCategory" runat="server" Style="font-family: Calibri; color: #000066;" /> </td> <td> <asp:DropDownList ID="dropdwnCategory" runat="server" Width="220px"> <asp:ListItem>Technical</asp:ListItem> <asp:ListItem>Marketing</asp:ListItem> <asp:ListItem>Business</asp:ListItem> <asp:ListItem>Sales</asp:ListItem> <asp:ListItem>Travel</asp:ListItem> <asp:ListItem>Personal</asp:ListItem> </asp:DropDownList> </td> </tr> <tr> <td> &nbsp; </td> <td> &nbsp; <asp:LinkButton ID="lnkbtnSubmitVideo" runat="server" Font-Names="Calibri" OnClick="SubmitVideo_Click"> Submit Video</asp:LinkButton> &nbsp;| <asp:LinkButton ID="lnkbtnClearFields" runat="server" Font-Names="Calibri" OnClick="ClearFields_Click"> Clear Fields</asp:LinkButton> </td> </tr> <tr> <td> <strong>View & Delete</strong> </td> <td> Click Delete to delete a specific video </td> </tr> <tr> <td> <asp:Label ID="lblDataGrd" runat="server" Text="Video List:" Style="color: #000066;font-family: Calibri"></asp:Label> </td> <td> <asp:GridView ID="videoList" AutoGenerateColumns="false" DataKeyNames="FileUri" runat="server" OnRowCommand="RowCommandHandler" Font-Names="Calibri" Font-Size="Small" Width="296px"> <AlternatingRowStyle BackColor="#99CCFF" Font-Names="Calibri" Font-Size="Small" /> <Columns> <asp:ButtonField HeaderText="Delete" Text="Delete" CommandName="DeleteVideo" /> <asp:HyperLinkField HeaderText="Link & Title" DataTextField="VideoName" DataNavigateUrlFields="FileUri" /> <asp:BoundField DataField="Category" HeaderText="Category" /> <asp:BoundField DataField="DateSubmitted" HeaderText="Date Submitted" /> </Columns> <HeaderStyle BackColor="#000099" Font-Bold="True" ForeColor="White" /> </asp:GridView> </td> </tr> </table> </form> </body> </html>

    Figure 4

    User Interface for Video Manager

Task 3 – Creating a Data Class

In this task, you will create a data class for managing video information.

  1. In the Solution Explorer, right click the VideoBlobManager project and select Add>Class from the context menu.
  2. In the Add New Item dialog, name the new class VideoBlobStorage.cs and click Add.

  3. Add the following code inside the class definition.

    C#

    public Uri FileUri { get; set; } public string VideoName { get; set; } public string Category { get; set; } public string DateSubmitted { get; set; }

Task 4 – Initiating Azure Storage

In this task, you will create a Global.asax file for initiating Azure Storage.

  1. In the Solution Explorer, right click the VideoBlobManager project and select Add>New Item from the context menu.
  2. In the Add New Item dialog, select Visual C#>Web>Global Application Class and click Add.

  3. At the top of the Global.asax file, add the following code references.

    C#

    using Microsoft.WindowsAzure; using Microsoft.WindowsAzure.Diagnostics; using Microsoft.WindowsAzure.ServiceRuntime;

  4. In the Application_Start method, add the following code to initiate Azure storage.

    C#

    CloudStorageAccount.SetConfigurationSettingPublisher(( configName, configSetting) => { var connectionString = RoleEnvironment.GetConfigurationSettingValue(configName); configSetting(connectionString); });

Task 5 – Coding Project Functionality

In this task, you will code the project functionality.

  1. In the Solution Explorer, open Default.aspx.cs for editing.

  2. Add the following code references to the top of the file.

    C#

    using Microsoft.WindowsAzure.StorageClient; using Microsoft.WindowsAzure;

  3. Within the class, add the following member variables.

    C#

    CloudBlobContainer azureBlobContainer = null; CloudStorageAccount azureStorageAcct = null; CloudBlobClient azureBlobClient = null; BlobContainerPermissions azureBlobPermissions = null; string submissionDateTime = string.Empty;

  4. Add the following method to update the list of videos.

    C#

    private void UpdateVideoList() { var azureBlobs = azureBlobContainer.ListBlobs(); var listOfBriefs = new List<VideoBlobStorage>(); foreach (var blobItem in azureBlobs) { var azureBlobRecord = azureBlobContainer.GetBlobReference(blobItem.Uri.ToString()); azureBlobRecord.FetchAttributes(); listOfBriefs.Add(new VideoBlobStorage() { FileUri = blobItem.Uri, VideoName = azureBlobRecord.Metadata["VideoName"], Category = azureBlobRecord.Metadata["Category"], DateSubmitted = azureBlobRecord.Metadata["DateSubmitted"] }); } videoList.DataSource = listOfBriefs; videoList.DataBind(); }

  5. In the Page_Load event, add the following code.

    C#

    azureStorageAcct = CloudStorageAccount.FromConfigurationSetting("DataConnectionString"); azureBlobClient = azureStorageAcct.CreateCloudBlobClient(); azureBlobContainer = azureBlobClient.GetContainerReference("videofiles"); azureBlobContainer.CreateIfNotExist(); azureBlobPermissions = new BlobContainerPermissions(); azureBlobPermissions.PublicAccess = BlobContainerPublicAccessType.Container; azureBlobContainer.SetPermissions(azureBlobPermissions); UpdateVideoList();

  6. Add the following code to delete a selected video.

    C#

    protected void RowCommandHandler(object sender, GridViewCommandEventArgs e) { if (e.CommandName == "DeleteVideo") { var blobIndex = Convert.ToInt32(e.CommandArgument); var blobName = (Uri)videoList.DataKeys[blobIndex].Value; var blobContainer = azureBlobClient.GetContainerReference("videofiles"); var blob = blobContainer.GetBlobReference(blobName.ToString()); blob.DeleteIfExists(); } UpdateVideoList(); }

  7. Add the following code to submit a video to blob storage.

    C#

    protected void SubmitVideo_Click(object sender, EventArgs e) { submissionDateTime = DateTime.Now.ToShortDateString(); string videoFileExtension = System.IO.Path.GetExtension(videoUploadControl.FileName); var videoFilePrefix = videoNameBox.Text; var blob = azureBlobContainer.GetBlobReference( videoFilePrefix + videoFileExtension); var blobName = blob.Attributes.Properties.ToString(); blob.UploadFromStream(videoUploadControl.FileContent); blob.Metadata["VideoName"] = videoNameBox.Text; blob.Metadata["Category"] = dropdwnCategory.SelectedItem.ToString(); blob.Metadata["DateSubmitted"] = submissionDateTime; blob.SetMetadata(); blob.Properties.ContentType = videoUploadControl.PostedFile.ContentType; blob.SetProperties(); UpdateVideoList(); videoNameBox.Text = string.Empty; }

  8. Add the following code to clear the form fields.

    C#

    protected void ClearFields_Click(object sender, EventArgs e) { videoNameBox.Text = string.Empty; }

Task 6 – Testing the Solution

In this task, you will test the solution before deploying it to Azure.

  1. In the Solution Explorer, double click the VideoBlobManager web role.
  2. Click Settings.
  3. Click Add Setting.
  4. In the Name field, enter DataConnectionString.
  5. In the Type list, select Connection String.
  6. In the Value field, click the ellipsis.

  7. In the Storage Account Connection String dialog, click OK.

    Figure 5

    Settings

  8. Select File>Save All from the Visual Studio menu.
  9. In the Solution Explorer, open web.config for editing.

  10. Add the following beneath the system.web element to allow for the size and time required to upload videos.

    XML

    <httpRuntime maxRequestLength="104856" executionTimeout="43200"/>

  11. Hit F5.

  12. When the web role starts., click the Browse button, navigate to a video and upload it. Once uploaded, you can click the link to play it.

    Figure 6

    Testing the Web Role

Task 7 – Deploying the Web Role to Azure

In this task, you will deploy the web role to Azure so that you can upload videos.

  1. In the Solution Explorer, double click the VideoBlobManager web role.
  2. Click Settings.
  3. Click the eliipsis associated with the Value field for the DataConnectionString setting.
  4. Click Enter Storage Account Credentials.
  5. Enter your Account Name and Account Key.
  6. Select Use Default HTTP Endpoints and click OK.
  7. Click the eliipsis associated with the Value field for the Diagnostics.ConnectionString setting.
  8. Click Enter Storage Account Credentials.
  9. Select your Account Name from the drop-down list and click OK.
  10. In the Solution Explorer, right click the AzureVideoManager project and select Publish from the context menu.
  11. Select Create Service Package Only and click OK.
  12. Open your Azure Management portal.
  13. Click Hosted Services, Storage Accounts & CDN.
  14. Click New Hosted Service.
  15. Enter a name for your servie.
  16. Enter a URL Prefix for your service.
  17. Select a region to host your service.
  18. Select Deploy to Production Environment.
  19. Enter a Deployment Name.
  20. Under Package Location, click Browse Locally.
  21. Locate the AzureVideoManager.cspkg file and click Open.
  22. Under Configuration File, click Browse Locally.
  23. Locate the ServiceConfiguration.cscfg file and click Open.
  24. In the Create a New Hosted Service dialog, click OK.

  25. When you see the warning dialog telling you that only one instance is defined, override the warning and submit the package.

    Figure 7

    Override the Warning

  26. After the new hosted service is started, locate the DNS Name. Click the link and the Video Manager will appear in the browser.

  27. Upload some small video smple for use later.

Task 8 – Playing Videos in SharePoint 2010 Media Player

In this task, you will play one of the uploaded videos in the SharePoint 2010 Media Player.

  1. Open a SharePoint 2010 site and optionally add a new page for hosting web parts.
  2. Select Site Actions>Edit Page.
  3. Click Insert>Video and Audio in the ribbon.
  4. Select the Media Web Part and click Change Media>From Address in the ribbon.
  5. In the Link Media dialog, enter the URL to one of the uploaded videos and click OK.

  6. You should now be able to play the video in the Media Player.

Exercise 2: Creating a Media Player

In this exercise, you will create a Silverlight media player to list and play the videos in SharePoint 2010.

Task 1 – Creating the Intermediate REST Service

In this task, you will create an intermediate REST service that can access Azure storage. This is required because calls from a Silverlight application running in SharePoint will be cross-domain, which is not normally allowed.

  1. Open the AzureVideoManager solution in Visual Studio 2010.
  2. Right click the Roles folder and select Add>New Web Role Project from the context menu.
  3. In the Add New Role Project dialog, select WCF ServiceWebRole.
  4. Name the web role IntermediateRestVideoService and click Add.
  5. Open IService1.cs for editing.

  6. Add the following code reference to the file.

    C#

    using System.IO;

  7. Replace the entire service contract with the following code.

    C#

    [OperationContract] [WebGet(UriTemplate = "{Container}")] Stream BlobInfo(string Container);

  8. Open Service1.svc for editing.

  9. Add the following code reference to the file.

    C#

    using System.IO; using System.Net;

  10. Replace the entire class with the following code making sure to use the Account Name for your Azure account.

    C#

    public Stream BlobInfo(string Container)
    FakePre-279525e6aa074d63a51b3ec51b621979-456ada6d15854985a666ff49194c36f9FakePre-2640d9596da84616b9d9587759295fe1-f9fdfa36477f4061a9ea4a760e4b294bFakePre-c8a80783d2c643a9bb5d721b701fd2b0-302514fd43b3455aacb26483ccf25ee6FakePre-b5bf1bbda6244b4780a3148ebdb26eed-9547fc3492044425a1e5166def282775FakePre-a5f42429a19941d5afbd163a9fe0eabb-2ff99828baf74476b7e2608aa82b6fadFakePre-85522eb0154644b0a9eef61c8f8163ad-5f3340ec2ecb4f2989d728f5566dc538

  11. Open web.config for editing.

  12. Replace the serviceModel section with the following code.

    XML

    <services> <service name=" IntermediateRestVideoService.Service1"> <endpoint bindingConfiguration="webBinding" behaviorConfiguration="RESTful" address="" binding="webHttpBinding" contract="IntermediateRestVideoService.IService1"/> </service> </services> <behaviors> <endpointBehaviors> <behavior name="RESTful"> <webHttp/> </behavior> </endpointBehaviors> </behaviors> <bindings> <webHttpBinding> <binding name="webBinding"> <security mode="None"> <transport clientCredentialType="None"/> </security> </binding> </webHttpBinding> </bindings>

  13. Right click the IntermediateRestVideoService project and select Add>New Item from the context menu.
  14. In the Add New Item dialog, select Visual C#>XML File.
  15. Name the new file ClientAccessPolicy.xml and click Add.

  16. Add the following code to the file.

    XML

    < ?xml version="1.0" encoding="utf-8"?> <access-policy> <cross-domain-access> <policy> <allow-from http-request-headers="SOAPAction"> <domain uri="*"/> </allow-from> <grant-to> <resource path="/" include-subpaths="true"/> </grant-to> </policy> </cross-domain-access> </access-policy>

  17. Save all files and build the solution.
  18. Open your Azure Management portal.
  19. Click Hosted Services, Storage Accounts & CDN.
  20. Click Hosted Services.
  21. Click on the video storage service you created earlier.
  22. Delete the service.
  23. Refer to the steps earlier in the hands-on lab to deploy the new version of the project to Azure.

  24. When finished, make note of the Uri that refers to the intermediate RESTful service.

Task 2 – Creating the Silverlight Project

In this task, you will create the Silverlight project to list and play videos.

  1. In the Solution Explorer, right click the AzureVideoManager solution and select Add>New Project from the context menu.
  2. In the Add New Project dialog, select Visual C#>Silverlight>Silverlight Application.
  3. Name the new project SilverlightAzureVideoLibrary and click OK.

  4. In the New Silverlight Application dialog, uncheck the box labeled Host the Silverlight Application in a New or Existing Web Site in the solution and click OK.

    Figure 8

    New Silverlight Application

Task 3 – Coding the Silverlight Application

In this task, you will add the code for the Silverlight application.

  1. In the SilverlightAzureVideoLibrary project, right click the References node and select Add reference from the context menu.
  2. Add a reference to System.Windows.Control.Data and System.Xml.Linq.
  3. In the Solution Explorer, right click the VideoBlobManager project and select Add>Class from the context menu.
  4. In the Add New Item dialog, name the new class VideoBlobStorage.cs and click Add.

  5. Add the following code inside the class definition.

    C#

    public string Url { get; set; } public string Name { get; set; }

  6. In the Solution Explorer, open MainPage.xaml for editing.

  7. Add the following just under the UserControl element.

    XAML

    Loaded="UserControl_Loaded" xmlns:data= "clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

  8. Add the following markup inside the Grid element to create the user interface.

    XAML

    <StackPanel Orientation="Vertical"> <StackPanel Orientation="Horizontal"> <data:DataGrid Name="VideoList" AutoGenerateColumns="False"> <data:DataGrid.Columns> <data:DataGridTemplateColumn Header="" CanUserSort="False"> <data:DataGridTemplateColumn.CellTemplate> <DataTemplate> <Button x:Name="PlayButton" Content="Play Video" Click="PlayButton_Click"/> </DataTemplate> </data:DataGridTemplateColumn.CellTemplate> </data:DataGridTemplateColumn> <data:DataGridTextColumn Width="150" Binding="{Binding Name}" Header="Name"/> <data:DataGridTextColumn Width="300" Binding="{Binding Url}" Header="Url"/> </data:DataGrid.Columns> </data:DataGrid> <MediaElement Name="VideoElement" Width="200" Height="200"/> </StackPanel> <TextBox x:Name="Messages" IsReadOnly="True"/> </StackPanel>

  9. In the Solution Explorer, open MainPage.xaml.cs for editing.

  10. Add the following code references to the top of the class.

    C#

    using System.Threading; using System.Xml; using System.Xml.Linq;

  11. Add the following code to the class to define member variables.

    C#

    List<VideoBlobStorage> videos;

  12. Add the following code to show the videos in the grid being careful to use the URI that refers to the intermediate REST service.

    C#

    private void UserControl_Loaded(object sender, RoutedEventArgs e)
    FakePre-622035827d8a4162ab5b34fe1795bf32-bcc6a37ac0af4613b7e87bb81564f402FakePre-a81a601aa308407dba9943f937745fb1-338ef11c08ff4887ae8568aeb8946cfaFakePre-568ebd65fc3e43d788b71e59ecd763ec-6fd0dd82e68542bbbcea766615bfef54FakePre-fc13fa73749c4532a7f0d5009a301078-005e6f379a7441809d37d39ec7b5ad94FakePre-8a3b48045c4c4797821405ad064d6a7c-1e0bcfb6e5e247c39e51d64aa2bf65d2FakePre-096cc9cfa16c4c3b8890ecd23e93c2bf-0c501bae8dc34eebbfe3630e79f38377FakePre-02560914db064480a850792407970ee1-9c8277749f1f4519a17e264b059531a5FakePre-61ae86f3001b4d7dba47459c66ed8d54-b9bb971376f14c7ab99ff19acec684acFakePre-ea7f87a0892540b186c05a02ffa2ede4-cb90925ad49947bb8ba735b0889feec1FakePre-4f974e99ee104dfca68418ffdc190af7-9bf3fae4f5fe4979872f9bffde30d62eFakePre-883dcd75cd014aafb5230ccf1597b622-ff12664610a040b4bc9cf01271bc49e7FakePre-322a54ff46d7433aa33168d0415da7bb-42ecacae84c5457dbde9957fa62bbbdbFakePre-cfc29b5321cc4fef81bfa5afd8354bf5-9b05930de004451b8aff67455f79bed8FakePre-3ab2886d70fc46cc8b9c5a2e9152a7db-ddb09586dd75490db5b8c92c51aef472FakePre-6b67019d857042739f8989aeb40349d1-8bd7fbb6317c4aef9178db3503c339b9FakePre-bbc83b1c90ba4beb8addb0da8cbef110-62db037dd54e4c8ca58b09c9c63e8140FakePre-98b4bef12a2d45a78d3e0840e887cc00-e69de26427fe41149cd20ae69ecc5469FakePre-a3ed80e28b77468a83651ce420db9742-691d605b8a274cd7813250ae54d72296FakePre-a2f564b290f44ba0835f3c68a2a4a9f1-69ca4a71551842d581a4677ea7c2f9f2FakePre-f4b868b59c894595bdaae779b434197f-1835a179b418443f8946e499588c2ebaFakePre-1253bb8907ea4d449a10f0cc2f20ff9f-7e52b047ae5a4b1190df53192ab8f07eFakePre-762090fe9a5f4c9f9f79ca4dfa1a6b35-c4c29a108c004eaa9158c404e90e2c76FakePre-17bb06e32758481fa98229b7990a4030-8d2cbbcf7f024c9682ea7bd9a18809ffFakePre-74dce049468d4d009d4183322bab75f7-d6007adbd5c54682b3fbd5c9911bdef4FakePre-d6736968c11a490980bde8a07674449a-21a37ebfb1c04dcb8c2c360fcbbeb6efFakePre-ce461b1a1b1343a5bfb02e6aac9d7490-aa4ed6e6fe8347fb8e6abd5c75f6ad7cFakePre-8294ea24c1e14333bd3b9e64ad6c3b67-dbae3d1951ef45fc88b8b4e904a96fd0FakePre-c5cf533a5d0a4c69980baddeb1f7ee02-a78cf96525f44b7d96ca9db07bd4d5eaFakePre-ef26f098357848568ca139d08675afe6-84e4ec79d3ef47cba1b5a3ceb4de8133FakePre-3c51f8eb04fd45e7afddc09a063ff82e-8e52404420994799a12a8a278558bb01FakePre-971beb2ce7b84665adfa32467b46548e-210770615fd745398797307286139eccFakePre-d46a17e104064db7970a3d969e7d67ab-c2d2a80eff4e45978e200a4aad369ff4FakePre-d831a6e170784bd8b0c7fb6964014386-9c01b43328db4502b31677d08843be20FakePre-dc3df92bf8c3425da025cabdb41fa899-f42893e849f840a69e3c62c864eacd80FakePre-20938213668a49cf957cd2c4b45ff7f0-e969fcf6b74f49f983044dd9e3c7895eFakePre-3b634b9e80b9481d975752af41ac8fa2-0ebea39dd2844bab9dea4f10488f37eaFakePre-728e28d745cf42879779019545b99e08-ddcb4b9b81bf47a38dca919f53857812FakePre-48e3f928a1e44a2b88d0c1c8c4b7da95-74eab7ada4fa4c5b9fe29228d53f94f3FakePre-b5f97a0cee6f49d78c7607499fb3aedf-4dfa9f4113ab46c482391d1fb29b9149FakePre-4e824c5324eb425db3807c198a1be8bf-99fd9d2dce5541578edb1d0677e6e75cFakePre-c04d5204cc1b4c2aabcfee442620b244-10f2a0f228ec4064a3cb460d57f3128dFakePre-5dda4955c70b481fb0231437ce4775e2-d110fbb6da85404090bae87753c62aadFakePre-c359d25fff144c31ad5648aa3680495a-1d0310870e3a43b0bc70b860e443b0d1FakePre-9cf883a4205b4c9caf7ad484c92a4f59-524e701a7da449dc93c2c1dcb3666fcbFakePre-32c56dc3b44f429aae099a504e915a0e-f88039753ac94967bc4e15c8abcef401FakePre-38c6d2ff8cb2414aa8188646be8a5cca-1e1beab49a0747e6a8d801db7ec2f638FakePre-7982eeb15bdf4d528e980be3bd6500de-f09589553c3d45ee8c9dbc819e20a4bbFakePre-7319e7b7202b4025a93ff225ba1770e4-fbdf27c7f14840be85a7e2d2f567b448FakePre-0f1966c686ea405e8ea76aed4f2216a9-aefdd9ac65c143728993e44933807a8eFakePre-1207d0adf34643e7b5c76ebfea6794da-f4b29e537a854d1f9e1889e99ef6860bFakePre-504d6eccb5b6411193f246c776bce87c-b6f707ea9ca74112b5335c40e671ee2dFakePre-0216f983e51b43759378e714c9efe4b0-45b3e1fc5c294edeb8a9fc0cb731f565FakePre-bc02fa1c700142aeadce46e99fa6f1a2-34c0c95227ae4f2b86dc5ea117eefc69FakePre-c226bb82806d48d8a3aaddfd816cb800-cb2c5662c74e4ad3a017ea54da3f4c1dFakePre-4c8a09d380784f548edb94a2670c7a9e-882c84583b5845019aa2370e8e03315d

  13. Add the following code to play the selected video.

    C#

    private void PlayButton_Click(object sender, RoutedEventArgs e) { Button btn = sender as Button; VideoBlobStorage videoData = btn.DataContext as VideoBlobStorage; VideoElement.Source = new Uri(videoData.Url); VideoElement.Play(); }

Task 4 – Deploying the Solution to SharePoint 2010

In this task, you will deploy the solution and play the videos.

  1. Right click the AzureVideoManagerSolution project, and select Add>Project from the context menu.
  2. In the Add New Project dialog, select Visual C#>SharePoint 2010>Empy SharePoint Project.
  3. Name the new project ShareAzurePointVideoLibrary and click OK.
  4. In the SharePoint Customization Wizard, enter the URL to a Site Collection where you will deploy the new web part.
  5. Select to Deploy as a Sandboxed Solution and click Finish.
  6. Right click the SharePointAzureVideoLibrary project and select Add>New Item from the context menu.
  7. In the Add New Item dialog, select Silverlight Web Part. This item will be visible if you installed the Visual Studio extensions described in the lab set up steps.

  8. Name the new item SilverlightAzureVideoWebPart and click Add.

    Figure 9

    New Silverlight Web Part

  9. Right click the SharePointAzureVideoLibrary project and select Build.
  10. Right click the SharePointAzureVideoLibrary project and select Deploy.
  11. In the browser, open the Site Collection you referenced in the SharePoint Customization Wizard.
  12. In SharePoint, select Site Actions>View All Site Content.
  13. Click the Site Pages library.

  14. Click the SilverlightAzureVideoLibraryWebPartPage.

    Figure 10

    Video Library in SharePoint 2010

Summary

In this lab, you created an application for managing blob storage. This application showed hoe to use code to upload blobs and read information about them. Then you created a Silverlight application to display and play the videos. The Silverlight application was deployed into SharePoint 2010 as a web part.

< previous

Downloads

Download The Offline Training Kit
Download Hands-on Lab Document (DOCX)
Download Hands-on Lab Source Files

Contents