Question

我试图在视频加载时隐藏视频（例如，只有加载微调器的黑色窗口）。我发现的唯一一个类是有意义的是.vjs-has-started，但加载屏幕仍然显示以下CSS。我也没有在javascript api中看到满足这种需求的任何内容（抱歉，如果我错过了什么）。

.video-js {
    display: none;
    visibility: hidden;
}
.video-js.vjs-has-started {
    display: block;
    visibility: visible;
}

我还尝试将.vjs-playing添加到混音中，而不是与.vjs-has-started结合使用。关于让它发挥作用的任何想法或关于它为什么赢得目前的原因都会有所帮助。如果我需要，我可以将其添加到video.js，如果它还没有，但我首先想要获得关于此功能的video.js当前状态的最终答案。

Answer 1

我添加了vjs-waiting类以便能够完成此操作现在可以在css中使用vjs-waiting来显示和隐藏内容，请参阅pull-request以获取更多详细信息。

示例：

.vjs-waiting {
  visibility: hidden;
  background: transparent;
}
.vjs-loading-spinner {
  display: none !important;
}

参考 - https://github.com/videojs/video.js/pull/1351

Answer 2

您可以使用vjs-waiting

.vjs-waiting {visibility: hidden;}

Answer 3

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

我在 React Hooks 中实现了 Video JS，所以我解决了将 loadingSpinner 设置为 false 的问题；

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

希望有帮助！ =)

Video.js加载时隐藏视频的类

3 个答案: