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

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

要打开菜单，请使用flex而不是block，因此它不会将控件栏分成几部分：

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

Answer 4

嘿，我也一直在努力解决这个问题，文档根本不直观！

我在 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 5

对于那些可能一直在寻找答案的人来说，这对我来说在JW Player中起了作用：

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