Html Videojs 只添加播放控制
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13524879/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Videojs add only play control
提问by Ramesh Paul
I am using Video.jsto play videos in my web page.
I want to customize player controls to only play button.
我正在使用Video.js在我的网页中播放视频。我想自定义播放器控件以仅播放按钮。
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?
任何人都可以指导我进行播放器定制吗？
采纳答案by b.kelley
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
或者在 git hub https://github.com/zencoder/video-js/blob/master/src/controls.js上挖掘 control.js 文件
回答by Derek
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.
我能够做到这一点的方法是display: none;在我的页面的 CSS 中设置特定控件的 css 类。我的页面的 CSS 在 video-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;
}
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.
如果在链接 video-js.css 后无法链接页面的 CSS，则可以display: none !important;改用它，这应该可以解决问题。虽然，我只会使用 !important 作为最后的手段。
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.
注意：一旦点击播放或大播放按钮，上述内容不会删除暂停按钮。删除这些时有更多的 UI 考虑因素。希望这会帮助一些人自定义 Video.js 控制栏。
回答by Sandra
It seems there is also an option to hide/show the controlBar items via data-setup
似乎还有一个选项可以通过以下方式隐藏/显示 controlBar 项目 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
组件列在
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" }'...>
the controlBaris passed as follows:
在controlBar传递如下：
data-setup='{ "controlBar": { "muteToggle": false } }'
Edit: as commented, the behaviour of childrenfor optionshas been simplified and changed, see also the documentation: https://github.com/videojs/video.js/blob/master/docs/guides/options.md#component-optionsFor the background and timings of these changes, see https://github.com/videojs/video.js/issues/953
编辑：正如所评论的，childrenfor的行为options已被简化和更改，另请参阅文档：https: //github.com/videojs/video.js/blob/master/docs/guides/options.md#component-options对于这些变化的背景和时间，见https://github.com/videojs/video.js/issues/953
the css selector for the big play button is
大播放按钮的 css 选择器是
.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(?)
我的似乎默认隐藏控件（？）
回答by victor_v
If you also want to get rid of the play button, and just have the video play and stop on clicking, check out thisalternative solution, which I adapted.
如果您还想去掉播放按钮，只播放视频并在点击时停止，请查看我改编的这个替代解决方案。
Insert into your <head>(or elsewhere if not possible) ...
插入您的<head>（或其他地方，如果不可能）...
<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 videotag. Obviously this way, you can fiddle in your own custom button, which the linked solution does.
确保您没有在video标签中设置控件。显然，通过这种方式，您可以摆弄自己的自定义按钮，链接的解决方案就是这样做的。
回答by user2935340
This also removes all the control bar but not the big play button
这也会删除所有控制栏，但不会删除大播放按钮
.vjs-default-skin.vjs-has-started .vjs-control-bar {
visibility: hidden;
}
