How to style as mini player

4 posts, 0 answers
  1. Warren
    Warren avatar
    24 posts
    Member since:
    May 2008

    Posted 06 Aug 2014 Link to this post

    ASP.NET c# .NET Framework 4.0
    Telerik ASP.NET AJAX v2014.2.724.40

    I'm trying to style the MediaPlayer as a small mini player for playing only audio files.  I've figured out how to remove the HD button, Full Screen button, Title bar but am having trouble figure out how to remove the background image and also getting the volume control to position horizontally and just to the right of the volume button.

    Any help is greatly appreciated.

    Warren
  2. Galin
    Admin
    Galin avatar
    526 posts

    Posted 11 Aug 2014 Link to this post

    Hello Warren,

    In order to achieve this you can use the followng CSS rules
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
        <meta name="viewport" content="width=device-width, user-scalable=no" />
        <telerik:RadCodeBlock runat="server">
            <style type="text/css">
                body {
                    padding: 200px 50px;
                }
     
                div.RadMediaPlayer,
                div.RadMediaPlayer .rmpAudioWrapper {
                    background: none;
                }
     
                .rmpBigPlayButton,
                .rmpTitleBar,
                .rmpFullScrButton,
                .rmpHDButton {
                    display: none !important;
                }
     
                .rmpToolbarWrapper {
                    display: block !important;
                }
     
                div.RadMediaPlayer div.rmpVolContrBar {
                    border: none;
                    background: none;
                    bottom: 3px;
                    left: 128px;
                    margin-left: 0;
                }
     
                div.rmpControlsSet {
                    padding-left: 40px;
                    text-align: left;
                }
            </style>
     
            <script type="text/javascript">
            </script>
        </telerik:RadCodeBlock>
    </head>
     
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            </telerik:RadScriptManager>
            <telerik:RadMediaPlayer runat="server" Height="40px" Width="400px" RenderMode="Mobile" ToolbarDocked="true">
                <Sources>
                    <telerik:MediaPlayerSource Path="media/audio.mp3" MimeType="audio/mp3" />
                    <telerik:MediaPlayerSource Path="media/audio.ogg" MimeType="audio/ogg" />
                </Sources>
            </telerik:RadMediaPlayer>
        </form>
    </body>
    </html>

    Please note it is based on the Mobile Render Mode.

    I hope this helps.

    Regards,
    Galin
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. TechSavvySam
    TechSavvySam avatar
    38 posts
    Member since:
    Jul 2009

    Posted 11 Jun 2015 in reply to Galin Link to this post

    This still renders a kind of bulky player, but I guess it's OK.

     How do you remove the subtitles button ("CC")?  I don't see anything in the docs that explains this.

  5. Galin
    Admin
    Galin avatar
    526 posts

    Posted 16 Jun 2015 Link to this post

    Hello,

    In order to hide the CC button you can use the following CSS rule
    .rmpSubtitlesButton {
        display: none;
    }

    I hope this helps.

    Regards,
    Galin
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top