Videojs只添加播放控制
Posted
技术标签:
【中文标题】Videojs只添加播放控制【英文标题】:Videojs add only play control 【发布时间】: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" poster="thumb.png"
data-setup="">
<source src="v1.mp4" type='video/mp4'>
</video>
谁能指导我进行播放器自定义?
【问题讨论】:
【参考方案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以上是关于Videojs只添加播放控制的主要内容,如果未能解决你的问题,请参考以下文章