button - 移除大播放按钮并显示底部播放菜单

Question

是否有可能在开始时删除到中间播放按钮（是的，我知道我可以删除 css 类）而是显示底部播放栏？

基本上我想要实现的是显示视频（带有海报图像）和当我进入带有视频的页面时已经显示的播放菜单。

提前致谢！

更新：

我按照安德鲁所说的做了，现在它几乎可以工作了。现在栏在那里，但不幸的是，播放控制栏上方有一个空白区域。当我按下播放时，海报图像变为实际电影并且空白空间充满了视频，但是当它显示海报时它并没有完全填满。为什么是这样？

这是解释该问题的图像：

Answer 1

为什么不在css中两者都做？只需在 css 的底部添加以下行。

关闭大播放按钮：

.vjs-default-skin.vjs-paused .vjs-big-play-button 
{
display: none;
}

然后打开菜单：

.vjs-default-skin.vjs-paused .vjs-control-bar
{
display: block;
}

Answer 2

接受的答案对我不起作用，我怀疑我的 video.js 版本更新。对于 video.js 5.16 的最新答案：

.video-js .vjs-big-play-button {
    display: none;
}
.video-js .vjs-control-bar {
    display: flex;
}

Answer 3

嘿，我也一直在为此苦苦挣扎，文档一点也不直观！

我在 React Hooks 中实现 Video JS，所以我解决了bigPlayButton设置为 false；

useEffect(() => {
    let player = videojs('my-player',{
        autoplay: 'muted',
        sources: [
            {
                src: videoUrl, // m3u8 format
                type: "application/x-mpegURL"
            }
        ],
        controlBar: false,
        loadingSpinner: false,
        bigPlayButton: false
      });
    player.play()
    return () => {
        player.dispose()
    }
}, [])

希望能帮助到你！=)

Answer 4

要打开菜单，请使用 flex 而不是块，这样它就不会将控制栏分成几块：

.vjs-default-skin.vjs-paused .vjs-control-bar
{
    display: flex;
}

Answer 5

对于任何可能一直在寻找答案的人来说，这对我在 JW Player 中有用：

#PlayVid_display_button_play {display:none!important;} #PlayVid_display_button {background:none!important;}