Video.js 类在加载时隐藏视频答案

【问题标题】：Video.js Classes to Hide Video While LoadingVideo.js 类在加载时隐藏视频
【发布时间】：2014-06-18 16:07:51
【问题描述】：

我正在尝试在视频加载时隐藏视频（例如，只有加载微调器的黑色窗口）。我发现唯一有意义的类是 .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 当前状态的明确答案。

【问题讨论】：

在github.com/videojs/video.js/pull/1351 开始修复此问题。等待业主的反馈。

标签： html5-video video.js

【解决方案1】：

我添加了 vjs-waiting 类来实现这一点，现在 vjs-waiting 可以在 css 中使用来显示和隐藏内容，请参阅 pull-request 了解更多详细信息。

例子：

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

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

【讨论】：

【解决方案2】：

你可以使用 vjs-waiting

.vjs-waiting {visibility: hidden;}

【讨论】：

在这个问题没有得到解答后，我做了添加 vjs-waiting 的工作。它于 8 月 1 日合并。所以我不接受你的回答，因为你篡夺了我的工作。

【解决方案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()
    }
}, [])

希望对您有所帮助！ =)

【讨论】：