2

I want to make JWplayer skin like this

skin design

and this is my current progress

my current jwplayer skin

I have been looking for references to switch the order of icon / button on controlbar, according to the jwplayer documentation, the buttons on controlbar divided into 3 groups middle left and right . I want to move some of the button on the left group to the right group.

jwplayer("player").setup({
 skin: {
   url:"jwplayer/skins/player.css",
   name: "player"
},
width: "100%",
height: 100,
playlist: [{
  "file": "katachi.mp3",
  "title": "Shugo Tokumaru",
  "description": "Katachi"
},
{
  "file": "vektor.mp3",
  "title": "Shugo Tokumaru",
  "description": "Vektor feat"
},
{
  "file": "decorate.mp3",
  "title": "Shugo Tokumaru",
  "description": "Decorate"
}]
});

So, is there a way to set the order of the buttons in the JWPlayer controlbar?

Kusum
  • 501
  • 2
  • 11
  • 30
fuad makarim
  • 73
  • 1
  • 6

2 Answers2

1

If your player is HTML-based and not FLASH-based, than you have full access to HTML layout of player.

All you have to do is reorder elements:

  1. Inspect elements to see some specific classes/ID's or just simply element indexes
  2. Use some jQuery/js to reorder elements (question about that)
Community
  • 1
  • 1
Justinas
  • 41,402
  • 5
  • 66
  • 96
  • hi @Justinas, ty for the answer. Its simple yet effective. but first we need to call JWPlayer API to implement the DOM changes. example: `jwplayer().on('ready', function() { $(".class.PrevButton").insertBefore(".class.PlayButton"); });` i hope JWPlayer has configuration option for this buttons reordering later. – fuad makarim Jun 30 '16 at 07:37
  • @fuadmakarim well, it's obvious that you first must have loaded player elements to make any changes with them... – Justinas Jun 30 '16 at 07:42
0

A way how to add elements to HTML5 based player, you can take a look at following solution.

Community
  • 1
  • 1
lidox
  • 1,901
  • 3
  • 21
  • 40