Как удалить зацикливание при создании HTML5-video, чтобы использование рабочей памяти не увеличивалось?

Мне нужно, чтобы между воспроизведением несколько идущих друг за другом видео не было прерываний и поэтому я с помощью свойства preload = 'auto' во время воспроизведения первого видео подгружаю уже следующее видео и затем сменяю одно на другое посредством функции Node.replaceChild().

Но трудность заключается в том, что где-то происходит зацикливание и если открыть в Windows диспетчер задач на вкладке производительность, то мы увидим, что использование рабочей памяти постоянно увеличивается и видео при воспроизведении тормозят (не каждое и не всегда). Всего этого не должно быть и не наблюдается в самом последнем примере (внизу вопроса).

//функция используется в EventListener "loadedmetadata", в createVideoElement() 
function createNextVideo() 
{ 
    if(++activeVideo == 2) 
        activeVideo = 0; 
 
    this.nextVideoElement = createVideoElement(); 
    this.nextVideoElement.src = vidSources[activeVideo]; 
    this.nextVideoElement.pause(); 
} 
 
//функция используется в EventListener "ended", в createVideoElement() 
function startNextVideo() 
{ 
    var oldVideo = videoContainer.firstChild; 
     
    this.nextVideoElement.play(); 
    videoContainer.replaceChild(this.nextVideoElement, oldVideo); 
     
    oldVideo.removeEventListener('loadedmetadata', createNextVideo); 
    oldVideo.removeEventListener('ended', startNextVideo); 
} 
 
//функция используется в createNextVideo() 
function createVideoElement() 
{ 
    var video = document.createElement('video'); 
    video.preload = 'auto'; //но без autoplay, т.к. оно отменяет preload 
 
    video.addEventListener('loadedmetadata', createNextVideo); 
    video.addEventListener('ended', startNextVideo); 
 
    return video 
} 
 
var videoContainer = document.getElementById('videoContainer'), 
    activeVideo = 0, 
    vidSources = 
    [ 
        "http://www.w3schools.com/html/mov_bbb.mp4", 
        "http://www.w3schools.com/html/movie.mp4" 
    ]; 
 
var vidElement = createVideoElement(vidSources[0]); 
vidElement.autoplay = true; 
vidElement.src = vidSources[0]; 
videoContainer.appendChild(vidElement);

video{background-color: red}

<div id="videoContainer"></div>

Как этот код выглядел до попытки решить эту задачу:

function createVideoElement() 
{ 
    var video = document.createElement('video'); 
    video.preload = 'auto'; 
 
    video.addEventListener('loadedmetadata', function(e) 
    { 
        if(++activeVideo == 2) 
            activeVideo = 0; 
 
        this.nextVideoElement = createVideoElement(); 
        this.nextVideoElement.src = vidSources[activeVideo]; 
        this.nextVideoElement.pause(); 
    }); 
 
    video.addEventListener('ended', function(e) 
    { 
        this.nextVideoElement.play(); 
        videoContainer.replaceChild(this.nextVideoElement, videoContainer.firstChild); 
    }); 
 
    return video 
} 
 
var videoContainer = document.getElementById('videoContainer'), 
    activeVideo = 0, 
    vidSources = 
    [ 
        "http://www.w3schools.com/html/mov_bbb.mp4", 
        "http://www.w3schools.com/html/movie.mp4" 
    ]; 
 
var vidElement = createVideoElement(vidSources[0]); 
vidElement.autoplay = true; 
vidElement.src = vidSources[0]; 
videoContainer.appendChild(vidElement);

video{background-color: red}

<div id="videoContainer"></div>

Как мне кажется, в самом первом примере видео тормозит немного меньше, но не намного. Я надеюсь, что этот код более прост для понимания, нежели предыдущий.

Тот самый последний пример:

Чтобы развеять ваши сомнения (если у кого-то такие есть) о том, что с этими видео что-то не так, в нижеследующем примере вы можете убедиться, что с этими видео всё в порядке:

var video = document.querySelector('video'), 
    activeVideo = 0; 
    videoSources = 
    [ 
        "http://www.w3schools.com/html/mov_bbb.mp4", 
        "http://www.w3schools.com/html/movie.mp4" 
    ]; 
 
video.addEventListener('ended', function(e) 
{ 
    if(++activeVideo == videoSources.length) 
        activeVideo = 0; 
 
    video.src = videoSources[activeVideo]; 
    video.play(); 
});

video { background-color: red }

<video src="http://www.w3schools.com/html/mov_bbb.mp4" autoplay></video>

В этом примере, как вы видите, возникают прерывания между воспроизведением видео и именно поэтому мне пришлось придумать вышеследующее решение, у которого теперь другие трудности / ошибки.

Итак, мне нужно решить такие задачи:

1. Как удалить зацикливание так, чтобы освобождалась память, а не увеличивалась как сейчас?
2. Как сделать так, чтобы видео при воспроизведении не тормозили? Возможно даже, что с удалением зацикливания это исчезнет.

Если есть вопросы, то, пожалуйста, спрашивайте!

Пожалуйста, помогите решить эти задачи!