发表新帖
发表新帖

Videojs add only play control

后端 未结
关注
5 746
情深已故
情深已故 2021-02-04 21:03

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
相关标签:
5条回答
  • 渐次进展
    2021-02-04 21:43

    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.

    0 讨论(0)
  • 刺人心
    2021-02-04 21:50

    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.

    0 讨论(0)
  • 忘了有多久
    2021-02-04 21:53

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

    .vjs-default-skin.vjs-has-started .vjs-control-bar {
visibility: hidden;
}
    0 讨论(0)
  • 鱼传尺愫
    2021-02-04 21:55

    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

    0 讨论(0)
  • 梦谈多话
    2021-02-04 21:55

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

    0 讨论(0)
 看不清?
提交回复
热议问题