如何在不缓冲的情况下显示满载视频？

Question

嗨，在我的网站https://reportsquestionsznaczki65.000webhostapp.com/tech/o-nas/ 上，我已经尝试了很多方法来让视频在完全加载后显示。只要视频尚未缓冲，我就想制作加载屏幕。我试过了：

[1] $("#video1").on("loadeddata",function(){
        $(".loader-wrapper").fadeOut("slow");
    });

[2] $(window).on("load",function(){
        $(".loader-wrapper").fadeOut("slow");
    });

它们都不起作用，因为它们在加载框架时都在加载页面，然后它开始缓冲，直到它播放很长时间（它被设置为自动播放）。

我想在视频开始时淡化加载效果。当视频被缓存时，它工作得很好。最奇怪的是在 Edge 上，因为加载后视频不显示，然后在 3 秒后显示自己（我删除了我的历史记录并按 ctrl + F5 删除缓存）。

有没有可能实现它。也许视频太大（7.93MB）无法开始？

Answer 1

您需要一种方法来判断视频是否已加载，如果已加载，则可以显示它。试试这个：

var video = document.getElementById("video-id-name");

if ( video.readyState === 4 ) {
    // loaded
}