Vertical Slider Not Working

[nmatthew123]

I am trying to make my volumeBar vertical by using this code posted here : #477
This is how I am setting up my video player

var myPlayer = videojs("video-player", {
    'children': {
      'controlBar': {
        'children': {
          'volumeControl': {
            'children': {
              'volumeBar' : {
                vertical: true
              }
            }
          }
        }
      }
    }
});

For some reason my video menu bar disappers. Do you have any idea what is going on? I've been working on this for a day and Im not sure what I should do. I haven't worked with videojs before so I'm a complete noob.

[heff]

Did you figure this out?

[nmatthew123]

No I have not gotten this to work.

[heff]

You would actually need to enable the volumeMenuButton, and disable the volume control.
https://github.com/videojs/video.js/blob/v4.4.2/src/js/control-bar/control-bar.js#L23
They work pretty differently. You may have to add styles as well to make it look right. I don't know that it's fully implemented yet.

[RushirajDYadav]

Any information about making video js volume bar control to make it vertical ??

[ksheurs]

It seem enabling volumeMenuButton also enables volumeControl (even if explicitly is disabled). resulting in two volume controls. any ideas?

i'd like one volume control (menu based) and then transform rotate the volumeBar within that menu.

[mmcc]

@ksheurs - I can't reproduce: example. Mind putting up a JSBin or something along those lines that shows the issue?

[ksheurs]

oh man you're too fast :) was just coming back to reply with that i accidentally mixed up muteToggle and volumeControl. thank you!

is it possible to set the volumeBar within the menu to vertical, without re-enabling the main/default volume bar (not within the menu)? something like below..

'volumeBar' : {
   vertical: true
 }

[ksheurs]

example i get http://cl.ly/image/363l3K2H1a1O with the following:

children: {
  controlBar: {
    children: {
      muteToggle: false,
      volumeControl: false,
      volumeMenuButton: {
      children: {
         volumeBar: {
           vertical: true
         }
       }
     }
   }
  }
}

[mmcc]

This is a bit of a tricky one. You don't need to nest the volumeBar options under children within volumeMenuButton. You also need to add some styles to actually rotate the slider. Putting it all together :)

[ksheurs]

very nice, thank you sir!

[mmcc]

No prob! Apologies for the kinda wonky config block there...we're still working to clean that up. This is kinda one of those things that you can do but we don't necessarily want to officially document it yet (for reasons like this).

[whitecodewarrior]

Perfect solution, Thank you for sharing, mmcc !!!

[ghost]

Evaluate new skin video-js-6.2.4

https://github.com/maluklo/Skin-video-js-6.2.4