如何在没有缓冲的情况下显示满载的视频

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
}