HTML 5 Video nacheinander laden

Hallo Leute,

Ich habe eine Seite geschrieben, welche 5 videos direkt untereinander abspielen soll.

-Klappt wunderbar ich habe dafür den HTML 5 Tag benutzt:

<video class="vid" autoplay="true" loop>
   <source src="/vids/1.webm" type="video/webm" /> 
   <source src="/vids/1.mp4" type="video/mp4" /> 
   <source src="/vids/1.ogv" type="video/ogg" /> 
</video>

Doch eine Sache stört mich, sobald man die Seite aufruft lädt der direkt alle videos und erst dann fängt er an das erste abzuspielen.

Ich würde gerne, dass er erst das erste Video lädt - abspielt wenns fertig ist und dann mit dem zweiten weiter macht.

Wie kann ich das so einrichten?

LG

Answer 1

[HorstSergio]

Für die Videos, die nicht direkt geladen werden sollen, verwendest du das Attribut "preload='none'". Das "autoplay"-Attribut muss dann natürlich auch raus. Das "controls"-Attribut rein, damit der Besucher das Video auch manuell starten kann.

<video class="vid" preload="none" controls  loop>
   <source src="/vids/1.webm" type="video/webm" /> 
   <source src="/vids/1.mp4" type="video/mp4" /> 
   <source src="/vids/1.ogv" type="video/ogg" /> 
</video>

Comments

[javinator]

Sorry war lange nicht mehr in GF...

Super dann kann ich einfach mittels javascript das danach laden :) Danke dir

Answer 2

[germanils]

Indem Du etwas JavaScript verwendest, um die gewünschte Funktion zu erreichen. Google mal nach Beispielen, Du bist sicher nicht der erste, der sowas versucht. Suchstring Vorschlag "HTML 5 Video Playlist"

Woher ich das weiß: Berufserfahrung – Entwicklung von Apps und Websites