加载视频时如何添加微调器？使用 Javascript答案

【问题标题】：How to add a spinner when the video is loading? with Javascript加载视频时如何添加微调器？使用 Javascript
【发布时间】：2021-05-05 14:34:39
【问题描述】：

我有一个自定义播放器，我需要知道如何为其添加微调器。代码来自另一个人，但在教程中他没有展示如何做一个加载微调器，现在我不知道如何用java创建。

我试过这个（Javascript）：

video.on("waiting", function ()
{
    this.addClass("video-custom-waiting");
});
video.on("playing", function ()
{
    this.removeClass("video-custom-waiting");
});

但没有用，即使使用此代码，它仍会显示微调器。也许这段代码在我的情况下不起作用，我不知道。

我用 spinner 类创建了一个 div，并将这些类放在这样的位置：

.video-custom-waiting .spinner{
display:block;
}
.spinner{
position:absolute;
top:48%;
left:48%;
display:none;
border:8px solid rgba(0,0,0,.1);
border-left-color:red;
height:60px;
width:60px;
border-radius:50%;
animation: spin 1s linear infinite;
z-index:999;
}

Video-custom-waiting 旨在在视频加载完成时隐藏微调器，但正如您所见，它不起作用。

我该如何解决？以及当视频暂停加载时如何使用微调器，例如当用户跳转到视频的一部分并且他需要加载这部分时？

html部分。

这是 div 微调器，我想放在播放器上的微调器 <div class="spinner"></div>

还有我的视频代码：

<video controls class="video" id="video"  autoplay disablepictureinpicture tabindex="-1" >

【问题讨论】：

this.removeClass(video-custom-waiting") 应该是this.removeClass("video-custom-waiting")
很抱歉把它放在这里，但在脚本中是正确的
你在应用/删除类 video-custom-waiting 到和从什么？
div 微调器。从视频播放器
我需要在视频播放时隐藏它，并在视频加载时显示

标签： javascript html

【解决方案1】：

const video = document.querySelector('video');

video.onwaiting = (event) => {
  console.log('Video is waiting for more data.');
};

【讨论】：

【解决方案2】：

使用这个，根据需要设置top和left。

var video = document.getElementById("video");
        video.onwaiting = function(){
            document.getElementById("spinner").style.display="block"
        }

.main{
            height: fit-content;
            width: fit-content;
        }
        .spinner{
            position:absolute;
            top:100px;
            left:100px;
            display:none;
            border:8px solid rgba(0,0,0,.1);
            border-left-color:red;
            height:60px;
            width:60px;
            border-radius:50%;
            z-index:999;
            animation: rotate linear 2s infinite;
            animation-delay: 0ms;
        }
        @keyframes rotate{
            from{
                transform: rotateZ(0deg);
            }
            to{
                transform: rotateZ(360deg);
            }
        }

 <section class="main">
    <video controls width="300" height="300" class="video" id="video" autoplay disablepictureinpicture tabindex="-1">
        <source src="https://drive.google.com/uc?id=1rAHEQPrg1nY0xC3Q0UgVuqSgVWvFiY0a" type="video/mp4">
    </video>
    <div class="spinner" id="spinner">
    </div>
    </section>

【讨论】：