How to create a player with custom controls

warning: these are customizations outside the support scope

Go to your player configurations menu and create a configuration

Select skin-custom-controls and input this in Misc > Extra HTML in Player

<div class="con-playpause">
<div class="custom-play-btn">
<div class=" play-button-con" style="color: #cb1919; width: auto;"><figure class="" style=" ">&#9658;</figure></div>
</div>
<div class="custom-pause-btn">
<div class=" play-button-con " style=""><figure class="" style="">&#9616;&nbsp;&#9612;</figure></div>
</div>
</div>
<style>
body .audioplayer .audioplayer-inner{ height: 30px; }
body .audioplayer.skin-customcontrols{ position:relative; }
.con-playpause figure{ position:absolute; top: 0; left:0; padding:0; margin:0; }
</style>

Then, if you want your player to not center, just go to Misc > Extra Classes and enter  do-not-center-controls

Attached is the player configuration ready made – https://www.dropbox.com/s/p5257ppmvg8cqsd/dzsap-slider-custom-controls-player%20%281%29.txt?dl=0

 

Article Attachments

Was this article helpful?

Yes No

Related Articles

6 Comments

  1. Haddon Kime

    “Select skin-custom-controls and input this in HTML” – Where do I input this HTML? I don’t see an obvious field to do this…

    1. admin

      Sorry

      It’s Extra HTML in Player,

      Should appear from next update

  2. Ward

    Did this Extra HTML in Player happen? I’m on 4.66 and I still don’t see it.
    Thanks

  3. Jorge Schulz

    In the latest versions I can’t find “Extra HTML in Player” in “Misc”. I need to add two buttons, one to go forward 30 seconds and the other to go back 30 seconds.
    Is this possible with custom controls?
    Could you help me with the code?

Leave A Comment?