Videojs add only play control

问题

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?

回答1:

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

回答2:

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.

回答3:

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(?)

回答4:

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

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

回答5:

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.

来源：https://stackoverflow.com/questions/13524879/videojs-add-only-play-control

标签

html5

html5-video

video.js