Video.js: Options to hide parts like volume control?

[binarykitchen]

Hello there

I've been looking for options in the API documentation to hide parts of the player, like volume control etc.

Are there any?

[mmcc]

You can go about this a few ways. You could either hide the element using CSS, or disable the component from being drawn in the first place. Either works, but if you potentially want to quickly hide / show an element, you might want to go the CSS route.

CSS:

.vjs-default-skin .vjs-volume-control { display: none; }

During player initialization:

var video = videojs('my_video_1', {
  children: {
    controlBar: {
      children: {
        volumeControl: false 
      }
    }
  }
});

Example

[binarykitchen]

Great thanks. The JS solution is definitely better than the CSS one. Don't want to waste memory for something I do not need.

Are there other children I can set to false? And where is the documentation for this?

[Akkuma]

+1 Documentation is definitely needed for this. I've been searching for all sorts of easier ways to customize and the docs are too sparse on this.

[designbyadrian]

I can't get this to work. I'm passing a JSON string into the attribute like so:

{ "controls": true, "preload": "auto", "children": { "controlBar": { "children": { "FullscreenToggle": false, "LiveDisplay": false, "TimeDivider": false, "DurationDisplay": false } } }, }

I know this works because preload and autoplay true/false work.

[mister-ben]

Each of those starts with lower case: fullscreenToggle, liveDisplay, timeDivider and durationDisplay.

[billmalarky]

It appears the syntax to disable components via options object has been updated. I'm commenting because this issue seems to rank high in google for a lot of component remove/disable queries.

https://github.com/videojs/video.js/blob/master/docs/guides/options.md#component-options

Example of new syntax:

var player = videojs('video-id', {
  controlBar: {
    muteToggle: false
  }
});

[gkatsev]

The old syntax _should_ still work. Please open a new issue if that's not the case.
The new syntax is to make it slightly easier to interact so you don't need to have children in there all over the place.

[MrCsabaToth]

Where is this volumeControl or muteToggle option? Doesn't seem to work at all

[ghost]

I am having trouble converting the horizontal volume control slider to a vertical slider. What am I doing wrong here? I can transform: rotate but then the slider does not work properly. Thanks.

http://codepen.io/webDevRN/pen/eZmzYW

[MrCsabaToth]

I tear all my hair out, so I want to save yours: if you want to hide the volume control or the mute toggle button, you can only hide them together with the volumeMenuButton configuration option. Neither the volumeControl nor the muteToggle works, no traces of them in the source code. I had to look into the source code to realize that. Like so (or the equivalent javascript option):
data-setup='{ "controlBar": { "volumeMenuButton": false } }'

[daviCalavera]

Hi guys, I want to show liveDisplay always, but by default the control is hidden.
I can't put the control visible, but when the content is played the progressbar hide the control.
how can I maintain the liveDisplay control? Thanks.

[piotr-cz]

List of buttons
Description which are hidden by default

[chemoish]

@webDevRN

controlBar: {
  volumeMenuButton: {
    inline: false,
  },
},

[ozette]

Am I the only one who finds the API Documentation foggy?
MrCsabaToth's answer helped me, but where to find this information without browsing through the source. It's not clear to me how to make use of the classes defined on this page http://docs.videojs.com/docs/api/index.html

[EloFr]

@mmcc if I follow this method:
CSS:
.vjs-default-skin .vjs-volume-control { display: none; }
It hides the mute button but the space where it should be is still there, and if you hover a dot appears where the max volume would be.
I found this more effective:
CSS:
.vjs-volume-menu-button {display: none;}

video.js is great, but it's 24630 lines... I'd very much like to remove the things I don't need, like mute/volume/subtitles/screen reader support/etc. (my videos have no sound).

I've tried turning some functions to comment but that somehow breaks everything appart. More doc on what does what would be great.

[mmcc]

@EloFr If you're looking to not have certain control bar components initialize at all, I'd suggest going the route of disabling them in the initializer.

[EloFr]

@mmcc Hi, thanks for the reply.
I was hoping to remove the parts of code I don't need, rather than edit or add to them. 24630 lines is a lot to go through if I need to do a bug fix or modification the day before going into production...

[mmcc]

@EloFr You're welcome to fork and remove whatever you'd like, but fair warning, we're not going to be able to provide much support after you do so.

If you want to completely remove control bar components from the build, you can simply nix the associated import and the component children in the control bar component.

[EloFr]

@mmcc ok, fair enough, I guess I'll leave it be then. Thanks for the replies.

[maxpaj]

Is there any nice way to disable / enable controls with JS while the player is already initialized?

[gkatsev]

You can use the controls() method and by passing it true/false you can turn on or off the controls.

[GreenJoson]

@MrCsabaToth All cases, only you are effective, thank you~

[jkaipr]

JS version for video.js v6.2.4

controlBar: {
  volumePanel: false,
}

Took a while to find out, none of the options listed here worked, found the right option by trying out converting the volume DOM element class name vjs-volume-panel to camel case and removing the prefix...

[lateek35]

I was looking for the same thing and I just found this in the git file : https://github.com/videojs/video.js/blob/master/docs/guides/components.md#default-component-tree

Follow the tree structure and just take care to lowercase the first letter like:
bigPlayButton: false

It seems to work for most the tree item :)

[ahmadawada11]

how to hide the volume control bar only, on videojs 6.5 i tried

children: {
    controlBar: {
      children: {
        volumeControl: false 
      }
    }
  }

but it doesn't work.

[lateek35]

@ahmadawada11 Did you try jkaipr's solution ?

[ahmadawada11]

jkaipr's solution will hide all the volumecontrol what i want is to leave the mute unmute option and hide the volume bar.

[tylerwgreen]

@ahmadawada11 these options gave me just a mute/unmute button.
{ controlBar: { volumePanel: false, muteToggle: true } }

[gkatsev]

As @lateek35 mentinoed, we try to keep the components doc page up-to-date with the current components.
The default volume component in v6 is the VolumePanel which combines the VolumeControl and MuteToggle and then shows/hides the volume slider depending on hover or keyboard focus state.
To hide the volumepanel and show the mutetoggle, you just use standard videojs component options like @tylerwgreen mentioned.

[ahmadawada11]

ok thank you @tylerwgreen @gkatsev .

[maketroli]

Is there someone around?
I need to know how to go into fullscreen mode right after clicking the play button of the video (On Android only).

I've tried something like this:

    var videoPlayer = document.getElementById('myPlayer');
    var user_agent = navigator.userAgent.toLowerCase();
    if(user_agent.indexOf('android') > -1) { // Check for Android.
       videoPlayer.requestFullscreen();
    }

But I am getting this error:

TypeError: videoPlayer.requestFullscreen is not a function. (In 'videoPlayer.requestFullscreen()', 'videoPlayer.requestFullscreen' is undefined)

Any suggestions?

[FiringBlanks]

Is there a way to remove the download button in CSS?

[gkatsev]

The download button is not part of the video.js control bar, it is part of the native chrome controls. If you're using Video.js's control bar you shouldn't have a download button. However, there's a description of how to do it here: https://github.com/videojs/video.js/issues/4234

[marciomarinho]

Is there a way to disable the progress bar only ? I don't won't my users to keep fast forwarding/back warding.

[jgraup]

Is this the best way to remove the picture-in-picture button for browsers that don't support it?

{ controlBar: { pictureInPictureToggle: !!document.pictureInPictureEnabled } }

[gkatsev]

@jgraup yes, that'll work, though, we'll have an update at some point to do it automatically. Also, this isn't the correct issue to ask this. It should either be asked in a new issue or in our slack.