我知道以前有人问过类似的问题，但没有人能够解决这个具体问题，他们只能解决部分问题。
我想实现以下目标：
video1，video2，video3，video4和video5。video1完成后video2播放，然后video3，video4，video5然后再次从 开始video1。video3，那就再继续打video4，video5，video1，video2等。我已经能够编写一个代码来完成从第 1 点到第 4 点的所有操作，但我无法解决第 5 点！
这是我的代码。我已将background-color视频的设置为使视频red之间的间隙可见 - 您将能够在每个视频的播放之间看到红色闪光。这就是我需要解决的问题：我需要消除那一秒的差距，以便播放绝对无缝。
var vidElement = document.getElementById('video');
var vidSources = [
"http://www.w3schools.com/html/mov_bbb.mp4",
"http://www.w3schools.com/html/movie.mp4"
];
var activeVideo = Math.floor((Math.random() * vidSources.length));
vidElement.src = vidSources[activeVideo];
vidElement.addEventListener('ended', function(e) {
// …我有一段 jQuery 代码，当元素滚动到视口中时，它会向元素添加一个 css 类；当元素滚动出视口时，会删除该类。
到目前为止，代码的工作原理如下：
到目前为止，一切都很好。但我想要实现的是：
滚动到视图中：
滚动到视图之外：
打扫干净：
评论中建议使用Intersection Observer API，在阅读更多相关内容后，我相信它提供了满足要求的最佳方法。
这是我的代码（以整页打开 - 预览效果不佳）。您还可以在 jsFiddle 上找到相同的代码。
function inView(opt) {
if (opt.selector === undefined) {
console.log('Valid selector required for inView');
return false;
}
var elems = [].slice.call(document.querySelectorAll(opt.selector)),
once = opt.once === undefined ? true : opt.once,
offsetTop = opt.offsetTop === undefined ? 0 : opt.offsetTop,
offsetBot = opt.offsetBot === undefined ? 0 : opt.offsetBot,
count = elems.length, …我有一段代码，根据元素是从顶部还是底部滚动进入或退出视口，向元素添加不同的 css 类。
它使用Intersection Observer是因为它应该比scroll事件更好地处理大量元素。
但是，我在使用此代码时遇到了两个问题：
这很奇怪，因为 IntersectionObserver 应该可以在 Safari 甚至 iOS 上的移动浏览器上正常工作。
您可以在 jsFiddle 上找到代码或在此处查看代码段：
const config = {
// Add root here so rootBounds in entry object is not null
root: document,
// Margin to when element should take action
rootMargin: '-50px 0px',
// Callback will be fired 30 times during intersection
threshold: [...Array(30).keys()].map(x => x / 29)
};
let observer = new IntersectionObserver(function(entries, observer) {
entries.forEach((entry, …