media element and silverlight

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

http://narenda.com/silverlight/default.html

What I have so far is:


and I got this error:

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

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].Children.Add(me[nx]);
                    cI[nx].SetValue(Canvas.NameProperty, "C" + nx.ToString());
                    cI[nx].MouseLeftButtonDown += new MouseButtonEventHandler(Page_MouseLeftButtonDown);
                    if (nx < 8)
                        GameContainer.Children.Add(cI[nx]);
                }

Open in new window

kuntilanakAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

JaressLooCommented:
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: http://silverlight.net/GetStarted/

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: http://betatest1.jaressloo.com/tutorials/butterfly

I hope you find this helpful
<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls" TagPrefix="asp" %>
 
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Scripts>
            <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" />
        </Scripts>
    </asp:ScriptManager>
 
<asp:MediaPlayer ID="mpVideo" runat="server" Height="400px" Width="530px" MediaSource="../videos/Butterfly.wmv"  
  MediaSkinSource="../includes/player.xaml" ScaleMode="Stretch">
</asp:MediaPlayer>

Open in new window

ExpressionPlayer.js.txt
MicrosoftAjax.js.txt
player.js.txt
player.xaml.txt
PlayerStrings.js.txt
Silverlight.js.txt
SilverlightControl.js.txt
SilverlightMedia.js.txt
StartPlayer.js.txt
0
kuntilanakAuthor Commented:
isn't there a simple way to do this using a media element? and a canvas?
0
JaressLooCommented:
You don't have to use all of the scripts in the script manager.

You can just use the media element. That should work.
0
Exploring SQL Server 2016: Fundamentals

Learn the fundamentals of Microsoft SQL Server, a relational database management system that stores and retrieves data when requested by other software applications.

kuntilanakAuthor Commented:
Yes, but how do I use the media element?? Can you tell why my code doesn't work?
0
JaressLooCommented:
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?
0
JaressLooCommented:
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: http://www.microsoft.com/downloads/details.aspx?familyid=FBEE1648-7106-44A7-9649-6D9F6D58056E&displaylang=en

 - Installed SP1

2) Downloaded and installed Silverlight SDK for VS2008 SP1 from here: http://www.microsoft.com/downloads/details.aspx?FamilyId=c22d6a7b-546f-4407-8ef6-d60c8ee221ed&displaylang=en

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:MediaPlayer ID="MediaPlayer1" MediaSource="~/Butterfly_OLD.wmv" runat="server" Height="240px" Width="320px">
        </asp:MediaPlayer>
    </div>
    </form>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Microsoft Development

From novice to tech pro — start learning today.