Как правильно обрабатывать переключение видео html5

Я пришел сюда после долгих проблем с чем-то, что может быть связано только с видео, и, вероятно, плохо понимаю ресурсы страницы в целом. То, что я пытаюсь сделать, - это возможность иметь одну веб-страницу, на которой, нажимая кнопки «вперед» и «назад», можно изменить содержимое div для отображения одного из видео в очевидном последовательном порядке. Видео в настоящее время находится в формате mp4 в видеоэлементе html5.

Я пробовал несколько методов.

• прямое изменение src исходного элемента (похоже, ничего не делает)

• удалите элемент и повторно добавьте его с другим src. (имеет проблему, описанную ниже)

• удалите элемент и используйте Jquery .load() для размещения внешнего html-файла со всем элементом видео в нем, включая отдельный html-файл для каждого src. (имеет проблему, описанную ниже)

• удалите элемент и повторно добавьте его с помощью src, указывающего на загрузку файла из GridFS с использованием фреймворка python flask. (имеет проблему, описанную ниже)

Итак, основная проблема, с которой я столкнулся, связана с повторными загрузками одного и того же видео со страницы. Скажем, если вы нажмете «следующее видео», затем «предыдущее видео». Это приводит к тому, что видео становится «черным» (вообще не загружается, ведет себя так, как будто src не работает). При первом запросе каждого из видео оно загружается менее чем за секунду, второе время варьируется, но всегда превышает 10 секунд. до того, как содержимое видео появится на экране, и оно станет доступным для воспроизведения. Сетевые инструменты Google Chrome для разработчиков отображают медиафайл как «ожидающий», пока я жду, когда, когда он завершится, ожидание, наконец, превратит вышеуказанное видео в красный (отменено), а новый источник в «частичный контент». Во время ожидания он не может ничего получить с сервера, включая прокручивающиеся изображения.

Я пробовал это локально с помощью простого html-сервера flask и python, а также на 8-ядерном сервере через гигабитный Ethernet. Это не проблема случайной сетевой задержки, происходит что-то странное.

Одна из вещей, которые я пытаюсь понять, это то, как новый запрос к серверу работает с частичным контентом. У меня была некоторая идея, что кеш браузера будет хранить файл, чтобы во второй раз он загружался быстрее, что в любом случае было бы оптимально. Это все еще происходит с видео html5?

Также следует отметить, что файлы довольно маленькие, одна минута или около того видео размером около 20 МБ. Похоже, что веб-сервер по какой-то причине просто блокирует второй запрос, и мне интересно, слышал ли кто-нибудь из вас об этом. Я могу опубликовать код по запросу, но я думаю, что концепция довольно проста.

Я планирую использовать GridFS с flask для окончательной реализации этого сайта.

Из-за приведенного ниже предложения я попытался избавиться от исходного элемента и прикрепить атрибут src к самому видео. Это дает тот же результат. Вот довольно простая вещь, которую я делаю:

$('#addlinks').click(function(){

    $('#maininside').remove();
    $('#maintext').append('<div id=maininside></div>');        
    $('#maininside').html('<video width="100%" controls src="/getmedia/dangerisland-01-video-01.m4v">Your browser does not support the video tag.</video>');

});

<article id="maintext">            

        <div id="maininside">            

        </div>       

</article>

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

Спасибо за любое понимание, которое у вас может быть.