html - Videojs 仅添加播放控件

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 在 vi​​deo-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; 代替，这应该可以解决问题。虽然，我只会使用 !important 作为最后的手段。

注意:一旦播放被击中，上面并没有删除暂停按钮，也没有删除大播放按钮。删除这些时有更多的 UI 注意事项。希望这会帮助一些人自定义 Video.js 控制栏。