Videojs add only play control

Question

I am using Video.js to play videos in my web page. I want to customize player controls to only play button.

my code is

<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">

<script src="http://vjs.zencdn.net/c/video.js"></script>

<video id="my_video_1" class="video-js vjs-default-skin" controls
                    preload="auto" width="320" height="240" poster="thumb.png"
                    data-setup="{}">
                    <source src="v1.mp4" type='video/mp4'>
                    </video>

Can any one guide me in player customization?

score 9 · Answer 1 · answered Jun 28 '13 at 18:48

The way I was able to do it was by setting the css class for specific controls to display: none; in my page's CSS. My page's CSS gets linked AFTER the video-js.css gets linked.

/* Video.js Controls Style Overrides */
.vjs-default-skin .vjs-progress-control,
.vjs-default-skin .vjs-time-controls,
.vjs-default-skin .vjs-time-divider,
.vjs-default-skin .vjs-captions-button,
.vjs-default-skin .vjs-mute-control,
.vjs-default-skin .vjs-volume-control,
.vjs-default-skin .vjs-fullscreen-control {
    display: none;  
}

If you can't link your page's CSS after the video-js.css gets linked, you can use display: none !important; instead and that should do the trick. Although, I'd only use !important as a last resort.

Note: The above does not remove the pause button once play is hit nor the big play button. There are more UI considerations when removing those. Hopefully this will help some people with customizing the Video.js control bar.

Though it's better to disable the JS for the controls according to @b.kelley in the first place. — Design by Adrian, Nov 19 '14 at 17:24

score 4 · Accepted Answer · answered Nov 29 '12 at 21:25

The easiest way I have found is modifying the prototype for the class as such.

Insert

<script>
    _V_.ControlBar.prototype.options.components = {'playToggle':{}}
</script>

right after

<script src="http://vjs.zencdn.net/c/video.js"></script>

This will remove every control ( including the duration, time remaining and seek bar ) besides the play toggle button

If you would like other things, you may pick and choose from the defaults (a few of these are set to hidden on the default skin)

options: {
    components: {
        "playToggle": {},
        "fullscreenToggle": {},
        "currentTimeDisplay": {},
        "timeDivider": {},
        "durationDisplay": {},
        "remainingTimeDisplay": {},
        "progressControl": {},
        "volumeControl": {},
        "muteToggle": {}
    }
}

Or dig through the controls.js file on git hub https://github.com/zencoder/video-js/blob/master/src/controls.js

im getting `ReferenceError: _V_ is not defined`. `vjs` is for dev — t q, Jun 23 '15 at 21:03
Newer versions of videojs require accessing different components via the `getComponent` function. e.g. the script above could be written as: `videojs.getComponent('ControlBar').prototype.options_.children = ['playToggle'];` — kingliam, Oct 11 '16 at 20:50

Sandra · Answer 3 · 2017-07-30T13:02:33.127

It seems there is also an option to hide/show the controlBar items via data-setup

The components are listed at https://github.com/videojs/video.js/blob/stable/docs/guides/components.md
and the description of options https://github.com/videojs/video.js/blob/stable/docs/guides/options.md

<video data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'...>

the controlBar is passed as follows:

data-setup='{ "controlBar": { "muteToggle": false } }'

Edit: as commented, the behaviour of children for options has been simplified and changed, see also the documentation: https://github.com/videojs/video.js/blob/master/docs/guides/options.md#component-options For the background and timings of these changes, see https://github.com/videojs/video.js/issues/953

the css selector for the big play button is

.vjs-default-skin .vjs-big-play-button

but please make sure you have alternatives or an appropriate setup when you remove the play option (;

mine appears to hide the controls by default(?)

Thank you @Sandra i am able to manage it by adding custom css to the player. — Ramesh Paul, Jan 09 '15 at 04:53
You don't have to use these `children` bits any more: ``. See: https://github.com/videojs/video.js/blob/stable/docs/guides/options.md#component-options — dain, Jul 20 '17 at 14:38

score 1 · Answer 4 · answered Oct 30 '13 at 07:57

1

This also removes all the control bar but not the big play button

.vjs-default-skin.vjs-has-started .vjs-control-bar {
visibility: hidden;
}

answered Oct 30 '13 at 07:57

user2935340

11
1

score 1 · Answer 5 · edited Jan 21 '15 at 21:52

1

If you also want to get rid of the play button, and just have the video play and stop on clicking, check out this alternative solution, which I adapted.

Insert into your <head> (or elsewhere if not possible) ...

<script type="text/javascript">
    function vidplay(me) {
       if (me.paused) {
          me.play();
       } else {
          me.pause();
       }
    }
</script>

then call from your video, e.g.

<video onclick="javascript: vidplay(this)" ...>

Make sure that you do not set the controls in your video tag. Obviously this way, you can fiddle in your own custom button, which the linked solution does.

edited Jan 21 '15 at 21:52

Ben

10,056
5
41
42

answered Jan 21 '15 at 21:38

victor_v

95
8

For all you event handler fundamentalists you either know how to do it, or follow [this](http://icant.co.uk/articles/pragmatic-progressive-enhancement/#build) :p – victor_v Jan 21 '15 at 21:47

Videojs add only play control

5 Answers5

Linked