Wiele wideo użytkownika na jednej stronie nie ładowanie wszystkich pliku wideo Chrome

Question

mam ładowania wielu graficznej na jednej stronie,

Moje urywek kodu jest coś,

<div class="video_content left"> 
    <span style="font-weight:bold">1</span> 
    <video width="213" height="120" controls class="video_tag"> 
     <source src="<MY VIDEO SOURCE>" type="video/mp4" /> 
    </video> 
</div> 
<div class="video_content left"> 
    <span style="font-weight:bold">2</span> 
    <video width="213" height="120" controls class="video_tag"> 
     <source src="<MY VIDEO SOURCE>" type="video/mp4" /> 
    </video> 
</div> 
<div class="video_content left"> 
    <span style="font-weight:bold">3</span> 
    <video width="213" height="120" controls class="video_tag"> 
     <source src="<MY VIDEO SOURCE>" type="video/mp4" /> 
    </video> 
</div> 
<div class="video_content left"> 
    <span style="font-weight:bold">4</span> 
    <video width="213" height="120" controls class="video_tag"> 
     <source src="<MY VIDEO SOURCE>" type="video/mp4" /> 
    </video> 
</div> 

Czasami dostanę 20 + wideo jest na jednej stronie, więc w tym czasie utworzę wiele tagów wideo.

Ilekroć próbuję tego kodu w moim localhost działa dobrze, ale jeśli host ten kod na serwerze zdalnym i spróbuj tylko kilka wideo będzie ładowanie, ale w moim elementu chrome inspect nie ma komunikatu o błędzie.

Próbowałem ponownie załadować wideo jeden po drugim za pomocą JQuery z pewnym odstępem czasu, tym razem otrzymam "Tymczasowe nagłówki są wyświetlane" rodzaj ostrzeżenia w chromie elementu Inspect.

Czy ktoś mógłby mi pomóc rozwiązać ten problem?

Z góry dziękuję.

Answer 1

To może być duża ilość danych do pobrania przez przeglądarkę naraz, w zależności od wielkości pliku oraz od tego, jak szybko i daleko znajduje się serwer. Spróbuj nadać każdemu znacznikowi wideo atrybut preload i ustaw go na "metadane". W ten sposób:

<video width="213" height="120" controls class="video_tag" preload="metadata"> 

To powinno ograniczyć liczbę plików, które przeglądarka musi załadować wszystkie naraz, tylko ładowanie nagłówka każdego pliku wideo. Reszta pliku zostanie załadowana po rozpoczęciu gry. Jeśli to nie działa, spróbuj ustawić preload na "none".

Należy się także upewnić, że serwer zdalny korzysta z obsługi bajtów HTTP. tj. nagłówek statusu HTTP w plikach wideo powinien być "206 Częściowa zawartość", a nie "200 OK".

Answer 2

Chrome ogranicza liczbę plików audio/video do 4 lub 6 (nie pamiętam jakie) tak, jak brianchirls wspomina, trzeba ustawić atrybut preload, choć trzeba ustawić go none.

Moja rada jest taka, aby zapewnić obraz plakat (za pomocą atrybutu poster) dla wszystkich swoich filmów i ustawić preload="none" do wszystkich z nich. W ten sposób przeglądarka faktycznie próbuje je załadować, jeśli użytkownik aktywnie kliknie przycisk odtwarzania.

Alternatywnie można ustawić pierwsze filmy 4/6 z preload="metadata", a resztę na preload="none".