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

Media Types

0:00 / 0:00
Progress Telerik Booth

This example demonstrates in a playlist-like scenario the different types of media supported by the player, such as playing video, audio and YouTube streaming.

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

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ 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" />
    <script type="text/javascript" src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadScriptBlock runat="server" ID="RadCodeBlock1">
        <script type="text/javascript">
            Sys.Application.add_load(function ()
            {
                demo.listView1 = $find('<%= RadListView1.ClientID %>');
                    demo.listView2 = $find('<%= RadListView2.ClientID %>');
                    demo.initialize();
                });
        </script>
    </telerik:RadScriptBlock>
    <div class="demo-container size-custom">
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
            <div class="mediaPlayerWrapper">
                <div class="leftPanel">
                    <telerik:RadMediaPlayer RenderMode="Lightweight" ID="RadMediaPlayer1" Skin="Glow" runat="server" Width="700px" BackColor="Black"
                        StartVolume="80" Height="394px">
                    </telerik:RadMediaPlayer>
                </div>
                <div style="background-color: #10191E; border-left: 1px solid #364046;">
                    <telerik:RadTabStrip RenderMode="Lightweight" ID="RadTabStrip1" runat="server" Skin="Glow" MultiPageID="RadMultiPage1"
                        SelectedIndex="0" Width="246px" CssClass="tabStripMenu">
                        <Tabs>
                            <telerik:RadTab Text="Video" Value="Video" Selected="true" PageViewID="RadPageView1">
                            </telerik:RadTab>
                            <telerik:RadTab Text="Audio" Value="Audio" PageViewID="RadPageView2"></telerik:RadTab>
                            <telerik:RadTab Text="YouTube" Value="YouTube" PageViewID="RadPageView3"></telerik:RadTab>
                        </Tabs>
                    </telerik:RadTabStrip>
                    <telerik:RadMultiPage ID="RadMultiPage1" runat="server"  SelectedIndex="0" Height="358px" BackColor="#10191E">
                        <telerik:RadPageView ID="RadPageView1" runat="server" Selected="true" Style="padding-top: 1px;">
                            <telerik:RadListView ID="RadListView1" runat="server" OnSelectedIndexChanged="RadListView1_SelectedIndexChanged" Skin="Glow" OnNeedDataSource="RadListView1_NeedDataSource">
                                <LayoutTemplate>
                                    <div id="itemPlaceholder" runat="server">
                                    </div>
                                </LayoutTemplate>
                                <ItemTemplate>
                                    <a href="#" class="playlistItem" onclick='<%#"demo.selectVideo(this,"+Container.DisplayIndex+"); return false;"%>'>
                                        <asp:Image ID="Image1" runat="server" AlternateText='<%# Eval("Title") %>' ImageUrl='<%# "images/" + Eval("Path") + ".png"%>' />
                                        <asp:Label ID="Label1" runat="server" Text='<%# Eval("Title") %>'></asp:Label>
                                    </a>
                                </ItemTemplate>
                                <SelectedItemTemplate>
                                    <span class="playlistItem selected">
                                        <asp:Image ID="Image2" runat="server" AlternateText='<%# Eval("Title") %>' ImageUrl='<%# "images/" + Eval("Path") + ".png"%>' />
                                        <asp:Label ID="Label2" runat="server" Text='<%# Eval("Title") %>'></asp:Label>
                                        <asp:Image ID="Image3" CssClass="playIcon" runat="server" ImageUrl="~/Media-Player/Examples/Functionality/MediaTypes/images/playIcon.png"
                                            AlternateText="Selected" />
                                    </span>
                                </SelectedItemTemplate>
                            </telerik:RadListView>
                        </telerik:RadPageView>
                        <telerik:RadPageView ID="RadPageView2" runat="server" Style="padding-top: 1px;">
                            <telerik:RadListView ID="RadListView2" runat="server" Skin="Glow" OnSelectedIndexChanged="RadListView2_SelectedIndexChanged" OnNeedDataSource="RadListView2_NeedDataSource">
                                <LayoutTemplate>
                                    <div id="itemPlaceholder" runat="server">
                                    </div>
                                </LayoutTemplate>
                                <ItemTemplate>
                                    <a href="#" class="playlistItem playlistAudioItem" onclick='<%#"demo.selectSong(this,"+Container.DisplayIndex+"); return false;"%>'>
                                        <asp:Label ID="Label3" runat="server" Text='<%# Eval("Title") %>'></asp:Label>
                                    </a>
                                </ItemTemplate>
                                <SelectedItemTemplate>
                                    <span class="playlistItem playlistAudioItem selected">
                                        <asp:Image ID="Image4" CssClass="playIcon" runat="server" ImageUrl="~/Media-Player/Examples/Functionality/MediaTypes/images/playIcon.png"
                                            AlternateText="Selected" />
                                        <asp:Label ID="Label4" runat="server" Text='<%# Eval("Title") %>'></asp:Label>
                                    </span>
                                </SelectedItemTemplate>
                            </telerik:RadListView>
                        </telerik:RadPageView>
                        <telerik:RadPageView ID="RadPageView3" runat="server">
                            <div style="padding: 16px 0 0 1px;">
                                <asp:Image ID="Image5" runat="server" AlternateText="YouTube"
                                    ImageUrl="~/Media-Player/Examples/Functionality/MediaTypes/images/youtubeLogo.png" Width="75px" Height="32px" />
                                <br />
                                <br />
                                <div
                                    style='color: #B4BEC3; font-family: Arial,​Helvetica,​sans-serif; font-size: 13px; margin-bottom: -11px;'>
                                    Insert your YouTube URL
                                </div>
                                <br />
                                <telerik:RadTextBox RenderMode="Lightweight" ID="RadTextBox1" runat="server" Skin="Glow" Width="199px"
                                    Height="28px" Text="https://www.youtube.com/watch?v=HMfp-Z5Vs-k">
                                </telerik:RadTextBox>
                                <telerik:RadButton RenderMode="Lightweight" ID="RadButton1" runat="server" Skin="Glow" Text="YouTube" BackColor="#2C363B" AutoPostBack="true" OnClick="RadButton1_Click"
                                    Style="margin: 0 0 -11px 10px; background-repeat: no-repeat;" Width="30px" Height="28px">
                                    <Image EnableImageButton="true" ImageUrl="~/Media-Player/Examples/Functionality/MediaTypes/images/buttonNormal.png"
                                        HoveredImageUrl="~/Media-Player/Examples/Functionality/MediaTypes/images/buttonHover.png" />
                                    <Image EnableImageButton="true" />
                                </telerik:RadButton>
                            </div>
                        </telerik:RadPageView>
                    </telerik:RadMultiPage>
                </div>
            </div>
        </telerik:RadAjaxPanel>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance