试图在JavaScript/jQuery中无缝循环浏览数量不确定的视频

我有一个非常短的视频，我想循环通过数量待定

我有以下HTML：

<video class="bgvid bgvid--0 bgvid--visible" poster="<?= URL ;?>img/vidframe.jpg" src="1920x800.webm" playsinline muted></video>
<video class="bgvid bgvid--1 bgvid--hidden" poster="<?= URL ;?>img/vidframe.jpg" src="1920x800.2.webm" playsinline muted></video>
<video class="bgvid bgvid--2 bgvid--hidden" poster="<?= URL ;?>img/vidframe.jpg" src="1920x800.2.webm" playsinline muted></video>

在my JS中，我通过执行以下操作开始播放我的初始视频：

$('.bgvid--0').get(0).play();

然后在5秒钟后使用CSS转换并通过切换bgvid（可见和bgvid）隐藏类I“淡出”当前“活动”视频，并开始播放和“淡入”以下视频，如下所示：

.bgvid--hidden { opacity: 0; }
.bgvid--visible { opacity: 1; }

setTimeout(function(){
            $('.bgvid--0').removeClass('bgvid--visible').addClass('bgvid--hidden');
        }, 5000);

setTimeout(function(){
            $('.bgvid--1').get(0).play();
            $('.bgvid--1').removeClass('bgvid--hidden').addClass('bgvid--visible');
        }, 4500);

请注意，第二个超时时间比第一个稍短，以便在淡出活动视频之前在下一个视频中淡出，从而创建无缝过渡的印象

---

我读过关于“已结束”事件的报道，但在视频结束之前必须开始过渡。我怎样才能把它变成某种循环，通过不确定数量的视频以这种方式循环

您可以使用

videoElement.duration

获取视频长度，使用

videoElement.currentTime

获取当前时间

您可以使用HTML音频/视频

timeupdate

事件监视当前时间是否达到最后5秒，然后开始转换到下一个视频

videoElement.ontimeupdate = function() {
    if (videoElement.currentTime >= videoElement.duration - 5) {
        startTransition();
    }
};

您可以只使用持续时间，并简单地相应地设置超时，但没有任何东西可以保证30秒的视频会在30秒后真正结束。它可以暂停，也可以缓冲一段时间。但是这个方法会告诉你什么时候视频距离结束还有5秒