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

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

我试过这个（Javascript）：

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

我使用类

微调器
创建了一个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;
}

视频自定义等待旨在在视频加载完成时隐藏微调器，但正如您所看到的，它不起作用

我怎样才能修好它？当视频暂停加载时，例如当用户跳到视频的某一部分并需要加载该部分时，如何使用微调器

html部分

这是div旋转器，我想放在播放器上的旋转器

和我的视频代码：

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

使用此选项，并根据需要设置顶部和左侧


var video=document.getElementById（“视频”）；
video.onwaiting=函数（）{
document.getElementById（“微调器”）.style.display=“块”
}
.main{
高度：适合的内容；
宽度：适合的内容；
}
斯宾纳先生{
位置：绝对位置；
顶部：100px；
左：100px；
显示：无；
边框：8px实心rgba（0,0,0,1）；
左边框颜色：红色；
高度：60px；
宽度：60px；
边界半径：50%；
z指数：999；
动画：无限旋转线性；
动画延迟：0毫秒；
}
@关键帧旋转{
从{
变换：旋转（0度）；
}
到{
变换：旋转（360度）；
}
}

this.removeClass（视频自定义等待”）
应该是
this.removeClass（“视频自定义等待”）
很抱歉，我把它放在这里，但是在脚本中是正确的，你在div微调器中应用/删除类
视频自定义等待
什么？在视频播放器中，我需要在视频播放时隐藏它，并在视频加载时显示它
<video controls class="video" id="video"  autoplay disablepictureinpicture tabindex="-1" >

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

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