Videojs只添加播放控制答案

【问题标题】：Videojs add only play controlVideojs只添加播放控制
【发布时间】：2012-11-11 13:41:31
【问题描述】：

我正在使用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>

谁能指导我进行播放器自定义？

【问题讨论】：

标签： html html5-video video.js

【解决方案1】：

我能够做到这一点的方法是在我的页面的 CSS 中将特定控件的 css 类设置为 display: none;。在 video-js.css 被链接后，我的页面的 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;，这样就可以解决问题。虽然，我只会使用 !important 作为最后的手段。

注意：一旦点击播放，上述内容不会删除暂停按钮，也不会删除大播放按钮。删除这些时还有更多 UI 考虑因素。希望这将有助于一些人自定义 Video.js 控制栏。

【讨论】：

虽然最好首先根据@b.kelley禁用控件的JS。

【解决方案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

【讨论】：

我收到ReferenceError: _V_ is not defined。 vjs 用于开发人员
你应该可以用 videojs 替换 V 或 vjs
较新版本的 videojs 需要通过getComponent 函数访问不同的组件。例如上面的脚本可以写成：videojs.getComponent('ControlBar').prototype.options_.children = ['playToggle'];

【解决方案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 } }'

编辑：如评论所述，options 的 children 的行为已被简化和更改，另请参阅文档：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

但请确保您在删除播放选项时有替代方案或适当的设置 (;

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

【讨论】：

谢谢@Sandra，我可以通过向播放器添加自定义 css 来管理它。
您不必再使用这些children 位：<video ... data-setup='{ "controlBar": { "muteToggle": false } }'></video>。见：github.com/videojs/video.js/blob/stable/docs/guides/…

【解决方案4】：

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

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

【讨论】：

【解决方案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 标记中设置控件。显然，通过这种方式，您可以修改自己的自定义按钮，链接的解决方案就是这样做的。

【讨论】：

对于所有事件处理程序原教旨主义者，您要么知道该怎么做，要么关注this：p