MediaPlayer - Video Gallery

Video Thumbnail 1:06 Telerik UI for
Windows 8 (Beta), UI
Video Thumbnail 1:06 Telerik Windows 8 UI Controls
Video Thumbnail 1:20 Building Windows Phone 7 Apps that Rock the Marketplace
Video Thumbnail 2:17 Load Testing with Telerik Test Studio
Video Thumbnail 2:14 Telerik Software Testing Tool - Test Studio - Overview
Video Thumbnail 0:39 UI controls for building Windows Phone 7 apps.mp4
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

You can use RadMediaPlayer in integration with any container control to create robust and attractive dynamic design for your applications. In this demo RadLightBox is used as the place holder for the video player via its item Templates.

The Templates are created programmatically and added during the Page_Init event. A custom VideoClip class collection holds the video details and serves as the datasource for the RadListView, as well as, for the items of the LightBox.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • 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" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>

<!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" />
    <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" />
    <div class="demo-container size-custom">
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadListView1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadLightBox1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
            <telerik:RadListView ID="RadListView1" runat="server" OnNeedDataSource="RadListView1_NeedDataSource">
                <ItemTemplate>
                    <div class="imageWrapper" onclick='<%# "showLightBox("+Container.DisplayIndex+");" %>'>
                        <span class="thumbnailHolder">
                            <asp:Image ID="Image2" runat="server" Height="109px" Width="194px" AlternateText="Video Thumbnail"
                                ImageUrl='<%# string.Format("http://i1.ytimg.com/vi/{0}/mqdefault.jpg" , Eval("VideoID")) %>' />
                            <asp:Label ID="Label3" runat="server" CssClass="timeLabel" Text='<%#  Eval("Length") %>'></asp:Label>
                            <span class="playIcon"></span>
                        </span>
                        <asp:Label ID="Label4" runat="server"
                            Text='<%#  Eval("Title") %>'></asp:Label>
                    </div>
                </ItemTemplate>
            </telerik:RadListView>
        <telerik:RadLightBox RenderMode="Lightweight" ID="RadLightBox1" runat="server" Modal="true"
            ItemsCounterFormatString="Video {0} of {1}" Width="720px" Height="340px">
            <ClientSettings>
                <ClientEvents OnLoad="lightBoxLoad" OnShowed="lightBoxShowed" />
            </ClientSettings>
        </telerik:RadLightBox>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?