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

Question

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

基本上我想要实现的是在我进入带有视频的页面时显示视频(带有海报图像)和播放菜单.

提前致谢!

更新:

安德鲁说,我做了,现在它几乎正常工作.现在酒吧就在那里但不幸的是在游戏控制栏上面有一个空的空间.当我按下播放时,海报图像变为实际电影,空白空间充满了视频,但当它显示海报时,它并未完全填满.为什么是这样？

这是解释问题的图像:

Answer 1

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

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

为什么不在CSS中同时做这两件事？只需在CSS底部添加以下行.

关闭大播放按钮:

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

然后打开菜单:

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

Answer 3

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

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