Question

我正在使用Video.js在我的网页上播放视频。我想自定义播放器控件只播放按钮。

我的代码是

<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>

任何人都可以指导玩家定制吗？

Answer 1

我能够做到这一点的方法是在我的页面的CSS中将特定控件的css类设置为display: none;。我的页面的CSS在视频-js.css被链接之后被链接。

/* 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;  
}

如果在video-js.css被链接后无法链接页面的CSS，则可以使用display: none !important;代替，这应该可以解决问题。虽然，我只会使用！重要作为最后的手段。

注意：上面的内容不会在点击播放时删除暂停按钮，也不会删除大播放按钮。删除它们时需要考虑更多UI。希望这可以帮助一些人定制Video.js控制栏。

Answer 2

我发现的最简单方法是修改类的原型。

插入

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

之后

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

除了播放切换按钮

之外，这将删除每个控件（包括持续时间，剩余时间和搜索栏）

如果你想要其他东西，你可以选择默认设置（其中一些设置为隐藏在默认皮肤上）

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

或者浏览git hub上的controls.js文件 https://github.com/zencoder/video-js/blob/master/src/controls.js

Answer 3

似乎还有一个选项可以通过data-setup

隐藏/显示controlBar项目

组件列于 https://github.com/videojs/video.js/blob/stable/docs/guides/components.md
以及选项https://github.com/videojs/video.js/blob/stable/docs/guides/options.md

的说明

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

传递controlBar如下：

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

修改：评论时，children options的行为已经过简化和更改，另请参阅文档：https://github.com/videojs/video.js/blob/master/docs/guides/options.md#component-options 有关这些更改的背景和时间安排，请参阅https://github.com/videojs/video.js/issues/953

大播放按钮的css选择器是

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

但请在删除播放选项时确保您有其他选择或适当的设置（;

我似乎默认隐藏控件（？）

Answer 4

这也会删除所有控制栏，但不会删除大播放按钮

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

Answer 5

如果你还想摆脱播放按钮，只是让视频播放并停止点击，请查看我改编的this替代解决方案。

插入<head>（或其他地方，如果不可能）......

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

然后从您的视频中拨打电话，例如

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

确保您未在video标记中设置控件。显然，通过这种方式，您可以调整自己的自定义按钮，链接解决方案可以这样做。

Videojs仅添加播放控件

5 个答案: