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

Дойдох тук след много проблеми с нещо, което може да е свързано само с видеоклипове и вероятно е лошо разбиране на ресурсите на страницата като цяло. Това, което се опитвам да постигна, е възможността да имам една уеб страница, в която чрез щракване върху бутоните „напред“ и „назад“ човек може да промени съдържанието на div, за да покаже един от видеоклиповете в очевиден последователен ред. В момента видеоклипът е във формат mp4 в html5 видео елемент.

Опитах няколко метода.

• директно променя src на изходния елемент (изглежда не прави нищо)

• премахнете елемента и го добавете отново с различен src. (има проблем, описан по-долу)

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

• премахнете елемента и го добавете отново със src, сочещ към изтегляне на файла от GridFS, използвайки рамката на колбата на python. (има проблем, описан по-долу)

Добре, така че основният проблем, който имам, е с многократните изтегляния на едно и също видео от страницата. Кажете, че ако щракнете върху „следващ видеоклип“, след това върху „предишен видеоклип“. Това кара видеото да е „черно“ (изобщо не се зарежда, действа като src е повреден). Първият път, когато всеки от видеоклиповете е заявен, той се зарежда за по-малко от секунда, вторият път варира, но винаги е над 10 секунди. преди съдържанието на видеото да изскочи и да стане възпроизвеждано. Мрежовите инструменти за разработка на Google Chrome изброяват медиите като „чакащи“, докато чакам, когато най-накрая приключи с чакането, горният видеоклип става червен (отменен), а новият източник – „частично съдържание“. По време на времето за изчакване изглежда не може да изтегли нищо от сървъра, включително преобръщащи се изображения.

Опитах това локално с flask и python simple html сървър, както и на 8-ядрен сървър през гигабитов Ethernet. Това не е проблем на случайно забавяне на мрежата, случва се нещо странно.

Едно от нещата, които се опитвам да разбера, е как даването на нова заявка към сървъра работи с частично съдържание. Имах някаква идея, че кеша на браузъра ще съхрани файла, така че второто зареждане трябва да бъде по-бързо, което така или иначе би било оптимално. Това все още ли се случва с html5 видеоклипове?

Също така трябва да се отбележи, че файловете са сравнително малки, една минута или повече видеоклипове от около 20 mb. Изглежда, че уеб сървърът просто блокира втората заявка по някаква причина и се чудя дали някой от вас е чувал за това. Мога да публикувам код при поискване, но мисля, че концепцията е доста проста.

Планирам да използвам GridFS с колба за окончателното внедряване на този сайт.

Поради предложението по-долу се опитах да премахна елемента източник и да прикача атрибута 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 секунди, след което отново се изтегля с пълна скорост и се връща. Ето изгледа на разработчиците на използването на мрежата веднага след като се възстанови за втори път:

Благодарим ви за всяко прозрение, което може да имате.