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

Video Gallery

Video Thumbnail 2:19 Teknion's Response and Engagement Increase With the Help of Sitefinity
Video Thumbnail 1:51 Why NASA Chose to Depend on the Web App Quality of Telerik
Video Thumbnail 2:41 OpenEdge Rapid Development Allows QAD to Stay Competitive
Video Thumbnail 2:35 California Association of Realtors Leverages Corticon in a Constantly Changing Industry
Video Thumbnail 2:04 BankUnited Chooses Progress Sitefinity to Streamline Operations
Video Thumbnail 2:39 Sitefinity - a Building Block of The Henry Ford’s Digital Exhibits

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.

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

<%@ 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" 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