Remove buttons and title bar to create a minimalistic RadMediaPlayer for audio

RELATED TO:

AUTHOR: Attila Antal

DATE POSTED: March 25, 2019

PROBLEM

How-To Remove buttons and title bar to create a minimalistic RadMediaPlayer

DESCRIPTION

One would like to use RadMediaPlayer for playing only audio files and the default player size takes up quite a space. 

 

SOLUTION

Since this control was designed for multi-purpose, transforming it into a minimal player would require some tricks.

CSS - Styles

<style type="text/css">
    .minimalistic.RadMediaPlayer .rmpSeekBar {
        margin-right: 145px;
    }
 
    .minimalistic .rmpRightControlsSet .rmpProgressText {
        top: 4px;
        position: relative;
    }
 
    .minimalistic .rmpHDButton,
    .minimalistic .rmpSubtitlesButton,
    .minimalistic .rmpFullScrButton,
    .minimalistic .rmpAudioWrapper {
        display: none;
    }
 
    .minimalistic .rmpBigPlayButton {
        display: none !important;
    }
</style>

Markup

<telerik:RadMediaPlayer CssClass="minimalistic" RenderMode="Lightweight" ID="RadMediaPlayer2" runat="server" AutoPlay="false"
    Height="41px" Width="250px" ToolbarDocked="true">
    <Sources>
        <telerik:MediaPlayerSource Path="Yamaha-V50-Rock-Beat-120bpm.wav" />
    </Sources>
</telerik:RadMediaPlayer>

C# - Code behind

protected void Page_Load(object sender, EventArgs e)
{
    RadMediaPlayer2.TitleBar.Visible = false;
}

 

More Resources

  • Forums

    Find answers to thousands of questions or reach out to our active community.

  • Demos

    Browse 1,200+ demos with source code covering basic and advanced scenarios.

  • Sample Applications

    Learn how to integrate the controls in real-world examples.

  • Feedback Portal

    Vote and follow the features you want to see added to Telerik UI for ASP.NET AJAX.

  • User Voice

    Get answers directly from the people who build the product.

  • Documentation

    Benefit from detailed help articles and API references for all controls.

  • Knowledge Base

    Learn how to achieve common scenarios from a multitude of tutorials and working examples.

  • Code Library

    Browse sample projects submitted by Telerik staff and community members.

  • Blog

    Stay up-to-date with the latest functionality, how-to articles and industry trends.

  • Release History

    Up-to-date release notes for all new features and improvements.