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

Question

有没有可能在开始时移到中间的播放按钮(是的，我知道我可以只移除css类)，而不是显示底部的播放条？

基本上，我想要实现的是显示视频(与海报图像)和播放菜单已经显示，当我进入一个页面与视频。

提前感谢！

更新：

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

这里有一张图片解释了这个问题：

​

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中实现视频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()
    }
}, [])

希望能有所帮助！=)