Media Player inside Window

Environment

Product

Telerik WebForms MediaPlayer for ASP.NET AJAX

Description

Sometimes, you might want to show a MediaPlauer with a video on it, after the press of a button.

Solution

To do that, you can use the Window control and add a MediaPlayer as its template.

<telerik:RadWindowManager ID="RadWindowManager1" runat="server" />
<telerik:RadButton runat="server" ID="RadButton1" Text="Postback" AutoPostBack="true" OnClick="RadButton1_Click" />

protected void RadButton1_Click(object sender, EventArgs e)
{
    RadWindow window = new RadWindow()
    {
        ID = "PlayerWindow",
        VisibleOnPageLoad = true,
        Width = 950,
        Height = 500,
        OnClientShow = "onClientShow",
        OnClientBeforeClose = "onClientBeforeClose",
        ContentTemplate = new WindowMediaTemplate("MediaPlayer1"),
    };

    RadWindowManager1.Windows.Add(window);
}

private class WindowMediaTemplate : ITemplate
{
    protected RadMediaPlayer player;
    private string _id;

    public WindowMediaTemplate(string id)
    {
        _id = id;
    }

    public void InstantiateIn(Control container)
    {
        player = new RadMediaPlayer()
        {
            ID = _id,
            Height = Unit.Pixel(360),
            Width = Unit.Pixel(640),
            BannerCloseButtonToolTip = "Close",
            Title = "Getting Started with the JoT ERP",
            Playlist =
            {
                new MediaPlayerVideoFile()
                {
                    Path="https://www.youtube.com/watch?v=9M2zYspl9e0",
                    Title="Cat mewing",
                    Poster="~/Images/cat1.jpg"
                },
                new MediaPlayerVideoFile()
                {
                    Path="https://www.youtube.com/watch?v=kG7d_4LeP48",
                    Title="Cat says hi",
                    Poster="~/Images/cat2.jpg"
                },
            }
        };
        container.Controls.Add(player);
    }
}

• The onClientShow event is used to remove any inactive windows after they are shown.
• The onClientBeforeClose event is used to pause the MediaPlayer whenever the Window is closed.

function onClientShow(sender, args) {
    var windows = document.querySelectorAll(".rwInactiveWindow"); // Get a reference to all the inactive windows

    windows.forEach(function (window) {
        var windowToHide = window.id.replace('RadWindowWrapper_', ''); // We remvoe the windows because every time the button is clicked, a new window is created
        var radWindow = $find(windowToHide); // Find the RadWindows (to see what we actually dispose, comment the code in the event)

        if (radWindow) {
            radWindow.dispose(); // Dispose the 
        }
    });
}

function onClientBeforeClose(sender, args) {
    var windowContent = sender.get_contentElement(); // Get the content of the RadWindow
    var mediaPlayer = $(windowContent).find(".RadMediaPlayer")[0].control; // Find the MediaPlayer control

    mediaPlayer.pause(); // Pause it when closing the player
}