New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Playlist

  • Demo Configurator
Player Options




Player Options
  • Playlist Position

  • Playlist Mode
  • Buttons Trigger

Youtube Playlist

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.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="vb" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.MediaPlayerExamples.Overview.DefaultVB" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<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="PLC679RvCan2CLAR4zqTm-8QDMir5CRKNN" Mode="Buttons" ButtonsTrigger="Hover" />
        </telerik:RadMediaPlayer>
    </div>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Demo Configurator">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" 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="ConfiguratorColumn2" runat="server" Size="Medium">
                    <fieldset>
                        <legend>Player 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="ConfiguratorColumn3" 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="PLC679RvCan2CLAR4zqTm-8QDMir5CRKNN"></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