media element and silverlight

How do you create something like this with a media element?

What I have so far is:

and I got this error:

Error: Unhandled Error in Silverlight 2 Application SlidingBlocks.xap
Code: 4001    
Category: MediaError      

Canvas[] cI = new Canvas[9];
        MediaElement[] me = new MediaElement[9]; 
         int blockSizeW = 97;
        int blockSizeH = 97;
int nx = 0;
            for (int ix = 0; ix < 3; ix++)
                for (int iy = 0; iy < 3; iy++)
                    nx = (ix * 3) + iy;
                    me[nx] = new MediaElement();
                    me[nx].Height = 300;
                    me[nx].Width = 300;
                    me[nx].Stretch = Stretch.UniformToFill;
                    RectangleGeometry r = new RectangleGeometry();
                    r.Rect = new Rect((ix * blockSizeW), (iy * blockSizeH), blockSizeW, blockSizeH);
                    me[nx].Clip = r;
                    me[nx].Source = new Uri("assets/SharePoint.wmv", UriKind.Relative);
                    me[nx].SetValue(Canvas.TopProperty, Convert.ToDouble(iy * blockSizeH * -1));
                    me[nx].SetValue(Canvas.LeftProperty, Convert.ToDouble(ix * blockSizeW * -1));
                    cI[nx] = new Canvas();
                    cI[nx].Width = blockSizeW;
                    cI[nx].Height = blockSizeH;
                    cI[nx].SetValue(Canvas.NameProperty, "C" + nx.ToString());
                    cI[nx].MouseLeftButtonDown += new MouseButtonEventHandler(Page_MouseLeftButtonDown);
                    if (nx < 8)

Open in new window

Who is Participating?
JaressLooConnect With a Mentor Commented:
I just added a media element from scratch and these were the steps taken:

1) Checked to see if I had the SP1 for VS2008. I did not have it, so I downloaded from here:

 - Installed SP1

2) Downloaded and installed Silverlight SDK for VS2008 SP1 from here:

3) Opened VS2008 and created a new "ASP.NET Web Site"

4) Dragged a "ScriptManager" element from the toolbox onto the page.

5) Dragged a MediaPlayer element from the toolbox onto the page.

6) Added a video in wmv format into my website directory

7) Set the reference to the video in the "MediaSource" attribute of the asp:MediaPlayer node.

8) Build and run.

9) It works!

Attached is the code I used. Note: There is NO code behind or server side programming required...
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
    TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head runat="server">
    <title>Untitled Page</title>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <asp:MediaPlayer ID="MediaPlayer1" MediaSource="~/Butterfly_OLD.wmv" runat="server" Height="240px" Width="320px">

Open in new window

The first thing you'll need is a reference to the Microsoft Silverlight dll (System.Web.Silverlight). You can download what you'll need from here:

Then, you'll need the media player ASP.NET code that I've attached.

The way I usually do this is by opening up expression encoder and then encode a video with the player that I like. It outputs to you a completed HTML web page.

You can take what it provides and integrate it with the media player element that I've attached.

I'm also attaching the skin and javascripts that make my player work on this page:

I hope you find this helpful
<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls" TagPrefix="asp" %>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
            <asp:ScriptReference Path="~/includes/MicrosoftAjax.js" />
            <asp:ScriptReference Path="~/includes/Silverlight.js" />
            <asp:ScriptReference Path="~/includes/SilverlightControl.js" />
            <asp:ScriptReference Path="~/includes/SilverlightMedia.js" />
            <asp:ScriptReference Path="~/includes/ExpressionPlayer.js" />
            <asp:ScriptReference Path="~/includes/PlayerStrings.js" />
            <asp:ScriptReference Path="~/includes/player.js" />
            <asp:ScriptReference Path="~/includes/StartPlayer.js" />
<asp:MediaPlayer ID="mpVideo" runat="server" Height="400px" Width="530px" MediaSource="../videos/Butterfly.wmv"  
  MediaSkinSource="../includes/player.xaml" ScaleMode="Stretch">

Open in new window

kuntilanakAuthor Commented:
isn't there a simple way to do this using a media element? and a canvas?
Never miss a deadline with

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

You don't have to use all of the scripts in the script manager.

You can just use the media element. That should work.
kuntilanakAuthor Commented:
Yes, but how do I use the media element?? Can you tell why my code doesn't work?
Unfortunately, no. When I create a media element in a page I literally just drag the media element from the toolbox onto the page in VS and it just works.

This looks like server-side coding that I don't need to do nor have I ever done.

Sorry I couldn't be of more help!

Have you downloaded the silverlight SDK from Microsoft?
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.