MediaPlayer - Playlist

Demo Configurator

Player Options




Playlist Options
  • Playlist Position

  • Playlist Mode
  • Buttons Trigger

Youtube Playlist

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The demo aims to demonstrate all of the different configuration options for the build-in Playlist feature. It provides a user-friendly functionality to arrange and play multiple files by assembling them in a scrollable container holding all the media files. Users will be able to easily access the media files and choose the desired one.

The sample is configured via the dynamic handling of the Playlist settings in accordance with the user's selections. To make that possible, EnableViewState of the control is temporarily disabled in the demo only for presentation purpose.

Although RadMediaPlayer is an extensively client-side structured control, it exposes a wide range of server-side configuration properties and references. These settings provide a convenient way of customizing and altering the player so it can be effortlessly embedded in any web application.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.MediaPlayerExamples.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadMediaPlayer1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadMediaPlayer1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadMediaPlayer1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div class="demo-container size-custom">
        <telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" runat="server" DecorationZoneID="containerDiv" DecoratedControls="None" />
        <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>
        <telerik:RadMediaPlayer RenderMode="Lightweight" ID="RadMediaPlayer1" runat="server"
            Height="360px" EnableViewState="false" Width="640px" AutoPlay="false">
            <PlaylistSettings YouTubePlaylist="PL2HUH5okl73JFq_QDyqVq9GCZ0Dd9L0OH" Mode="Buttons" ButtonsTrigger="Hover" />
        </telerik:RadMediaPlayer>
    </div>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Demo Configurator">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                    <fieldset>
                        <legend>Player Options</legend>
                    </fieldset>
                    <qsf:CheckBoxList runat="server" ID="CheckBoxList1" AutoPostBack="true">
                        <asp:ListItem Text="Toolbar Docked" Value="1"></asp:ListItem>
                        <asp:ListItem Text="HD Button" Selected="True" Value="2"></asp:ListItem>
                        <asp:ListItem Text="Full Screen Button" Selected="True" Value="3"></asp:ListItem>
                        <asp:ListItem Text="Share Button" Selected="True" Value="4"></asp:ListItem>
                        <asp:ListItem Text="Enable Muting" Selected="True" Value="5"></asp:ListItem>
                    </qsf:CheckBoxList>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
                    <fieldset>
                        <legend>Playlist Options</legend>
                    </fieldset>
                    <ul class="fb-group">
                        <li>
                            <span class="label">Playlist Position</span>
                            <qsf:RadioButtonList runat="server" ID="RadioButtonList1" AutoPostBack="true" Orientation="Horizontal">
                                <asp:ListItem Text="Vertical" Selected="True"></asp:ListItem>
                                <asp:ListItem Text="Horizontal"></asp:ListItem>
                                <asp:ListItem Text="VerticalInside"></asp:ListItem>
                            </qsf:RadioButtonList>
                        </li>
                        <li>
                            <span class="label">Playlist Mode</span>
                            <qsf:RadioButtonList runat="server" ID="RadioButtonList2" AutoPostBack="true" Orientation="Horizontal">
                                <asp:ListItem Text="Buttons" Selected="True"></asp:ListItem>
                                <asp:ListItem Text="Scrollbar"></asp:ListItem>
                            </qsf:RadioButtonList>
                        </li>
                        <li>
                            <asp:Panel runat="server" ID="Panel1">
                                <span class="label">Buttons Trigger</span>
                                <qsf:RadioButtonList runat="server" ID="RadioButtonList3" AutoPostBack="true" Orientation="Horizontal">
                                    <asp:ListItem Text="Hover" Selected="True"></asp:ListItem>
                                    <asp:ListItem Text="Click"></asp:ListItem>
                                    <asp:ListItem Text="MouseDown"></asp:ListItem>
                                </qsf:RadioButtonList>
                            </asp:Panel>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Wide">
                    <fieldset>
                        <legend>Youtube Playlist</legend>
                    </fieldset>
                    <div style="height: 63px;">
                        <label>Add Playlist:</label><br />
                        <qsf:TextBox ID="RadTextBox1" runat="server" Size="Wide" Text="PL2HUH5okl73JFq_QDyqVq9GCZ0Dd9L0OH"></qsf:TextBox>
                        <qsf:Button ID="RadButton1" Size="Thin" runat="server" Text="Play"></qsf:Button>
                    </div>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?