如何在不緩沖的情況下顯示滿載視頻？

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
}