Question

I am using VSTS 2008 with C# to develop Silverlight application embedded in web page of an ASP.Net web application. I have embedded in XAML a MediaElement item. My question is, I want to embed the page a Silverlight media player, which could let end user to control the MediaElement item manually to — play/pause/stop/rewind/forward. Are there any references samples?

thanks in advance,
George

EDIT1: add more accurate requirements,

Actually, I want to control play manually, which means I want to handle the player play/pause/stop/rewind/forward events and add my code for the event handlers to control the MediaElement and do something else.

EDIT2: My needs are, I want to play two overlapped video. Screen as background video and camera as foreground video (place at right bottom corner). Here is my modification of code, my current issue is, only background video is played, foreground right bottom video is never played. Does anyone have any ideas why?

BTW: my modified code and current work is based on http://www.codeplex.com/sl2videoplayer

http://www.yourfilehost.com/media.php?cat=other&file=sl2videoplayer_24325_new.zip

Here is a brief description of my major modified code,

mediaControls.xaml.cs

private MediaElement _media = null;
private MediaElement _camera = null;

public MediaElement Camera
{
    set
    {
        _camera = value;
    }
}

void btnPlay_Checked(object sender, RoutedEventArgs e)
{
    _camera.Play();            
    _media.Play();
    OnPlayClicked();
}

Page.xaml

    <MediaElement HorizontalAlignment="Stretch" Margin="0,0,0,0" x:Name="mediaPlayer" Stretch="Uniform" VerticalAlignment="Stretch" AutoPlay="false"/>
    <MediaElement Width="100" Height="100" x:Name="cameraPlayer" AutoPlay="false" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>

Page.xaml.cs

cameraPlayer.Source = App.Current.Resources["c"] as Uri;

App.xaml.cs (Application_Startup function)

        else if (item.Key.ToLower() == "c")
        {
            FormatUri(e.InitParams["c"].ToString(), "c", false);
        }

default.html

        <param name="initParams" value="cc=true,markers=true,markerpath=markers_movie21.xml,m=http://localhost/screen.wmv,c=http://localhost/camera.wmv" />

Answer 1

Oh baby have I got the media player for you: Sl2 Video Player. MSPL open sourced and awesome.

To add the ability to control the player pragmatically, add ScriptableMembers.
You’ll see the registration statement already in the code:

    HtmlPage.RegisterScriptableObject("Page", page);

Now look at an example ScriptableMember:

[ScriptableMember]
public void SeekPlayback(string time)
{
    TimeSpan tsTime = TimeSpan.Parse(time);
    mediaControls.Seek(tsTime);
}

already exists in the code. Add more methods to do what you want to have happen. Then you can call the methods from managed code in another SL player:

HtmlElement videoPlugin = HtmlPage.Document.GetElementById("VideoPlayer");
            if (videoPlugin != null)
            {
                ScriptObject mediaPlayer = (ScriptObject)((ScriptObject)videoPlugin.GetProperty("Content")).GetProperty("Page");

                mediaPlayer.Invoke("SeekPlayback", TimeSpan.FromSeconds(seconds).ToString());

            }

or from javascript:

        var sl = document.getElementById("VideoPlayer");
        var content = sl.Content.Page;
        content.SeekPlayback('55');