Question

我有很多非常短的视频，我想循环播放。

我有以下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>

在我的CSS中，我使用类bgvid显示一个视频 - 可见，并使用类bgvid隐藏所有其他视频 - 隐藏如下：

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

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

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

然后在5秒后使用CSS过渡并通过切换bgvid - visible和bgvid - 隐藏的类I＆＃34;淡出＆＃34;当前＆＃34;活跃＆＃34;视频，并开始播放和＆＃34;淡入＆＃34;以下视频如下：

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);

请注意，第二次超时比第一次超短，以便在淡出活动视频之前通过淡入下一个视频来创建无缝转换的印象。

我已经读过＆＃34;结束了＆＃34;事件，但转换必须在视频结束之前开始。我如何将其变成某种循环，以这种方式循环通过一定数量的视频？

Answer 1

您可以使用videoElement.duration获取视频的长度，使用videoElement.currentTime获取当前时间。

您可以使用HTML音频/视频timeupdate事件来监控当前时间是否达到最近5秒，然后开始转换到下一个视频。

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

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

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

1 个答案: